我目前正在编写一个生成 Javascript 和 HTML5 代码的游戏引擎。我正在与 CreateJS 合作来实现这一目标。
我不知道制作具有不同宽度和高度的精灵的精灵表有多有效。我不明白为什么它会效率低下。但是我的程序目前的工作方式是通过将精灵表绘制到所有图像并排的文件中。用户只需导入精灵并为每个精灵使用不同的动画帧为您生成精灵表。
如何将图像加载到具有不同宽度和高度的精灵表中。总是有 1 行和多个列。这是如何实现的？
谢谢
【问题讨论】：
标签： javascript html easeljs
EaselJS SpriteSheet 类支持两种格式。简单版本支持 spritesheet 中所有图像的单一宽度/高度
frames: {width:64, height:64, count:20, regX: 32, regY:64}
复杂版本为每个图像定义矩形
// The 5th value is the image index per the list defined in "images" (defaults to 0).
frames: [
// x, y, width, height, imageIndex, regX, regY
[0,0,64,64,0,32,64],
[64,0,96,64,0]
]
您可以在以下位置阅读有关 SpriteSheet 格式的更多信息 http://createjs.com/Docs/EaselJS/classes/SpriteSheet.html
【讨论】：
固定宽度
当创建只有一行和固定宽度的 spritesheet 时，您通常会有一些变量来表示动画中的帧数。然后你将 spritesheet 的总宽度除以帧的数量，然后得到每个帧的宽度。然后，您可以使用以下内容从 spritesheet 访问特定帧：
frame = frame%frame_amount; //limit the frame to the frames available in the animation
frame_width = spritesheet.width/frame_amount;
ctx.drawImage(spritesheet, frame*frame_width, 0, frame_width, spritesheet.height, target_x, target_y, frame_width, spritesheet.height);
注意：第一帧其实是frame = 0，最后一帧是frame = frame_amount-1
现在，如果您有可变宽度的帧，这显然是行不通的，因为您没有统一的 frame_width 可以乘以。为了弄清楚要做什么，我们需要看看我们对frame*frame_width 的实际操作：我们实际上是在将所有先前帧的宽度相加，以便找出从 spritesheet 中剪辑帧的位置。对于剪切区域的宽度和高度，我们使用相同的frame_width 作为宽度，spritesheet.height 作为高度。
灵活宽度
对于不同宽度的框架，我们真的不需要做任何新的事情，我们对固定宽度做同样的事情。然而，由于具有可变帧宽度/高度的精灵表的更复杂的性质，这些事情变得有点复杂。
首先：“将所有先前帧的宽度相加”：为了将先前帧的所有宽度相加，我们需要知道这些宽度，这意味着我们只需将这些宽度存储在长度为 @987654329 的数组 frame_widths 中@，包含每个特定帧的frame_width。然后我们创建一个函数：
function add_up_array (arr, position) {
var accumulator = 0;
for (var i = 0;i <= position; i++) {
accumulator += arr[i];
}
return accumulator;
}
我们只需将我们的frame_widths 数组和我们当前的frame 传递给这个函数，在我们的固定帧宽度的例子中我们得到了frame*frame_width 的等价物。
第二个：“我们剪辑区域的宽度和高度”：同上，只需跟踪每个单独帧的高度。例如使用数组。使用我们的 2 个数组 frame_widths 和 frame_heights，我们可以执行类似 frame_heights[frame] 的操作来获取相应框架的高度。
在实践中，您将必须想出自己的精灵管理系统，以某种方式将这两个数组与精灵一起保存，可能使用 javascript 类或简单的对象，例如：
animation = {
spritesheet: spritesheet_image,
frame_amount: number_of_frames_in_the_animation,
frame_widths: array,
frame_heights: array
};
【讨论】：