PNG + JSON to visible sprites
Use a texture atlas in PixiJS v8
Start with an atlas exported by this browser tool, load its JSON with PixiJS Assets, and display individual named textures. The downloadable example uses eight existing Kenney Tiny Dungeon tiles; they are separate assets, not an animation sequence.
What you will accomplish
Use the Phaser atlas download, which contains a PNG and TexturePacker-hash JSON. That existing format loads directly in the tested PixiJS 8.22.0 example. There is no separate PixiJS exporter. Generic JSON uses a different frames array and cannot be passed straight to this loader.
Open the atlas toolBefore you start
- Use a modern browser with WebGL and a local HTTP server; file:// is not the asset-loading workflow.
- For the fixed example, download dungeon-atlas.png, dungeon-atlas.phaser.json and pixijs-atlas.html below. Keep those names and put them in one folder.
- Install the pinned engine locally and copy its browser bundle into that folder. No API key, account, AI generation or game framework is required.
Step-by-step workflow
- 1
Export a matching PNG and JSON
For your own assets, open the atlas tool, add frames, choose Phaser atlas in Download format and export the ZIP. Extract sprite-sheet.png and sprite-sheet.json together.
- Try with sample tiles loads the same eight legal CC0 inputs into the editor. The fixed downloads below are independent of any workspace edits.
- The example atlas is 74 × 38 pixels: four columns of 16 × 16 cells, with 2 px spacing and 2 px outer padding.
- Do not pair a new PNG with old JSON. Every changed column, gap, scale or frame order requires a fresh matching export.
- 2
Serve the example folder
Save the three fixed example files in one folder. From that folder run the commands below, then open http://localhost:8000/pixijs-atlas.html.
- The HTML loads ./pixi.min.js, which the copy command supplies from the exact npm version.
- Assets.load resolves meta.image relative to the JSON URL. The fixed JSON points to dungeon-atlas.png in the same folder.
- If hosting files on another origin, that server must permit the asset requests with CORS. A local server avoids file-origin restrictions.
- 3
Load the atlas and select exact frame keys
The runnable code below loads the JSON once and creates eight Sprites from sheet.textures. Each 16 × 16 frame is enlarged four times using nearest-neighbor sampling.
- Fixed sample keys run from tile_0084.png to tile_0091.png. For example, tile_0084.png reads x=2, y=2, w=16, h=16.
- The editor removes file extensions and allocates unique frame names. After an editor export, use tile_0084, not tile_0084.png; inspect Object.keys(sheet.textures) for your exact keys.
- With your ZIP, replace the JSON URL with ./sprite-sheet.json. Its meta.image already references sprite-sheet.png. Change the explicit names list to keys from that JSON.
- 4
Check the result before adding animation
You should see eight distinct tiles in two rows of four, each displayed at 64 × 64 pixels. Compare the first purple character with tile_0084.png and the last chest with tile_0091.png.
- The local verification loads the actual fixed PNG and exported JSON in PixiJS 8.22.0 and compares all eight rendered rectangles against the original source pixels.
- These eight unrelated tiles are a loading check, not a walk cycle. For real animation, choose action frames explicitly and set their order and timing in your game.
- The export contains rectangle geometry, not a PixiJS animations collection or a timing track. Keep gameplay, pivots and playback settings in the consuming project.
Run the complete example
Download the HTML for the full page, including the engine script tag. The code shown here is the exact inline program in that file. Run the setup commands in the folder containing the three downloaded files.
npm install --no-save pixi.js@8.22.0
cp node_modules/pixi.js/dist/pixi.min.js ./pixi.min.js
python3 -m http.server 8000(async () => {
const app = new PIXI.Application();
await app.init({ width: 320, height: 160, backgroundAlpha: 0, antialias: false });
document.querySelector('main').appendChild(app.canvas);
const sheet = await PIXI.Assets.load('./dungeon-atlas.phaser.json');
const names = Array.from({ length: 8 }, (_, i) => `tile_${String(84 + i).padStart(4, '0')}.png`);
for (const [index, name] of names.entries()) {
const texture = sheet.textures[name];
if (!texture) throw new Error(`Missing frame: ${name}`);
texture.source.scaleMode = 'nearest';
const sprite = new PIXI.Sprite(texture);
sprite.position.set(16 + (index % 4) * 72, 8 + Math.floor(index / 4) * 72);
sprite.scale.set(4);
app.stage.addChild(sprite);
}
document.querySelector('#status').textContent = `${names.length} frames loaded with PixiJS ${PIXI.VERSION}`;
})().catch(error => {
document.querySelector('#status').textContent = error.message;
console.error(error);
});Expected: eight named 16 × 16 textures displayed at 4× scale. The engine library stays in your example folder; this guide does not load it into the product page.
Recommended settings
| Setting | Recommended value | Why it matters |
|---|---|---|
| JSON format | Phaser atlas / TexturePacker hash | The frames object contains names and rectangles understood by PixiJS Spritesheet. |
| Image path | meta.image relative to JSON | Moving the JSON without its PNG causes a second asset request to fail. |
| Scale | meta.scale = "1"; sprite scale = 4 | Exported coordinates are source pixels; display scale is set separately. |
| Filtering | texture.source.scaleMode = nearest | Keeps the supplied pixel art crisp at an integer scale; it does not repair incorrect rectangles. |
Check the result
- The Network panel shows successful responses for both JSON and its referenced PNG.
- Object.keys(sheet.textures) lists the exact names you use, including their actual extension policy.
- The sample status says eight frames loaded with PixiJS 8.22.0, and every tile is distinct.
- No neighboring tile pixels appear; the first rectangle is (2, 2, 16, 16), not a zero-gap grid origin.
Common mistakes
Loading the PNG as if it were the atlas
Assets.load on a PNG returns one texture. Load the hash JSON to get a Spritesheet with named subtextures.
Using a generic JSON export
This tool’s generic JSON has a frames array, not the TexturePacker-hash structure. Choose Phaser atlas for this tutorial; changing the file extension does not convert the data.
Copying a v5 or v7 setup
This example is for PixiJS v8: create Application, await app.init(), then append app.canvas. Do not mix the old synchronous constructor or app.view with this code.
A missing frame despite successful downloads
Copy a key from the loaded frames object. Fixed sample names include .png; editor-exported names omit it. Keys are case-sensitive and must match exactly.
Official documentation
Frequently asked questions
Does Sprite Sheet Tool export a native PixiJS format?
There is no dedicated PixiJS exporter. This tutorial verifies the existing Phaser hash JSON and matching PNG directly in PixiJS 8.22.0. Other exports or future engine versions need their own compatibility checks.
Can I load the JSON without adding a custom runtime?
Yes, the tested hash output loads through PixiJS Assets and its built-in Spritesheet parser. No tutorial adapter or new public runtime is needed for these unrotated, untrimmed example frames.
Will the JSON create an AnimatedSprite for me?
No. It describes named rectangles. Choose an ordered set of action textures and configure playback yourself. The fixed tiles do not form an animation.
Continue with another workflow
How to make a sprite sheet from images
Turn PNG, JPG, or WebP animation frames into a clean sprite sheet. Choose a grid, verify frame order, and export PNG plus atlas metadata.
How to convert a GIF to a sprite sheet
Convert an animated GIF into a PNG sprite sheet in your browser while preserving frame order and checking the original frame timing.
How to import a sprite sheet into Unity 6
Prepare a regular sprite sheet, import it into Unity 6, slice it by cell size, and build a clean 2D animation without blurry pixel art.
How to animate a sprite sheet in Godot 4
Prepare a regular sprite sheet, add its frames to AnimatedSprite2D in Godot 4, and verify grid selection, speed, looping, and pixel quality.
Turn a character image into a four-direction walk
Prepare a character reference, try the existing Ranger example, generate a Standard walk, and check the directions and downloaded frames before using them in a game.