来自 TexturePacker 的 EaselJS Spritesheets答案

【问题标题】：EaselJS Spritesheets from TexturePacker来自 TexturePacker 的 EaselJS Spritesheets
【发布时间】：2014-03-13 17:45:28
【问题描述】：

如何从 TexturePacker 为 EaselJS 创建正确的 spritesheet 导出？导出后我得到这样的东西......

{
"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 出口？有什么技巧吗？

【问题讨论】：

标签： json easeljs createjs sprite-sheet texturepacker

【解决方案1】：

基本上它的格式画架要求spritesheet 你会做下一个：

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

并为每个帧创建一个变量，在您的情况下：

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

为了自动化我做了这个 sn-p:

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

【讨论】：

【解决方案2】：

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 设置中选中“自动检测动画”。

【讨论】：

【解决方案3】：

不，这不是玩笑。导出为EaselJS/CreateJS json格式的特性确实存在。

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

设置面板中有一个数据格式切换按钮（Screenshot Here）。
点击按钮，在长长的列表中选择EaselJS / CreateJS。
在“数据格式”按钮旁边，将输出文件路径设置为 JSON 文件 文本框。
发布精灵表，你会得到它。

我的版本是 Windows 上的 TexturePacker 4.0.2

【讨论】：