PhaserMetadata export

Sprite Sheet Generator for Phaser 3

Export a JSON atlas Phaser loads with one line, or a plain grid PNG for load.spritesheet. Both paths, no build step, no TexturePacker licence.

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

Format menu

Phaser / PixiJS

JSON atlas (TexturePacker format)

The Phaser export writes a TexturePacker-format JSON atlas: every frame keyed by name with its frame rect, source size, and trim data. Phaser reads it natively through load.atlas, so frame positions never depend on you retyping a grid. If you prefer the grid path, the same PNG also works with load.spritesheet.

Step by step

Getting the sheet into Phaser

  1. 1

    Export the PNG and the JSON

    Export the sheet as PNG, then use Format > Phaser / PixiJS for the atlas JSON. Keep both file name stems the same.

  2. 2

    Load the atlas

    In preload(), call this.load.atlas with the texture key, the PNG path, and the JSON path.

  3. 3

    Build the animation

    Frames are named frame_000, frame_001, and so on. Use generateFrameNames with a zero-padded prefix, or generateFrameNumbers if you loaded the grid instead.

  4. 4

    Turn on pixelArt

    Set pixelArt: true in the game config so the renderer uses nearest-neighbour sampling globally.

JavaScript
// Atlas path (recommended)
function preload() {
  this.load.atlas('hero', 'hero.png', 'hero.json');
}

function create() {
  this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNames('hero', {
      prefix: 'frame_',
      start: 0,
      end: 7,
      zeroPad: 3,
    }),
    frameRate: 12,
    repeat: -1,
  });

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

// Grid path, if you exported the PNG only
this.load.spritesheet('hero', 'hero.png', {
  frameWidth: 32,
  frameHeight: 32,
  spacing: 2, // your gutter
});
Cheat sheet
SettingPhaser value
Atlas loaderthis.load.atlas(key, png, json)
Grid loaderthis.load.spritesheet(key, png, config)
Frame namesframe_000, zeroPad: 3
Gutterspacing in the loader config
Crisp pixelspixelArt: true in the game config
Built for the workflow

TexturePacker-compatible

The same JSON shape Phaser has read for years, so every atlas tutorial and plugin still applies.

Trim data included

Trimmed frames carry spriteSourceSize and sourceSize, so Phaser re-inflates them to their original footprint.

No build step

Two static files next to your other assets. No CLI, no watcher, no licence key.

Grid path too

Prefer load.spritesheet? Export the uniform PNG and pass frameWidth, frameHeight, and spacing.

Phaser FAQ

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

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

Export for Phaser

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

Open the editor All engines