PixiJSMetadata export

Sprite Sheet Generator for PixiJS

Export a TexturePacker-format JSON atlas that PixiJS parses natively. Assets.load gives you a Spritesheet with every texture already cut.

A sprite sheet exported as a JSON atlas, next to the settings it needs in PixiJS
What you export

Format menu

Phaser / PixiJS

JSON atlas (TexturePacker format)

PixiJS reads the same TexturePacker JSON that Phaser does. Assets.load on the JSON returns a parsed Spritesheet whose textures map is keyed by frame name, so an AnimatedSprite is one line away. Trimmed frames keep their original footprint through spriteSourceSize.

Step by step

Getting the sheet into PixiJS

  1. 1

    Export the PNG and the JSON

    Export the sheet as PNG, then Format > Phaser / PixiJS for the atlas. The JSON references the PNG by name, so keep them together.

  2. 2

    Load the atlas

    Await Assets.load on the JSON path. Pixi fetches the referenced PNG for you and returns a Spritesheet.

  3. 3

    Build the AnimatedSprite

    Pass the ordered textures into new AnimatedSprite. Frames are keyed frame_000 upward, so Object.values keeps export order.

  4. 4

    Keep pixels crisp

    Set the texture scale mode to nearest, or set TextureSource.defaultOptions.scaleMode to "nearest" before loading.

JavaScript
import { Assets, AnimatedSprite, TextureSource } from 'pixi.js';

TextureSource.defaultOptions.scaleMode = 'nearest';

const sheet = await Assets.load('hero.json');

const hero = new AnimatedSprite(Object.values(sheet.textures));
hero.animationSpeed = 0.2; // ~12 fps at 60 fps ticker
hero.play();

app.stage.addChild(hero);
Cheat sheet
SettingPixiJS value
Loaderawait Assets.load("sheet.json")
Frame accesssheet.textures["frame_000"]
Animationnew AnimatedSprite(textures)
SpeedanimationSpeed, fraction of ticker FPS
Crisp pixelsscaleMode: "nearest"
Built for the workflow

Parsed on load

Pixi detects the TexturePacker shape and builds the Spritesheet itself. No manual Rectangle maths.

Stable frame order

Names are zero-padded (frame_000, frame_001), so insertion order and sort order agree.

Trim aware

Trimmed frames carry sourceSize, so Pixi restores the original bounds and your anchors stay put.

Web-native output

A PNG and a JSON. Serve them from any static host next to your bundle.

PixiJS FAQ

Want the long version? Read the engine import guide, or see every export format.

Other engines
Unity Godot Phaser GameMaker Construct 3 Defold Tiled FNF & Sparrow

Export for PixiJS

Pack your frames in the browser. What you walk away with: JSON atlas (TexturePacker format), ready for PixiJS.

Open the editor All engines