Fade (フェード)

画面を徐々に特定の色（デフォルトは黒）で塗りつぶします。シーン遷移時によく使われます。

動作デモ

コードスニペット

1. メソッド (Method)

/**
 * カメラをフェードアウトさせる
 * @param duration 持続時間(ms)
 * @param r 赤 (0-255)
 * @param g 緑 (0-255)
 * @param b 青 (0-255)
 * @param callback 完了時のコールバック(省略可)
 */
public fadeCamera(duration: number = 1000, r: number = 0, g: number = 0, b: number = 0, callback?: (camera: Phaser.Cameras.Scene2D.Camera, progress: number) => void) {
    this.cameras.main.fadeOut(duration, r, g, b, callback);
}

2. 使い方 (Usage)

create() {
    this.fadeCamera(1000, 0, 0, 0, (camera, progress) => {
        if (progress === 1) {
            // フェードアウト完了後にフェードイン
            camera.fadeIn(500);
        }
    });
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

    create() {
        this.add.text(10, 10, 'Camera Fade', {
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: '24px',
            color: '#00ff00'
        });

        const infoText = this.add.text(400, 300, 'Click button to test', {
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: '32px',
            color: '#ffffff'
        }).setOrigin(0.5);

        this.createButton(400, 200, 'FADE OUT/IN', () => {
            infoText.setText('Fading Out...');
            this.fadeCamera(1000, 0, 0, 0, (camera, progress) => {
                if (progress === 1) {
                    infoText.setText('Fading In...');
                    camera.fadeIn(500);
                }
            });
        });
    }

    /**
     * カメラをフェードアウトさせる
     * @param duration 持続時間(ms)
     * @param r 赤 (0-255)
     * @param g 緑 (0-255)
     * @param b 青 (0-255)
     * @param callback 完了時のコールバック(省略可)
     */
    public fadeCamera(duration: number = 1000, r: number = 0, g: number = 0, b: number = 0, callback?: (camera: Phaser.Cameras.Scene2D.Camera, progress: number) => void) {
        this.cameras.main.fadeOut(duration, r, g, b, callback);
    }

    createButton(x: number, y: number, label: string, callback: () => void) {
        const button = this.add.text(x, y, label, {
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: '28px',
            color: '#000000',
            backgroundColor: '#ffffff',
            padding: { x: 10, y: 5 }
        })
            .setOrigin(0.5)
            .setInteractive({ useHandCursor: true });

        button.on('pointerdown', callback);
        button.on('pointerover', () => button.setStyle({ fill: '#ff0000' }));
        button.on('pointerout', () => button.setStyle({ fill: '#000000' }));
    }
}

実装のポイント

1. コールバック: フェード完了後にシーン遷移や次のアニメーションを行いたい場合は、コールバック関数（またはイベント）を利用します。

2. カメラ自体の操作: オブジェクトを被せるのではなく、カメラ自体の描画処理としてフェードを行うため、UIを含む画面全体に対しても有効です（設定による）。