JSON Array exporter

How it works

Packrat writes one TexturePacker-compatible JSON Array descriptor and one image file per atlas page. A single-page export is atlas.json plus its image; a multipack uses numbered pairs such as atlas_1.json and its image. The descriptor stores each frame as an object in a frames array with its exported name, packed rectangle, original size, and trim offset.

API

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

{
  "frames": [
    {
      "filename": string,
      "frame": { "x": integer, "y": integer, "w": integer, "h": integer },
      "rotated": boolean,
      "trimmed": boolean,
      "spriteSourceSize": {
        "x": integer, "y": integer, "w": integer, "h": integer
      },
      "sourceSize": { "w": integer, "h": integer }
    }
  ],
  "meta": {
    "app": string,
    "version": string,
    "image": string,
    "format": string,
    "size": { "w": integer, "h": integer },
    "scale": string
  }
}

• frames preserves exported frame order. Indexed source frames use zero-based names such as player_0000 in filename.
• frame is the packed image rectangle; spriteSourceSize is its top-left position and size inside the original frame.
• rotated is true when the packed rectangle is rotated 90 degrees.
• trimmed indicates whether transparent edges were removed.
• sourceSize is the original logical frame size.
• meta.image is the image path relative to the descriptor.

The JSON Array format does not contain animation arrays. Group indexed frame names by their base name and sort their numeric suffixes in your runtime.

atlas.json       atlas.<image-extension>

Example output

The numeric coordinates below are illustrative. A one-frame JSON Array export has this shape:

{
  "frames": [
    {
      "filename": "player_0000",
      "frame": { "x": 128, "y": 64, "w": 40, "h": 48 },
      "rotated": false,
      "trimmed": true,
      "spriteSourceSize": { "x": 12, "y": 8, "w": 40, "h": 48 },
      "sourceSize": { "w": 64, "h": 64 }
    }
  ],
  "meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "atlas.png",
    "format": "RGBA8888",
    "size": { "w": 512, "h": 512 },
    "scale": "1"
  }
}

Integrate

Parse frames and index records by filename or by your own asset catalog. Sample frame from meta.image, rotate the sample when rotated is true, then place the result using spriteSourceSize inside sourceSize. Keep the page image beside the descriptor or preserve the relative path in meta.image.