Packrat JSON exporter

How it works

Packrat JSON is Packrat's versioned native manifest. It writes one JSON file describing every atlas page, frame, and animation, plus one image file per page. Unlike the compatibility JSON formats, it keeps multipack and animation relationships explicit.

The manifest is atlas.json. A single-page export references one image; a multipack keeps the manifest unnumbered and references numbered images such as atlas_1.<image-extension> and atlas_2.<image-extension>.

API

The manifest has this shape. Values labelled integer, boolean, and string show the required property types:

{
  "format": "packrat",
  "version": 1,
  "pages": [
    { "image": string, "width": integer, "height": integer }
  ],
  "frames": [
    {
      "key": string,
      "name": string,
      "index": integer,
      "page": integer,
      "frame": {
        "x": integer, "y": integer, "width": integer, "height": integer
      },
      "rotated": boolean,
      "source": { "width": integer, "height": integer },
      "offset": { "x": integer, "y": integer },
      "trimmed": boolean
    }
  ],
  "animations": [
    { "name": string, "frames": [string] }
  ]
}

• format identifies this manifest as Packrat; version is currently 1.
• page is a zero-based index into pages. Page image paths are relative to the manifest.
• frame is the packed image rectangle. source is the original logical size, and offset is a top-left trim offset.
• rotated indicates that the packed rectangle must be rotated 90 degrees.
• animations lists frame keys in source animation order. A static frame has a one-item animation list.

Indexed frame keys use zero-based names such as run_side_0000. The manifest uses top-left coordinates for packed rectangles and trim offsets.

Integrate

Load the manifest, select an animation or frame, load the referenced page image, and sample the packed rectangle. Rotate the sample when rotated is true. Use source and offset to place it inside its original logical frame:

const atlas = await fetch("atlas.json").then(response => response.json());
const animation = atlas.animations.find(item => item.name === "run_side");
const frame = atlas.frames.find(item => item.key === animation.frames[0]);
const page = atlas.pages[frame.page];

const image = await loadImage(page.image); // runtime-specific
drawImage(image, frame.frame, frame.source, frame.offset); // runtime-specific

The image-loading and drawing calls are placeholders for your runtime. The manifest uses zero-based page indices and top-left offsets.