基本のクラスと関連はこのようになる。
エントリーポイントは以下のような単純なループ開始コードで記述できる。
import { Game } from "./Game.js";
// Main
(function () {
const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const game = new Game(canvas);
game.startLoop();
})();
ゲームループという1つの無限ループが実質的なmainとして機能する
ゲームループは以下の手順を無限に繰り返す。
-
入力を受取って他のオブジェクトに入力を渡す(渡されたオブジェクトが入力を処理して「ベクトルの方向」を決定する)
-
入力を渡して「ベクトルの方向」が変化したオブジェクトそれぞれのupdate(deltaTime: double)を呼び、経過時間に応じた変化を行わせる(オブジェクトのフィールドを更新させる)
-
レンダリングを行う
ここで重要なのはupdate()をループの終わりからループ開始までの経過時間deltaTimeの関数としておくことである。経過時間の関数として記述することでフレームレートによらず画面を更新することが可能となる。
ゲームループはシーンを管理し、シーンが各ゲームオブジェクトを管理、更新を行う。
シーンはゲームループと同様のロジックをもち、ゲームループから呼ばれることで無限ループをつくる。
各ゲームオブジェクトはコンポーネントを追加、削除、更新する関数を基本とし、コンポーネントを通して状態を管理、更新する
コンポーネントは「ベクトルの方向」などを管理し、入力に応じて方向を更新し、経過時間に応じて状態を変化させることができるようにする。
ポイント: ニュートン物理と同様に初期条件と経過時間がわかれば状態が定まるという考え方を基本として構築していく。
初期条件を入力で決定し、経過時間と初期条件を使って状態が更新されるというロジックがすべての基礎となる。