[Phaser3]Sceneを詳しく解説

Phaser3のSceneクラスとは

Sceneクラスは、Phaser3のゲーム開発において最も重要なコンポーネントの1つです。ゲームの各画面（タイトル画面、メインゲーム画面、ゲームオーバー画面など）を管理するために使用されます。

Sceneクラスの基本構造

class GameScene extends Phaser.Scene {
    constructor() {
        super({ key: 'GameScene' });
    }

    preload() {
        // アセットのロード
    }

    create() {
        // シーンの初期化
    }

    update() {
        // 毎フレーム実行される処理
    }
}

主要なメソッド

• constructor(): シーンの作成時に実行される。シーンのキーを設定します。
• preload(): ゲームで使用する画像、音声などのアセットをロードします。
• create(): シーンの初期化時に一度だけ実行されます。ゲームオブジェクトの配置や初期設定を行います。
• update(): ゲームループ内で毎フレーム実行されます。ゲームの状態更新やプレイヤーの入力処理などを行います。

シーンの遷移方法

// 新しいシーンを開始
this.scene.start('NextScene');

// 現在のシーンを一時停止して新しいシーンを開始
this.scene.launch('PauseScene');

// シーンを再開
this.scene.resume('GameScene');

// シーンを停止
this.scene.pause('GameScene');

データの受け渡し

シーン間でデータを渡す場合は、startメソッドの第二引数にデータを指定します：

// データを渡す側
this.scene.start('NextScene', { score: 100 });

// データを受け取る側
create(data) {
    console.log('Score:', data.score);
}

シーンの並行実行

Phaser3では複数のシーンを同時に実行することができます。これは、UIオーバーレイやポーズメニューなどの実装に便利です。

// UIシーンを現在のシーンの上に重ねて表示
this.scene.launch('UIScene');

実装例

class TitleScene extends Phaser.Scene {
    constructor() {
        super({ key: 'TitleScene' });
    }

    create() {
        // タイトル画面の作成
        const title = this.add.text(400, 200, 'My Game', {
            fontSize: '64px',
            fill: '#fff'
        });
        title.setOrigin(0.5);

        // スタートボタンの作成
        const startButton = this.add.text(400, 300, 'Start Game', {
            fontSize: '32px',
            fill: '#fff'
        });
        startButton.setOrigin(0.5);
        startButton.setInteractive();

        // クリックでゲーム画面へ
        startButton.on('pointerdown', () => {
            this.scene.start('GameScene');
        });
    }
}

注意点

• シーンのキーは一意である必要があります
• preloadメソッドでのアセットロードは、そのシーンでのみ有効です
• 重いリソースは適切なタイミングでロードする必要があります
• シーンの遷移時にはメモリリークに注意が必要です

まとめ

Sceneクラスは、Phaser3でゲームを構築する上で基本となる重要な要素です。適切なシーン設計により、ゲームの状態管理や画面遷移を効率的に実装することができます。