状態の変化と描画を分離する
次のビジュアル更新には requestAnimationFrame を使用し、そのタイムスタンプを小さなループ コーディネーターに渡します。経過時間からポジション、タイマー、ルールを更新します。更新後の現在の状態を描画します。レンダラーは衝突が起こったかどうかを判断すべきではなく、衝突チェックはスプライトがたまたまペイントされたかどうかに依存すべきではありません。
小規模なプラットフォーム テストの場合は、選択したワールド単位/秒数でマーカーを水平に移動します。 60 Hz ディスプレイと高リフレッシュ ディスプレイで同じルートを実行します。マーカーが 1 つの画面上で同じ壁時計間隔内でさらに遠くに移動した場合でも、一定の移動は単位時間ごとではなくコールバックごとに適用されます。
遅延フレームの回復ポリシーを選択する
長い停止の後には、非常に大きな経過時間が生じることがあります。気軽に遊ぶリアルタイムゲームでは経過時間に上限を設け、復帰したプレイヤーがキャラクターが複数の障害物を一気に通り抜けるのを見ずに済むようにします。決定論的なシミュレーションでは、アキュムレーターを使った固定更新ステップを採用し、追いつき処理の回数に上限を設けます。補間が役立つ場合は、シミュレーション状態の間を描画します。
再現できる障害物コースで、コールバックの間隔が最も長くなった時間を記録します。その後、別の画面に切り替えて戻り、ゲームの状態を確認します。ゲームを一時停止するのか、少しだけ時間を進めるのか、直前の状態から再開するのかを決めます。遅れて届いた1回のフレームに任せず、その方針を明示してください。
ブラウザゲームループについての質問
描画にはsetIntervalを使用する必要がありますか?
requestAnimationFrame は再描画の近くにスケジュールされ、通常は非表示のドキュメントのために一時停止されるため、視覚的な作業には requestAnimationFrame を使用します。タイマーは非視覚的なタスクをスケジュールすることもできますが、表示時計として扱うべきではありません。
フレームのタイムスタンプはどこから来るのでしょうか?
requestAnimationFrame のコールバックは高分解能のタイムスタンプを渡します。MDNはタイミングと一度だけ呼び出される性質を説明しています。コールバック数を数えるのではなく、このタイムスタンプから進行量を計算します。
関連情報
古い情報を見つけましたか？ 訂正を連絡