Phaser exporter

How it works

Packrat writes Phaser's JSON Hash atlas format. Phaser's loader reads the image rectangle, original frame size, trim offset, and frame name, then exposes the result as a texture that can be used by Image, Sprite, or an animation. For multiple atlas pages, Packrat writes the Phaser Multi Atlas form.

API

Phaser consumes the JSON Hash frame records and exposes these calls:

this.load.atlas(
  key: string,
  textureURL: string,
  atlasURL: string,
  textureXhrSettings?: Phaser.Types.Loader.XHRSettingsObject,
  atlasXhrSettings?: Phaser.Types.Loader.XHRSettingsObject): this;
this.load.multiatlas(
  key: string,
  atlasURL: string,
  path?: string,
  baseURL?: string,
  atlasXhrSettings?: Phaser.Types.Loader.XHRSettingsObject): this;
this.add.image(
  x: number,
  y: number,
  key: string,
  frame?: string | number): Phaser.GameObjects.Image;
this.add.sprite(
  x: number,
  y: number,
  key: string,
  frame?: string | number): Phaser.GameObjects.Sprite;
this.anims.create(
  config: Phaser.Types.Animations.AnimationCreate): Phaser.Animations.Animation;
sprite.play(
  key: string | Phaser.Animations.Animation,
  ignoreIfPlaying?: boolean): this;

Use load.atlas for one page and load.multiatlas for a multipack. frame is the exported frame key, such as player_0000; Phaser applies the packed rectangle and trim metadata when it creates the texture.

Integrate

For one atlas page, keep the descriptor and image together and load them in a Phaser scene:

<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,
  pixelArt: true,
  scene: {
    preload() {
      this.load.atlas("atlas", "atlas.png", "atlas.json");
    },
    create() {
      this.add.image(400, 300, "atlas", "player_0000");
    }
  }
});
</script>

For a multi-page export, replace load.atlas with this.load.multiatlas("atlas", "atlas.json", "assets/"). Replace .png in the example path with the image extension selected for the export.