EaselJS Spritesheets from TexturePacker

basically its the format easeljs ask for a spritesheetyou would do the next:

$.getJSON("sprites.json", function(json) {    spriteSheet = new createjs.SpriteSheet(json);});

and create a variable for each frame, in your case:

var load_indicator_01 = new createjs.Sprite(spriteSheet, "load_indicator_01");

to automate i made this snippet:

var spriteSheet;var sprites = {}$.getJSON("sprites.json", function(json) {    spriteSheet = new createjs.SpriteSheet(json);    for(var sprite in json.animations){        sprites[sprite] = new createjs.Sprite(spriteSheet, sprite);    }});

`

TexturePacker is capable of generating a .json file with the correct "animations" object to pass to the EaselJS SpriteSheet constructor. In your example, it would look like this:

"animations": {  "load_indicator": { "frames": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] }},

However, two things need to be true in order for the correct .json information to be auto-generated.

• Your image sequence files must have a hyphen - or underscore _ right before the frame numbering (e.g. "load_indicator_00.png" but not "load_indicator00.png").
• You must have "Auto-detect animations" checked in the TexturePacker settings.

No, it's not a joke. The feature of exporting to EaselJS/CreateJS json format is indeed exist.

You can follow these steps:

1. There is a Data Format switch button (Screenshot Here) in the settings panel.
2. Click the button and select EaselJS / CreateJS in the long list.
3. Next to the Data Format button, set the output file path at JSON file textbox.
4. Publish sprite sheet and you will get it.

My version is TexturePacker 4.0.2 on Windows