2

我正在关注关于精灵的教程：http: //www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ 我现在有一个精灵在工作，但我喜欢精灵有多个动画. 这些动画应该取决于这个精灵应该有的特定状态。

我喜欢做的是在旧的 Apple 游戏空降中创建伞兵。有关示例，请参见http://www.youtube.com/watch?v=pYujWCNUuNw 您会看到那些士兵从直升机上掉了下来。当他们在地上时，他们会闲置一会儿，然后他们开始时不时地走路。

这是我的精灵方法：

function sprite(options) {
var that = {},
frameIndex = 0,
tickCount = 0, ticksPerFrame = options.ticksPerFrame || 0, numberOfFrames = options.numberOfFrames || 1;
that.x = options.x, that.y = options.y,
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;

that.update = function() {
    tickCount += 1;

    if (tickCount > ticksPerFrame) {

        tickCount = 0;

        // If the current frame index is in range
        if (frameIndex < numberOfFrames - 1) {
            // Go to the next frame
            frameIndex += 1;
        } else {
            frameIndex = 0;
        }
    }
};

that.render = function() {
    // Draw the animation
    that.context.drawImage(that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height, that.x,
        that.y,
        that.width / numberOfFrames,
        that.height);
};
return that;
}

我怎样才能让这个精灵拥有那些额外的动画选项？

谢谢

4

1 回答 1

1

您可以使用指向每个区域的偏移值：

var offsets = [0, animation2x, animation3x, ...];

然后，当您使用表示偏移数组索引的整数值更改动画类型时，您可以执行以下操作：

var animation = 1;

hat.context.drawImage(that.image,
    offsets[animation] + frameIndex * that.width / numberOfFrames,
    ....

您可能需要或想要将其他信息添加到偏移量，这也可能是包含帧数、大小等的对象。

一个伪示例可能如下所示：

var offsets = [{offset:0, frames:12, w:100, h:100},
               {offset:1200, frames:7, w: 90, h:100},
               ...];
...

var offset = offsets[animation];

hat.context.drawImage(that.image,
    offset.offset + frameIndex * offset.w / offset.frames,
    ....

if (frameIndex > offset.frames) ...

或者，您只需为每个动画使用不同的图像并使用相同的方法，而是使用指向您要使用的图像的指针来存储对象。

于 2013-10-17T07:48:16.063 回答