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

How to import multiple images as one sprite in Createjs EaselJS?

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

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

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

任何人都可以提供一个如何实现这个的例子吗?

这是您的 json 文件的示例:

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

'frames' 中的每一项都描述了您恶意图像中的一帧。每帧有 4 个值。前 2 个代表帧在精灵中的位置。 [0, 0] left-upper 帧 #1 的角和帧 #2 的 [140, 0]。其他 2 个值描述了帧大小(在我的例子中是 120x200 和 350x400)。

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

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

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

现在将您的角色添加到舞台上。