Phaser exporter

Output

Packrat writes the standard Phaser JSON Hash descriptor and one image per atlas page:

text

atlas.json
atlas.png

Integrate

Use Phaser's normal this.load.atlas loader, then create sprites or animations using the exported frame names. Keep the JSON descriptor and image in the paths supplied to the loader.

The JSON includes frame rectangles, original frame size, trim offset, and animation indices. Use those fields through Phaser's atlas loader rather than manually rebuilding frame geometry.

Minimal browser program

Replace player_0001 with a frame name that exists in your atlas.

html

<!doctype html>
<script src="https://cdn.jsdelivr.net/npm/phaser@3.90.0/dist/phaser.js"></script>
<script>
new Phaser.Game({
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload() {
      this.load.atlas("atlas", "atlas.png", "atlas.json");
    },
    create() {
      this.add.image(400, 300, "atlas", "player_0001");
    }
  }
});
</script>

Keep atlas.json and atlas.png at the paths supplied to the loader.

Phaser exporter ​

Output ​

Integrate ​

Minimal browser program ​

Phaser exporter

Output

Integrate

Minimal browser program