Use the classic export path for this example
The code below expects the classic package’s animation lists and engine-specific timing metadata. It has not been rewritten as a universal loader for the current editor’s frameTags or game-package manifest.
Prepare the sprite package
Name the project and clip
Use Hero as the project name and Walk as the animation clip name for this example.
Select the clip
Open Export → Sprite Sheet & Package Settings and select Walk under Animation.
Download the package
Choose Sprite Package. This requires Pro. Extract hero-walk-sprites.zip into your game's assets/hero/ folder.
Keep the atlas files together
The example uses hero-walk-sheet.png and hero-walk.json. Optional individual PNG files are not required for atlas playback.
Load the atlas and create its animations
Add these methods to your Phaser scene. The atlas loader reads the image and frame rectangles. Loading the JSON separately also makes PixelWall's animation recipes available to the scene.
preload() {
this.load.atlas(
'hero-walk',
'assets/hero/hero-walk-sheet.png',
'assets/hero/hero-walk.json'
);
this.load.json('hero-walk-data', 'assets/hero/hero-walk.json');
}
create() {
const data = this.cache.json.get('hero-walk-data');
for (const recipe of data.phaser.animations) {
this.anims.create({ ...recipe, sortFrames: false });
}
const firstFrame = data.animations.Walk[0];
this.add.sprite(160, 120, 'hero-walk', firstFrame)
.setScale(4)
.play('Walk');
}Preserve timing and playback order
PixelWall expands reverse and ping-pong clips into their intended frame order. Do not add another yoyo pass. The animation recipes use per-frame milliseconds with a 1 ms base animation duration, following Phaser's documented timing approach. This adds approximately 1 ms per complete sequence.
Keep the atlas key consistent with the keys in the exported animation recipes. Use unique animation names if several assets contain a clip called Walk. Clip names are case-sensitive.
Check the result in your game
- Missing image: check the image and JSON paths, then confirm the atlas key.
- Missing animation: match the exported clip name exactly and confirm the animation frames reference the loaded atlas.
- Wrong frame order: preserve the explicit exported sequence and do not add yoyo behavior to an already expanded ping-pong clip.
- Standalone PNG sheet: use a regular spritesheet loader with your frame dimensions and padding. That image does not contain JSON animation timing.