JavaScript»ゲーム制作»requestAnimationFrameゲームループ フレームレート(FPS)を設定する
ファイル名: js-game/quest_00719.html
下のプログラムは、requestAnimationFrameのたびではなく、自分できめたフレームレートで
ソースコード
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const image = new Image();
image.src = "hone.png";
image.addEventListener("load", () => {
// フレームレート
// FPS(Frame Per Second) という単位でかぞえる
// = 1秒あたりのフレーム数
// = 1秒あたり何回画面を描きなおすか
const FPS = 20;
// FPSから、1フレームあたりの秒数を計算する
const frameTime = 1 / FPS;
let prevTimestamp = 0;
let honeX = 144;
let honeY = 144;
const update = (timestamp) => { // 経過した時間timestampを引数にする関数
// requestAnimationFrameがupdateを呼び出す頻度が
// FPSで指定したフレーム数よりも多い場合は
// 画面の描きなおしをせずに次のrequestAnimationFrameを実行する
const elapsed = (timestamp - prevTimestamp) / 1000;
if (elapsed <= frameTime) {
requestAnimationFrame(update);
return;
}
prevTimestamp = timestamp;
honeX += Math.floor(Math.random() * 3) - 1;
honeY += Math.floor(Math.random() * 3) - 1;
context.clearRect(0, 0, 320, 320);
context.drawImage(image, 0, 0, 32, 32, honeX, honeY, 32, 32);
requestAnimationFrame(update);
};
update();
});
解説
アニメーションは、画面を連続して表示することで動いているように見せます。1秒あたり何回画面を描きなおすかをフレームレートといいます。画面を描きなおす速さが速いほど(=fpsの値が高いほど)なめらかな動きに見えます。
しかし処理速度の問題などにより、つねに高いフレームレートを保てるとはかぎりません。自分でフレームレートをきめることで、画面の描き替え速度を安定させる効果も期待できます。