HTML5 requestanimationframe

Question

所以我用requestAnimationFrame写了一个基本的游戏。它会重绘画布并侦听键盘输入并相应地以像素/秒为单位移动播放器。我的问题是，给定一个包含9帧的精灵表，如何在玩家行走时创建此动画？基本上如果（步行）{以给定的速率循环这九个帧}。我理解游戏循环是如何工作的，而不是如何为精灵表制作动画。

Answer 1

动画本身有图书馆，但你自己很容易。

您需要使用drawImage：

ctx.drawImage(image, sx, sy, sw, sh);

假设精灵表是横向格式：

var frame = 0;
ctx.drawImage(image, startX+(spriteWidth*frame), startYy, spriteWidth, spriteHeight);

只需按照您想要逐步完成动画的刻度或秒数来更新帧。这可以采用评论中建议的任何方式。

模数函数将frame保持在边界内：

frame = frame % numberOfFrames;

我更喜欢制作一个动画精灵类并使用它。这更有趣。这是它如何工作的基础知识。希望有所帮助。