CODEWITHSUNDEEP
jsoneaseljscreatejssprite-sheettexturepacker
BadmintonCat
BadmintonCat

Reputation: 9586

EaselJS Spritesheets from TexturePacker

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?

Upvotes: 3

Views: 2594

Answers (3)

fuzzy marmot
fuzzy marmot

Reputation: 413

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.

Upvotes: 1

Jarvis Niu
Jarvis Niu

Reputation: 11

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

Upvotes: 0

Felipe Méndez
Felipe Méndez

Reputation: 21

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);
    }
});

`

Upvotes: 1

Related Questions