SpriteSheet demo

Simple demo showing how to create a SpriteSheet via the Image element.

.reuse/dep5

@@ -127,6 +127,10 @@ Files: examples/dial/images/*.png
 Copyright: Copyright © SixtyFPS GmbH <info@slint.dev>
 License: MIT
 
+Files: examples/sprite-sheet/images/*.png
+Copyright: Copyright © SixtyFPS GmbH <info@slint.dev>
+License: MIT
+
 Files: examples/weather-demo/index.html
 Copyright: Copyright © SixtyFPS GmbH <info@slint.dev>
 License: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

examples/dial/README.md

@@ -5,14 +5,13 @@
 
 # Slint dial example
 
-Work in progress Dial example. Uses Math.atan to calculate the angle and let the user rotate a dial.
+Work in progress Dial example. Uses Math.atan2 to calculate the angle and let the user rotate a dial.
 
 [Online Preview](https://slint.dev/snapshots/master/editor/preview.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/dial/dial.slint)
 [Online code editor](https://slint.dev/snapshots/master/editor/index.html?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/dial/dial.slint)
 
 # Planned changes
 
-- [ ] Update and simplify the code by using the new Math.atan2 function.
 - [ ] Lock the dial so it cannot be rotated between the blank start and end angles.
 - [ ] Update the graphics slightly. They are 10 years old and would benefit from a small polish.
 

examples/sprite-sheet/README.md

@@ -0,0 +1,5 @@
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+[![Sprite Sheet Screenshot](https://github.com/user-attachments/assets/51f778a4-f7ab-492c-adf6-a33fa1fca6c7)
+
+# Sprite sheet demo
+

examples/sprite-sheet/SpriteSheet.slint

@@ -0,0 +1,27 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+export component SpriteSheet {
+
+    in property <image> source;
+    in property <int> frames-wide;
+    in property <int> frames-high;
+    in property <int> total-frames: frames-wide * frames-high;
+    in-out property <bool> playing: false;
+    in property <duration> duration;
+    in property <int> frame: 0;
+
+    property <int> current-frame: playing ? (total-frames * (animation-tick() / duration)).mod(total-frames) : frame.mod(total-frames).abs();
+    width: sheet.width;
+    height: sheet.height;
+
+    sheet :=Image {
+        source: root.source;
+        source-clip-width: self.source.width / root.frames-wide;
+        source-clip-height: self.source.height / root.frames-high;
+        source-clip-x: self.source-clip-width * current-frame.mod(root.frames-wide);
+        source-clip-y: self.source-clip-height * (current-frame / root.frames-wide).floor();
+        width: self.source.width / root.frames-wide * 1px;
+        height: self.source.height / root.frames-high * 1px;
+    }
+}

examples/sprite-sheet/demo.slint

@@ -0,0 +1,66 @@
+// Copyright © SixtyFPS GmbH <info@slint.dev>
+// SPDX-License-Identifier: MIT
+
+import { ComboBox } from "std-widgets.slint";
+import { SpriteSheet } from "SpriteSheet.slint";
+
+enum TravelDirection { left, right }
+
+export component AppWindow inherits Window {
+    preferred-width: 1024px;
+    preferred-height: 720px;
+
+    property <TravelDirection> travel-direction: TravelDirection.right;
+
+    cb := ComboBox {
+        x: 10px;
+        y: 10px;
+        model: ["Boing Ball", "Static"];
+        current-value: "Boing Ball";
+    }
+
+    if cb.current-value == "Static": SpriteSheet {
+        source: @image-url("images/sprite.png");
+        frames-wide: 5;
+        frames-high: 5;
+        total-frames: 21;
+        playing: true;
+        duration: 700ms;
+    }
+
+    if cb.current-value == "Boing Ball":  ball := SpriteSheet {
+        property <int> frameTick: animation-tick() / 16ms;
+        function updateX(){
+       
+            if ball.x > root.width - ball.width {
+                travel-direction = TravelDirection.left;
+                ball.x = 0;
+            }
+            if ball.x <= 0 {
+                travel-direction = TravelDirection.right;
+                ball.x = root.width;
+            }
+        }
+        
+        source: @image-url("images/sprite.png");
+        frames-wide: 5;
+        frames-high: 5;
+        total-frames: 21;
+        x: 0px;
+        animate x { duration: 3s; }
+        y: (-400px * abs(sin(360deg * animation-tick() / 3s))) + parent.height - ball.height;
+
+        changed x => { updateX() }
+
+        changed frameTick => {
+            if travel-direction == TravelDirection.left {
+                ball.frame = ball.frame + 1;
+            } else {
+                ball.frame = ball.frame - 1;
+            }
+         }
+
+        // Update X on start or the ball will be stuck at 0 as no 'changed x' happens
+        init => { updateX() }
+    }
+}