Pixelight
  1. Pixelight
  2. Guides
  3. Export a sprite sheet for your game

Export a sprite sheet with JSON

A sprite sheet puts every frame of an animation in one image; a JSON file says where each frame is, how long it shows and which tag it belongs to. Most game engines and frameworks load this layout directly.

Step by step

  1. Open the export. File › Export (Ctrl+Shift+E), then Sprite sheet.
  2. Choose the frames. All of them, one tag, or the current frame; and all visible layers or one layer.
  3. Choose the layout. One row, one column, a grid, or packed tightly (frames placed to waste the least space).
  4. Spacing and extrusion. Spacing leaves empty pixels between frames; extrusion repeats each frame's edge pixels outward, which stops neighbouring frames bleeding in when a game scales or filters the sheet.
  5. Trim and merge. Trim cuts each frame to its drawn pixels (the JSON keeps the original size and offset); merge stores identical frames once.
  6. Export. You get a ZIP with the PNG and the JSON. Scale it up by a whole number if your game draws it at 1:1.

The JSON

Each frame has its rectangle in the sheet (frame), its place in the original (spriteSourceSize, sourceSize) and its duration in milliseconds; meta.frameTags lists the tags with their directions and any data you typed for them.