SpriteBench
Guide · Phaser 3

Sprite sheets in Phaser 3

Phaser eats TexturePacker-style atlases natively — PNG plus JSON in, animations out. Export the Phaser 3 format from the Sheet Maker and this is a five-minute job.

What you need

  • hero.png — the packed sheet.
  • hero.json — exported from the Maker with the Phaser 3 data format (JSON Hash works too; Phaser accepts both).
  • Frame names you can generate in a sequence: name your source frames like walk_00.png, walk_01.png before packing and the names carry through.

Step 1 — load the atlas

preload() {
  this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');
}

That one call registers every frame from the JSON under the key hero. A single static frame is then just:

create() {
  this.add.image(200, 150, 'hero', 'walk_00.png');
}

Step 2 — build an animation from frame names

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

  const player = this.add.sprite(200, 150, 'hero', 'walk_00.png');
  player.play('walk');
}

generateFrameNames builds the sequence from the naming pattern — which is why consistent file names before packing matter. Frames in a different order, or a one-shot animation, are just a different start/end range and repeat: 0.

Grid sheets instead of an atlas?

If your sheet is a uniform grid you can skip JSON entirely:

preload() {
  this.load.spritesheet('hero', 'assets/hero-grid.png', {
    frameWidth: 48, frameHeight: 48
  });
}

Frames are then numbered from 0 in row-major order, and animations use generateFrameNumbers with a start/end range. The Maker's grid mode (with matching cell size) produces exactly this kind of sheet.

Trimmed frames: if you packed with trimming on, Phaser reads spriteSourceSize from the atlas JSON and restores each frame's original offset automatically — animations won't jitter as long as all frames were trimmed against the same source size. Mixed source sizes in one animation are the usual cause of wobble.

Next steps

Make the atlas · Turn a GIF into a sheet · Godot user? See the Godot guide.