javascript - HTML5 リクエストアニメーション フレーム

Question

requestAnimationFrame を使用して基本的なゲームを作成しました。キャンバスを再描画し、キーボード入力をリッスンし、それに応じてプレーヤーをピクセル/秒で移動します。私の質問は、9 フレームを含むスプライト シートがある場合、プレイヤーが歩いているときにこのアニメーションを作成するにはどうすればよいですか? 基本的に if(walking){ 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;

私は、アニメーション化されたスプライト クラスを作成して使用することを好みます。もっと楽しいです。それが仕組みの基本です。それが役立つことを願っています。