EaselJS Spritesheets from TexturePacker

Question

How do you create proper spritesheet exports for EaselJS from TexturePacker? After exporting I get something like this ...

{
"images": ["textures.png"],
"frames": [
    [818, 44, 42, 42], 
    [818, 1, 42, 42], 
    [775, 87, 42, 42], 
    [775, 44, 42, 42], 
    [775, 1, 42, 42], 
    [732, 87, 42, 42], 
    [732, 44, 42, 42], 
    [732, 1, 42, 42], 
    [689, 87, 42, 42], 
    [689, 44, 42, 42]
],
"animations": {
        "load_indicator_01":[0], 
        "load_indicator_02":[1], 
        "load_indicator_03":[2], 
        "load_indicator_04":[3], 
        "load_indicator_05":[4], 
        "load_indicator_06":[5], 
        "load_indicator_07":[6], 
        "load_indicator_08":[7], 
        "load_indicator_09":[8], 
        "load_indicator_10":[9]
},
"texturepacker": [
        "SmartUpdateHash: $TexturePacker:SmartUpdate:9148c4d9cc1b277627212fb0bffcda4d:fabda013c371507b8fb93d52f15735a0:205920eec6ac5ad8b6794732cd49ae1d$",
        "Created with TexturePacker (http://www.texturepacker.com) for EaselJS"
]
}

Every frame is defined as an animation which is pointless. Is this exporter just a joke or how can I export for EaselJS properly? Any trick involved?

Felipe Méndez · Answer 1 · 2015-04-15T23:21:55.647

basically its the format easeljs ask for a spritesheet you 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);
    }
});

`

score 1 · Answer 2 · answered Aug 03 '17 at 17:09

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.

score 0 · Answer 3 · answered Mar 07 '16 at 18:41

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

You can follow these steps:

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

My version is TexturePacker 4.0.2 on Windows

EaselJS Spritesheets from TexturePacker

3 Answers3