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 files
Create the clip
Name your PixelWall project Hero and create an animation clip named Walk.
Export the selected animation
Select Walk in Sprite Sheet & Package Settings, then download Sprite Package with Pro.
Extract the package
Place hero-walk.json beside hero-walk-sheet.png in assets/hero/. The JSON meta.image field points to that PNG.
Create an animation with the exported timing
This JavaScript example assumes you already have an initialized PixiJS application named app. It pairs each atlas texture with the frame duration saved by PixelWall.
import { AnimatedSprite, Assets } from 'pixi.js';
const sheet = await Assets.load('assets/hero/hero-walk.json');
const data = sheet.data;
const clip = data.pixelwall.clips.find((item) => item.name === 'Walk');
const frames = data.animations.Walk.map((name) => ({
texture: sheet.textures[name],
time: data.frames[name].duration,
}));
const sprite = new AnimatedSprite(frames);
sprite.animationSpeed = 1;
sprite.loop = clip.repeat === -1;
sprite.updateAnchor = true;
sprite.position.set(160, 120);
sprite.scale.set(4);
app.stage.addChild(sprite);
sprite.play();Keep frame timing, anchors, and direction
The parsed sheet exposes both textures and the original JSON. PixelWall's animation list already contains the forward, reverse, or ping-pong playback order.
Passing only sheet.animations.Walk would provide the texture sequence without its individual frame durations. The example uses texture/time objects to retain unequal timing. updateAnchor applies the exported anchor when the frame changes.
The snippet supports the editor's looping and play-once settings. Custom finite repeat counts would need additional playback logic.
Check the result in your project
- Missing PNG: verify meta.image and keep the referenced image beside the JSON, or update that relative path.
- Undefined Walk animation: use the exact capitalization of the exported clip name.
- Unexpected speed: keep animationSpeed at 1 when using the exported millisecond timings.
- Blurry pixels: use nearest-neighbor texture sampling in your PixiJS setup and integer display scaling.