Packrat JSON

Packrat JSON writes one atlas.json file listing every page, frame, and animation. When the atlas has several pages, the images use numbered filenames and the JSON filename stays the same.

{
  "format": "packrat", "version": 1,
  "pages": [{ "image": "atlas.png", "width": 512, "height": 512 }],
  "frames": [{
    "key": "player_0000", "name": "player", "index": 0, "page": 0,
    "frame": { "x": 128, "y": 64, "width": 40, "height": 48 },
    "rotated": false,
    "source": { "width": 64, "height": 64 },
    "offset": { "x": 12, "y": 8 }, "trimmed": true
  }],
  "animations": [{ "name": "player", "frames": ["player_0000"] }]
}

page indexes the pages array, starting at 0. Image paths are relative to the JSON file. Frame rectangles and trim offsets are measured from the top-left. Each animation lists its frame keys in playback order. Static frames have lists containing one key.

const atlas = await fetch("atlas.json").then(r => r.json());
const frame = atlas.frames.find(f => f.key === "player_0000");
const page = atlas.pages[frame.page];
// Load page.image; sample frame.frame; place at frame.offset within frame.source.

See Sources and outputs for frame names, trimming, and effect maps.