spritesheetUV
Calculates and outputs the precise UV coordinates for a specific frame within a single texture atlas (spritesheet), automating the complex UV transformation math.
Core Advantages
Greatly simplifies frame-based animation logic and significantly improves application performance by reducing GPU texture switches and draw calls through the use of texture atlases.
Common Uses
2D character sequence animation
Particle system effects (e.g., explosions, smoke)
UI icon or bitmap font atlases
How to adjust
The key is to adjust the `frameNode` input. Connect a time-varying node (like `timerLocal()`) to play a continuous animation; pass a static float (e.g., `float(5)`) to display a specific static frame. Meanwhile, the `countNode` must accurately match the spritesheet's grid dimensions (e.g., `vec2(8, 8)`) to prevent incorrect framing.
Code Examples
1
2// Loop through the 16 frames of a 4x4 spritesheet at 10 FPS
3const frameNode = timerLocal().mul(10).floor().mod(16);
4
5// Calculate the UV coordinates for the current animation frame
6const animatedUV = spritesheetUV( vec2(4, 4), uv(), frameNode );