feat(examples): Add animated sprite example using SpriteComponent#8676
Merged
Conversation
A new example under `misc/` that demonstrates `SpriteComponent` with multiple animation clips, plus a small platformer-style controller: - Arrow keys walk left/right (entity scale flip for left) - Space jumps with simple gravity - Z rolls (one-shot, locked-in forward motion) - X attacks (one-shot) Also shows how to build a `TextureAtlas` at runtime from a regular grid spritesheet, and reuses the same `createSpriteAsset` helper to spawn a row of ground tiles from a separate tileset texture. Adds two pixel-art assets to `examples/assets/sprites/`: - `caveman.png` (6x7 character spritesheet) - `prehistoric-tileset.png` (one 48x48 ground tile is referenced) Also adds `text-align: center` to the example viewer's description panel so short descriptions are centered horizontally within the already-centered panel. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new interactive engine example demonstrating SpriteComponent-driven 2D sprite animation (with keyboard-controlled state machine) and runtime TextureAtlas construction, plus minor viewer styling and associated assets/thumbnails.
Changes:
- New
animated-spriteexample showcasing animated clips, one-shot actions, sprite flipping, and runtime atlas generation from grid spritesheets/tilesets. - Add new sprite textures + example thumbnails for the example browser.
- Center-align description panel text in the examples viewer.
Reviewed changes
Copilot reviewed 2 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| examples/src/examples/misc/animated-sprite.example.mjs | New animated sprite example implementing runtime atlas creation and input-driven clip switching. |
| examples/src/static/styles.css | Centers the description panel text for improved presentation. |
| examples/assets/sprites/caveman.png | New character spritesheet asset for the example. |
| examples/assets/sprites/prehistoric-tileset.png | New tileset texture used to generate ground tiles in the example. |
| examples/thumbnails/misc_animated-sprite_small.webp | New thumbnail for the example picker (small). |
| examples/thumbnails/misc_animated-sprite_large.webp | New thumbnail for the example picker (large). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
2026-05-03.23-16-26.mp4
Adds a new engine example demonstrating
SpriteComponentwith multiple animation clips, driven by keyboard input as a small platformer-style controller. The example also illustrates how to build aTextureAtlasat runtime from a regular-grid spritesheet, and how to reuse the same sprite construction helper to spawn a row of ground tiles from a separate tileset texture.Lives at
examples/src/examples/misc/animated-sprite.example.mjs.Controls
What it covers
TextureAtlasprogrammatically from a regular grid, with frame rects derived fromtexture.width/texture.heightat runtimeFEET_OFFSET_PX) so the entity origin aligns with the character's feetSpriteresource in a sprite asset that can be referenced by name or id (no JSON files required)SpriteAnimationClips to aSpriteComponentfrom a definition table'end'eventSPRITETYPE_SIMPLEtiles to act as a groundAssets
Two new pixel-art textures are added to
examples/assets/sprites/:caveman.png(6x7 character spritesheet)prehistoric-tileset.png(one 48x48 ground tile is referenced)Other changes
examples/src/static/styles.css: addedtext-align: center;to#descriptionPanel. The panel itself was already horizontally centered vialeft: 50%+transform: translateX(-50%), but its text wasn't, so short// @config DESCRIPTION ...strings appeared left-aligned within the panel.Public API changes
None.
Test plan
npm run lint(engine + examples) passesnpm run developinexamples/; verify idle plays on load