来自 TexturePacker 的 EaselJS Spritesheets
Posted
技术标签:
【中文标题】来自 TexturePacker 的 EaselJS Spritesheets【英文标题】:EaselJS Spritesheets from TexturePacker 【发布时间】: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 出口?有什么技巧吗?
【问题讨论】:
【参考方案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
【讨论】:
以上是关于来自 TexturePacker 的 EaselJS Spritesheets的主要内容,如果未能解决你的问题,请参考以下文章
How to get a TexturePacker license Key 怎样获得免费的 TexturePacker license Key