来自TexturePacker的EaselJS Spritesheets

Question

如何从TexturePacker为EaselJS创建正确的精灵表导出？在导出之后，我得到了类似这样的东西...

{
"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"
]
}

每一帧都被定义为一个没有意义的动画。这个导出器只是一个笑话，或者我如何正确地为EaselJS导出？有什么花招吗？

Answer 1

基本上，它的格式easeljs要求一个spritesheet，你会做下一步：

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

并为每个帧创建一个变量，在您的示例中：

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

为了实现自动化，我制作了以下代码片段：

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

`

Answer 2

TexturePacker能够生成包含要传递给EaselJS SpriteSheet构造函数的正确“动画”对象的.json文件。在您的示例中，它将如下所示：

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

但是，为了自动生成正确的.json信息，需要满足两个条件。

自动检测动画您的图像序列文件必须在帧编号前有一个连字符或下划线_(例如，"load_indicator_00.png“而不是"load_indicator00.png").

• You必须在TexturePacker设置中选中”-
• “。

Answer 3

导出为EaselJS/CreateJS json格式的功能确实存在。

您可以按照以下步骤操作：

1. 在设置面板中有一个Data Format switch按钮(Screenshot Here)。
2. 单击该按钮，然后在长列表中选择EaselJS / CreateJS。<代码>H29<代码>H110在数据格式按钮旁边，将输出文件路径设置为JSON file sprite sheet，您将获得该文件。

我的版本是Windows上的TexturePacker 4.0.2