如何在 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)。
现在将您的角色添加到舞台上。
我必须将多个图像合并为一个精灵图像。这些图像不是某些动画的一部分,只是不同的静态图像。
我需要以某种方式在 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)。
现在将您的角色添加到舞台上。