Spritesheets with TexturePacker JSON

Export animated effects as a spritesheet with TexturePacker JSON, hash or array, with trimmed and packed frames that Phaser, PixiJS, Cocos and most web engines load directly.

Updated

TexturePacker JSON is the most widely read atlas format on the web: Phaser, PixiJS, Cocos Creator and many other engines load it directly. ParticleFX Studio writes it for every effect, so you do not need TexturePacker itself to make the atlas.

Export it

  1. Open an effect in the studio, press Export and choose Spritesheet.
  2. Set Engine data to Phaser / PixiJS (TexturePacker hash), or TexturePacker array if your loader wants a list.
  3. Pick a Layout: Grid, Row, Column, or Packed, which trims each frame to its content and packs the pieces tightly.
  4. Optional: Padding between cells, Power of two sheet size, and Merge duplicates, which stores identical frames once.
  5. Export. You get name.png and name.json.

What is in the JSON

  • frames: one entry per frame named name_0000.png, name_0001.png and so on, with its rectangle in the sheet. In the hash format it is an object keyed by name; in the array format a list with a filename on each.
  • spriteSourceSize and sourceSize: where a trimmed frame sits in the full frame, so packed frames still line up when they play.
  • duration: milliseconds per frame from your export frame rate.
  • animations: the frame list under the effect's name, which PixiJS turns into an AnimatedSprite directly.
  • meta: the image file name, size and format.

Loading code for both engines is on the Phaser and PixiJS page.

Engine data, including TexturePacker JSON, comes with any plan, from $7.99 a month. A free account exports the same sheet as an image only, which Phaser loads with load.spritesheet and a frame size.

Questions

Hash or array: which should I pick?

Phaser and PixiJS read both. Pick hash unless your loader or tool asks for an array.

Do packed frames still animate in place?

Yes. Each trimmed frame records its offset in spriteSourceSize, so the engine draws it where it was in the full frame.

More guides