Question

我目前正在编写一个生成Javascript和HTML5代码的游戏引擎。我正在使用CreateJS来实现这一目标。

我不知道制作具有不同宽度和高度精灵的spritesheet是多么有效。我不明白为什么效率低下。但是我的程序目前的工作方式是将spritesheet绘制到一个包含所有图像的文件中。用户只需导入精灵，并为每个精灵使用不同的动画帧为你生成精灵片。

如何将图像加载到具有不同宽度和高度的spritesheets中。总共有1行和多个collumns。这是如何实现的？

由于

Answer 1

固定宽度

创建只有一行和固定宽度的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。

灵活宽度

对于具有不同宽度的帧，我们并不需要做任何新的事情，我们对固定宽度执行相同的操作。然而，由于具有可变帧宽/高度的spritesheets的更复杂的性质，这些事情变得有点复杂。

首先：“添加所有先前帧的宽度”：为了将前一帧的所有宽度相加，我们需要知道这些宽度，这意味着我们只需将这些宽度存储在长度为frame_widths的数组中frame_amount，包含每个特定框架的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
};

Answer 2

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中不同的宽度和高度

2 个答案: