GUIDE / 02

How to read FRAME JSON hash.

Each key names a frame inside atlas.png. Its rectangle always describes original content, without rotation or trim.

Frame rectangle

frames: {
  frame_01: {
    frame: { x: 3, y: 3, w: 32, h: 28 },
    rotated: false,
    trimmed: false,
    spriteSourceSize: { x: 0, y: 0, w: 32, h: 28 },
    sourceSize: { w: 32, h: 28 }
  }
}

Illustrative Phaser loading

function preload () {
  this.load.atlas('frame', 'atlas.png', 'atlas.json');
}
function create () {
  this.add.image(120, 80, 'frame', 'frame_01');
}

Documentation example; FRAME does not run Phaser or test your scene.

Open FRAME →