如果 CreateJS 库支持 Texture Packer 的 JSON 输出格式
If the CreateJS library supports the JSON output formats of Texture Packer
我使用 CreateJS 已经有一段时间了。我在加载由 Texture Packer 制作的图像时遇到了问题,我得到了这样的 JSON 文件:
{"frames": [
{
"filename": "aim_dot",
"frame": {"x":118,"y":4,"w":76,"h":76},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":76,"h":76},
"sourceSize": {"w":76,"h":76}
},
{
"filename": "boundary",
"frame": {"x":4,"y":385,"w":250,"h":100},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":250,"h":100},
"sourceSize": {"w":250,"h":100}
}]
}
当位图代表这样的图像时:
var bitmap = new createjs.Bitmap("imagePath.jpg");
但是如果图像是图像精灵,我可以使用像 css 精灵这样的位图吗?
你应该看看 SpriteSheet
-Class: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html
在 TexturePacker 中,您可以选择 EaselJS 作为输出格式,因此 JSON 无需进一步修改即可用于 EaselJS SpriteSheet
。另一种生成 EaselJS SpriteSheets 的好方法是 spritesheet.js (https://www.npmjs.com/package/spritesheet-js-monkiki-fork).
我使用 CreateJS 已经有一段时间了。我在加载由 Texture Packer 制作的图像时遇到了问题,我得到了这样的 JSON 文件:
{"frames": [
{
"filename": "aim_dot",
"frame": {"x":118,"y":4,"w":76,"h":76},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":76,"h":76},
"sourceSize": {"w":76,"h":76}
},
{
"filename": "boundary",
"frame": {"x":4,"y":385,"w":250,"h":100},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":250,"h":100},
"sourceSize": {"w":250,"h":100}
}]
}
当位图代表这样的图像时:
var bitmap = new createjs.Bitmap("imagePath.jpg");
但是如果图像是图像精灵,我可以使用像 css 精灵这样的位图吗?
你应该看看 SpriteSheet
-Class: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html
在 TexturePacker 中,您可以选择 EaselJS 作为输出格式,因此 JSON 无需进一步修改即可用于 EaselJS SpriteSheet
。另一种生成 EaselJS SpriteSheets 的好方法是 spritesheet.js (https://www.npmjs.com/package/spritesheet-js-monkiki-fork).