javascript - HTML5 请求动画框架

Question

所以我用 requestAnimationFrame 写了一个基本的游戏。它重绘画布并监听键盘输入并相应地以像素/秒移动播放器。我的问题是，给定一个包含 9 帧的精灵表，我如何在玩家行走时创建这个动画？基本上 if(walking){ 以给定的速率循环遍历这九帧}。我了解游戏循环是如何工作的，而不是如何为精灵表设置动画。

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;

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