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;

我更喜欢制作一个动画精灵类并使用它。它更有趣。这就是它的基本原理。