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

Question

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

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

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

谁能提供一个如何实现这一目标的例子？

Answer 1

这是您的 json 文件的示例：

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

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

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

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

不要使用播放方法，因为在您的情况下它不是动画。只需为第一帧调用 gotoAndStop(0)，为第二帧调用 gotoAndStop(1)。

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