How to Export a Phaser Texture Atlas from SpritePilot

4 min read · Updated October 2026

Phaser reads atlas JSON natively, so the work happens at export time: frame names you can build animations from, the pivot, tags and trimming. This guide covers those settings in Export & Download, the two files you get, and the loader call that puts a frame on screen. Building and playing the animations is covered in the Phaser article linked at the end. Everything here works in Phaser 3.60 and later, including Phaser 4.

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

Name the frames. Open "Rename & Reorder Sprites" and name each animation’s frames with one prefix and numbers of one width: walk_0001, walk_0002… attack_0001. Phaser’s generateFrameNames rebuilds names from exactly that: a prefix, a zero-padded number and a suffix. Untouched frames are called sprite_0001, sprite_0002 and so on; spaces become underscores, and a repeated name gets _2 added. Fix the order with the arrow buttons.
Choose the Phaser 3 format. Keep "Export metadata file" ticked and pick "Phaser 3" (JSON array). "TexturePacker" (JSON hash) loads the same way, because Phaser detects which of the two it got. Don’t pair "Aseprite JSON" with load.aseprite: its createFromAseprite looks frames up by number, not by your names.
Set the pivot. "Pivot Point" appears once a Phaser or TexturePacker format is chosen. Phaser makes it each frame’s origin and applies it again every time the frame is shown, so set it here rather than with setOrigin(): bottom center (0.5, 1) for characters, so x and y mark their feet, and the center for things that spin.
Tag the animations (optional). "Animation Tags" (idle 0–3, walk 4–9…) go into the JSON’s meta.frameTags, counted from 0 in the export order; the Rename & Reorder list numbers frames from 1. The Phaser article linked below builds every animation from them in one loop.
Trim, pad and download. "Trim transparency" is safe: Phaser reads sourceSize and spriteSourceSize, so trimmed frames stay in place. With pixelArt: true, Padding and Extrude can usually stay at 0; for smooth art or a zooming camera, start with Padding 2 and Extrude 1. Choose PNG or WebP (JPG has no transparency) and click "Download Sprite Sheet" for sprite-sheet.png and sprite-sheet.phaser.json.
Load the atlas and show a frame. Put both files in your assets folder; you can rename them, since load.atlas takes both paths. One call in preload(), then any frame by its name plus .png:

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

function create() {
  // a name from Rename & Reorder, plus ".png"
  this.add.sprite(160, 120, "hero", "walk_0001.png");
}

Tips

Frame names carry a .png suffix (walk_0001.png). Leaving it out, in add.sprite or in generateFrameNames’ suffix option, is the classic "frame not found" warning.
For pixel art, add pixelArt: true to the game config so scaled sprites stay crisp.
SpritePilot remembers your export settings for next time, and keeps the names, order and tags you set with your session in this browser — they’re still there when you come back.

Go deeper

Phaser: Loading Sprite Sheets and Texture Atlases (and Animating Them) — The next step: generateFrameNames, one loop over your tags, play() inside update(), and animation events.
Trimming Transparent Pixels From Sprites: Smaller Sheets Without Jitter — What sourceSize and spriteSourceSize do, and why Phaser needs no extra code for trimmed frames.
Sprite Pivot Points Explained: Center, Feet and Flipping — Origins and feet, and how a pivot from the atlas changes the way flipX mirrors a sprite.
Free Pixel Art Game Assets — 70 animated CC0 strips: load one with load.spritesheet, or slice it in SpritePilot and export it as an atlas.

How to Export a Phaser Texture Atlas from SpritePilot

Tips

Go deeper

Related guides