状態管理統合（State Management）アニメーションを「構造」にする

ここまでで、私たちはこういうものを作ってきました。

• requestAnimationFrame でループを回す
• deltaTime で時間を扱う
• Fixed Time Step で update を安定させる

でも、まだ1つ問題があります。

1.問題：処理が全部1つの中にある

例えばこんなコードになっていませんか？

function loop(time) {
  updatePlayer();
  updateEnemy();
  checkCollision();
  renderPlayer();
  renderEnemy();
  renderUI();
}

動きます。
でも、だんだん増えていきます。

• ステージ追加
• タイトル画面追加
• ゲームオーバー画面追加
• メニュー追加

するとどうなるでしょう？

👉 全部が1つのループに混ざります。

これが「状態管理がない設計」です。

2.状態（State）とは？

状態とは、
今なにをしているか です。

例：

• タイトル画面
• プレイ中
• ポーズ中
• ゲームオーバー

この「今のモード」を分けるのが状態管理です。

3.なぜ状態管理が必要？

理由は3つあります。

① コードが整理される

タイトル用の処理はタイトルだけに書けます。

② バグが減る

プレイ中にタイトルUIが動く、みたいな事故が起きません。

③ 拡張が楽

状態を1つ増やすだけで機能追加できます。

4.基本構造

一番シンプルな形はこれです。

class Game {
  constructor() {
    this.state = new TitleState(this);
  }

  changeState(newState) {
    this.state = newState;
  }

  update(dt) {
    this.state.update(dt);
  }

  render() {
    this.state.render();
  }
}

ポイントはここです。

this.state.update(dt);
this.state.render();

👉 今の状態に「処理を丸投げ」しているだけ。

Gameは「管理者」になります。

5.Stateクラスの例

class TitleState {
  constructor(game) {
    this.game = game;
  }

  update(dt) {
    // 何かキーが押されたら
    if (startPressed) {
      this.game.changeState(new PlayState(this.game));
    }
  }

  render() {
    drawTitleScreen();
  }
}

PlayStateも同じ形で作れます。

6.ここまでの流れ整理

ここで初めて
設計らしくなってきます。

7.状態管理＋Fixed Time Step

組み合わせるとこうなります。

function loop(time) {
  accumulator += delta;

  while (accumulator >= fixedDelta) {
    game.update(fixedDelta);
    accumulator -= fixedDelta;
  }

  game.render();
}

updateの中身は State が担当します。

つまり：

loop
 └─ game.update()
      └─ state.update()

責任が分離されました。

これが「統合」です

• 時間制御（Fixed Time Step）
• ループ設計
• 状態管理

全部がつながりました。

ここまで来ると、

👉 小さなゲームエンジンの原型です。

8.実験：状態が切り替わると世界が変わる

実験内容

• 画面をクリックすると状態が切り替わる
• タイトル状態 → プレイ状態
• プレイ状態 → タイトル状態

背景色とテキストだけ変えます。

👀 観察ポイント

1. updateは変えていないのに世界が変わる
2. Gameは「管理」しかしていない
3. Stateが世界を作っている

9.今日のまとめ

状態管理とは、

「今の世界を切り替える仕組み」

です。

そしてこれがあることで、

• 拡張できる
• 混ざらない
• 設計になる

10.次回：#11 Interpolation

Fixed Time Stepを使うと
実は1つ問題が出ます。

👉 動きがカクつくことがあります。

それを滑らかにするのが
Interpolation（補間） です。

いよいよ時間制御の完成形へ進みます。

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap