Skip to content

JSON Hash exporter ​

How it works ​

Packrat writes one TexturePacker-compatible JSON Hash 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's packed rectangle, original size, trim offset, and exported name.

API ​

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

text
{
  "frames": {
    "<frame-key>": {
      "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 is an object keyed by the exported frame name. Indexed source frames use zero-based names such as player_0000.
  • 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 Hash format does not contain animation arrays. Group indexed frame names by their base name and sort their numeric suffixes in your runtime.

text
atlas.json       atlas.<image-extension>

Example output ​

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

json
{
  "frames": {
    "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 ​

Use this as a generic interchange format or as input to a runtime that accepts the JSON Hash schema. Sample frame from meta.image, rotate the sample when rotated is true, then place it using spriteSourceSize inside sourceSize. Keep the page image beside the descriptor or preserve the relative path in meta.image.

Packrat documentation