JavaScript+requestAnimationFrameでゲームループを作る

requestAnimationFrameとFPSの制御

ゲームプログラミングではゲームループ構造を作り、ループの中で画面の更新処理を実装する。更新処理を担当するゲームループ用関数を用意し、タイマー機能を使い一定間隔で実行し続ける。1秒間に何回更新するかをFPS(フレーム・パー・セコンド)という単位で表す。ゲーム業界では「フレームレート」と呼ばれることが多い。ゲームジャンルを表すFPS(ファーストパーソン・シューティングゲーム)とは別物。

JavaScriptでゲームループを作るには、setInterval、requestAnimationFrameのどちらかを使う場合が多い。setIntervalは更新間隔をミリ秒単位で渡せば、指定したコールバック関数を設定したミリ秒で呼び続けるので手軽。実際、ゲーム制作によく使われる。だが、ゲーム制作ではrequestAnimationFrameが好ましい。

setIntervalは設定した間隔で必ず実行される。requestAnimationFrameはブラウザの画面更新単位で実行される。setIntervalはブラウザの画面更新単位とズレることがあり、アニメーションがカクつきやすい。requestAnimationFrameでも発生するが、setIntervalよりは滑らかで自然な表現になる。

ブラウザはディスプレイのリフレッシュレート等を元に画面更新単位を決めるため、requestAnimationFrameを使うと環境の違いによりFPSが安定しない(とはいっても多くの場合60FPSとなる)。

Window.requestAnimationFrame() – Web API | MDN

リフレッシュレートは、そのディスプレイが1秒間に何回画面更新できるを表す。○Hzで表され、60Hzなら1秒間に60回画面更新可能。

スポンサーリンク

ゲームループのスクリプト部分が以下。

let animID;
let isAnim = 0;
const FPS = 60;
let frame = 0;
let startTime;
let nowTime;

function init() {
	// ①開始時間を保存
	startTime = performance.now();

	mainLoop();
}

function mainLoop() {
	// ②現在時間を取得
	nowTime = performance.now();
	// 経過時間を代入
	let elapsedTime = nowTime - startTime;
	// ③描画処理する理想時間をidealTimeに代入
	let idealTime = frame * (1000 / FPS);
	// ④経過時間が1フレーム分のミリ秒以上なら実行
	if (idealTime < elapsedTime) {
		// この中に更新処理を描く
		
		// HTML側にあるpタグのテキストを変更
		document.getElementById('frame_counter').innerText = frame;
		frame++;

		// ⑤経過時間が1秒を超えたらリセット
		if (elapsedTime >= 1000) {
			startTime = nowTime;
			frame = 0;
		}
	}

	animID = requestAnimationFrame(mainLoop);
}
	
function onClick() {
	if (!isAnim) {
		init();
	} else {
		cancelAnimationFrame(animID);
	}
	isAnim = 1 - isAnim;
}

まず、初期化用のinit()で①最初の時間を取得。mainLoop()内では、②現在時間を取得し、現在時間から1つ前の時間を引いて経過時間を取得。

次に、③現在のフレームに、1フレームにかかるミリ秒をかける。計算結果が次の描画を行う理想時間となる。

理想時間(ms) = 現在のフレーム × (1000 / FPS)

④経過時間が理想時間を過ぎていれば更新処理を行う。更新処理を行ったら1フレーム増やす。例えば、60FPSの場合、開始から500ミリ秒経過した時点で30フレーム表示しているのが理想(30 * (1000 / 60) = 500ms)。経過時間が500ミリ秒を超えていれば31回目の更新を行い、未満であれば行わない。

⑤経過時間が1秒を超えたら、次の1秒間を計算するためにstartTimeをnowTimeでリセットし、フレーム数も0にリセット。

以下がサンプルスクリプト。

実行と開始ボタンをクリックで消費フレーム数が延々表示される。もう一度クリックすると停止。

コード全文。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>requestAnimationFrameを使ったゲームループを実装</title>
  </head>
  <script type="text/javascript">
  let animID;
  let isAnim = 0;
  const FPS = 60;
  let frame = 0;
  let startTime;
  let nowTime;

  function init() {
    // ①開始時間を保存
    startTime = performance.now();

    mainLoop();
  }

  function mainLoop() {
    // ②現在時間を取得
    nowTime = performance.now();
    // 経過時間を代入
    let elapsedTime = nowTime - startTime;
    // ③描画処理する理想時間をidealTimeに代入
    let idealTime = frame * (1000 / FPS);
    // ④経過時間が1フレーム分のミリ秒以上なら実行
    if (idealTime < elapsedTime) {
      document.getElementById('frame_counter').innerText = frame;
      frame++;

      // ⑤経過時間が1秒を超えたらリセット
      if (elapsedTime >= 1000) {
        startTime = nowTime;
        frame = 0;
      }
    }

  animID = requestAnimationFrame(mainLoop);
  }

  function onClick() {
    if (!isAnim) {
      init();
    } else {
      cancelAnimationFrame(animID);
    }
    isAnim = 1 - isAnim;
  }
  </script>

  <body>
    <p id="frame_counter"></p>

    <input type="button" value="実行と停止" onclick="onClick();"/>
  </body>
</html>

コメント

タイトルとURLをコピーしました