Sprite

Render textured quads via Sprite2D.

▶ Run in browser

Tags: 2d

Generates checkerboard, gradient, and star textures programmatically and displays them as Sprite2D nodes. Demonstrates passing an RGBA uint8 ndarray directly as the texture source (no file I/O), vertex-colour tinting, and rotation animation.

Source

 1"""Sprite: Render textured quads via Sprite2D.
 2
 3Generates checkerboard, gradient, and star textures programmatically and
 4displays them as `Sprite2D` nodes. Demonstrates passing an RGBA uint8 ndarray
 5directly as the texture source (no file I/O), vertex-colour tinting, and
 6rotation animation.
 7
 8# /// simvx
 9# web = { width = 900, height = 600 }
10# ///
11"""
12
13import math
14
15import numpy as np
16
17from simvx.core import Node2D, Sprite2D, Text2D
18from simvx.core.math.types import Vec2
19from simvx.graphics import App
20
21
22def _make_checkerboard(size: int = 64, cell: int = 8) -> np.ndarray:
23    img = np.zeros((size, size, 4), dtype=np.uint8)
24    for y in range(size):
25        for x in range(size):
26            if (x // cell + y // cell) % 2 == 0:
27                img[y, x] = [200, 60, 60, 255]
28            else:
29                img[y, x] = [60, 60, 200, 255]
30    return img
31
32
33def _make_gradient(size: int = 64) -> np.ndarray:
34    img = np.zeros((size, size, 4), dtype=np.uint8)
35    for x in range(size):
36        t = x / (size - 1)
37        r = int(255 * t)
38        g = int(255 * (1 - t))
39        img[:, x] = [r, g, 80, 255]
40    return img
41
42
43def _make_star(size: int = 64) -> np.ndarray:
44    img = np.zeros((size, size, 4), dtype=np.uint8)
45    cx, cy = size // 2, size // 2
46    for y in range(size):
47        for x in range(size):
48            dx, dy = x - cx, y - cy
49            dist = math.sqrt(dx * dx + dy * dy)
50            angle = math.atan2(dy, dx)
51            r = (size * 0.4) * (0.5 + 0.5 * abs(math.cos(2.5 * angle)))
52            if dist < r:
53                brightness = int(255 * (1 - dist / r))
54                img[y, x] = [255, 220, 50, brightness]
55    return img
56
57
58class SpriteScene(Node2D):
59    def on_ready(self):
60        self._time = 0.0
61        checker = _make_checkerboard()
62        gradient = _make_gradient()
63        star = _make_star()
64
65        self.checker = self.add_child(Sprite2D(
66            texture=checker, position=Vec2(200, 200), width=128, height=128, name="Checker",
67        ))
68        self.gradient = self.add_child(Sprite2D(
69            texture=gradient, position=Vec2(500, 200), width=128, height=128,
70            colour=(0.8, 1.0, 0.8, 1.0), name="Gradient",
71        ))
72        self.star = self.add_child(Sprite2D(
73            texture=star, position=Vec2(350, 400), width=192, height=192, name="Star",
74        ))
75        self.small_checker = self.add_child(Sprite2D(
76            texture=checker, position=Vec2(700, 400), width=64, height=64,
77            scale=Vec2(0.5, 0.5), colour=(1.0, 1.0, 0.5, 0.8), name="SmallChecker",
78        ))
79        self.add_child(Text2D(text="Sprite2D Demo", x=10, y=10, font_scale=1.5, name="Title"))
80        self.add_child(Text2D(text="Checker | Gradient (tinted) | Star | Rotating", x=10, y=40, name="Info"))
81
82    def on_process(self, dt: float):
83        self._time += dt
84        self.star.rotation = self._time * 0.5
85        self.gradient.position = Vec2(500, 200 + 30 * math.sin(self._time * 2))
86
87
88if __name__ == "__main__":
89    App(width=900, height=600, title="SimVX Sprite2D Demo").run(SpriteScene())