How to process the generated JSON sprite sheet


#1

We can use a program like node in the command line to manipulate the generated JSON sprite sheet.

For example, we can export our sprite to a sprite sheet using the CLI:

aseprite -b sprite.ase --format json-array --data spritesheet.json --sheet spritesheet.png

This will generate a spritesheet.json like this:

{ "frames": [
   {
    "filename": "sprite 0.ase",
    "frame": { "x": 0, "y": 0, "w": 256, "h": 256 },
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": { "x": 0, "y": 0, "w": 256, "h": 256 },
    "sourceSize": { "w": 256, "h": 256 },
    "duration": 100
   },
   {
    "filename": "sprite 1.ase",
    "frame": { "x": 256, "y": 0, "w": 256, "h": 256 },
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": { "x": 0, "y": 0, "w": 256, "h": 256 },
    "sourceSize": { "w": 256, "h": 256 },
    "duration": 200
   },
   {
    "filename": "sprite 2.ase",
    "frame": { "x": 512, "y": 0, "w": 256, "h": 256 },
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": { "x": 0, "y": 0, "w": 256, "h": 256 },
    "sourceSize": { "w": 256, "h": 256 },
    "duration": 100
   }
 ],
 "meta": {
  "app": "http://www.aseprite.org/",
  "version": "1.2-dev",
  "format": "RGBA8888",
  "size": { "w": 768, "h": 256 },
  "scale": "1"
 }
}

Then we can use node to import the JSON file and print/use/convert the data as we like, for example:

node -e 'var o=require("./sprite.json"); console.log(o.frames[1].frame)’

Will print the bounds of the second frame in the console:

{ x: 0, y: 0, w: 256, h: 256 }