如何在Createjs EaselJS中将多个图像作为一个精灵导入？

Question

我必须将多个图像合并为一个精灵图像。这些图像不是某些动画的一部分，它只是不同的静态图像。

我需要在Createjs / EaselJS中以某种方式加载它们，但我不知道spriteesheet数据的json模板。

所有搜索结果都指向如何制作精灵动画，但我不需要动画，只需要id的静态图像。

有人能举例说明如何实现这个目标吗？

Answer 1

以下是json文件的示例：

{
    "frames": [
        [0, 0, 120, 200],
        [140, 0, 350, 400]]
}

'frames'中的每个项目都描述了你的恶意图像中的一个帧。每帧有4个值。前2代表精灵中框架的位置。 [0,0]帧＃1的左上角和帧＃2的[140,0]。其他2个值描述帧大小（在我的情况下为120x200和350x400）。

将此json和您的图像加载到EaselJS中，然后将其实例化为Sprite。像这样：

var ssheet = new createjs.SpriteSheet(ss);  
var sprite = new createjs.Sprite(ssheet);

请勿使用play方法，因为它不是动画。只需为第一帧调用gotoAndStop（0），为第二帧调用gotoAndStop（1）。

现在将你的精灵添加到舞台上。