Phaser3で状態管理を実装する

630 文字

3 分

Phaser3で状態管理を実装する

2025-04-17

Phaser3

/

状態管理

/

パフォーマンス

/

デバッグ

/

テスト

Phaser 3で状態管理を実装するには、アプリケーションの複雑さや要件に応じて、いくつかの方法があります。以下に一般的なアプローチを説明します。

基本的な状態管理の手法#

1. グローバル変数を利用#

シンプルな状態管理の方法として、ゲーム全体で共有するグローバル変数を利用することができます。
Phaser 3では、this.registry が状態の保存に使用できます。
- this.registry はシーンからアクセス可能で、ゲーム全体で共有されます。

サンプルコード#

1
class MainScene extends Phaser.Scene {
2
  constructor() {
3
    super({ key: 'MainScene' });
4
  }
5

6
  preload() {}
7

8
  create() {
9
    // 状態の初期化
10
    this.registry.set('score', 0);
11
    this.registry.set('playerHealth', 100);
12

13
    // 状態の更新
14
    this.registry.set('score', this.registry.get('score') + 10);
15
    console.log('Current Score:', this.registry.get('score'));
16

17
    // シーン間で状態を引き継ぐ例
18
    this.scene.start('NextScene');
19
  }
20
}

2. イベントエミッターを活用#

状態の変更や通知を管理するために、PhaserのPhaser.Events.EventEmitterを利用できます。
複数のシーン間で状態変更を通知する場合に便利です。

サンプルコード#

1
class GameState extends Phaser.Events.EventEmitter {
2
  constructor() {
3
    super();
4
    this.state = {
5
      score: 0,
6
      playerHealth: 100,
7
    };
8
  }
9

10
  set(key, value) {
11
    this.state[key] = value;
12
    this.emit('stateChanged', this.state);
13
  }
14

15
  get(key) {
16
    return this.state[key];
17
  }
18
}
19

20
const gameState = new GameState();
21

22
class MainScene extends Phaser.Scene {
23
  constructor() {
24
    super({ key: 'MainScene' });
25
  }
26

27
  create() {
28
    gameState.on('stateChanged', (newState) => {
29
      console.log('State Updated:', newState);
30
    });
31

32
    // 状態の更新
33
    gameState.set('score', 10);
34
  }
35
}

3. 外部状態管理ライブラリを導入#

状態管理が複雑になる場合、Redux や MobX などの外部ライブラリを利用するのも選択肢です。
Phaser 3と組み合わせて使う場合、ライブラリの管理部分をゲームロジックやUIに統合します。

サンプルコード（Reduxを利用）#

1
import { createStore } from 'redux';
2

3
// 状態の初期値
4
const initialState = {
5
  score: 0,
6
  playerHealth: 100,
7
};
8

9
// Reducer関数
10
function gameReducer(state = initialState, action) {
11
  switch (action.type) {
12
    case 'INCREMENT_SCORE':
13
      return { ...state, score: state.score + action.payload };
14
    case 'DECREMENT_HEALTH':
15
      return { ...state, playerHealth: state.playerHealth - action.payload };
16
    default:
17
      return state;
18
  }
19
}
20

21
// Reduxストアの作成
22
const store = createStore(gameReducer);
23

24
class MainScene extends Phaser.Scene {
25
  constructor() {
26
    super({ key: 'MainScene' });
27
  }
28

29
  create() {
30
    // ストアの変更を監視
31
    store.subscribe(() => {
32
      console.log('State Updated:', store.getState());
33
    });
34

35
    // ストアの状態を更新
36
    store.dispatch({ , payload: 10 });
37
  }
38
}