Geek asks and answers

TexturePacker EaselJS Smartphones

How do you create the correct spritesheet export 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"
]
}

Each frame is defined as an animation that is meaningless. Is this exporter just a joke or how can I export correctly for EaselJS? Any trick?

+3
source share
3 answers

basically its easeljs format asks for spritesheet you would do the following:

$.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");

for automation, 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);
    }
});

`

+1
source

TexturePacker .json "", EaselJS SpriteSheet. :

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

, , .json .

  • _ (, "load_indicator_00.png", "load_indicator00.png" ).
  • TexturePacker " ".
+1

, . EaselJS/CreateJS json .

:

  • ( ).
  • EaselJS/CreateJS .
  • Next to the "Data Format" button, set the path to the output file in the JSON text box .
  • Publish a sprite sheet and you will get it.

My version of TexturePacker 4.0.2 for Windows

0
source

More articles:


All Articles