How to Load a Sprite Atlas in Phaser 3

4 min read · Updated August 2026

Phaser 3 reads TexturePacker-style atlas JSON natively — no plugins, one loader call. SpritePilot’s "Phaser 3" export produces exactly the JSON-array flavour load.atlas expects, with your custom sprite names as frame keys.

Open Export & Download — free, in your browser, no signup.

Name your frames, then export. In Export & Download, open "Rename & Reorder Sprites" and give frames meaningful sequential names (walk_0001, walk_0002…) — you’ll use these patterns for animations. Pick the "Phaser 3" metadata format and download both files: sprite-sheet.png and sprite-sheet.phaser.json.
Load the atlas. Put both files in your assets folder and load them in preload() with a single atlas call — texture first, JSON second.
Use frames and build animations. Any frame is addressable by name (remember the .png suffix on frame names), and generateFrameNames turns your naming pattern into an animation in one call.

function preload() {
  this.load.atlas("hero", "assets/sprite-sheet.png", "assets/sprite-sheet.phaser.json");
}

function create() {
  this.add.image(100, 100, "hero", "walk_0001.png");

  this.anims.create({
    key: "walk",
    frames: this.anims.generateFrameNames("hero", {
      prefix: "walk_", suffix: ".png",
      start: 1, end: 8, zeroPad: 4
    }),
    frameRate: 12,
    repeat: -1
  });

  this.add.sprite(200, 100, "hero").play("walk");
}

Tips

Frame names in the atlas carry a .png suffix (walk_0001.png) — forgetting it in generateFrameNames’ suffix option is the classic "frame missing" bug.
If you enabled Trim transparency, Phaser still positions sprites correctly — the JSON’s sourceSize and spriteSourceSize fields carry the untrimmed geometry.
For pixel art, create the game with pixelArt: true in the Phaser config so scaling stays crisp.

How to Load a Sprite Atlas in Phaser 3

Tips

Related guides