Shake (シェイク)

画面を激しく揺らします。ダメージ表現や爆発などに最適です。

動作デモ

コードスニペット

1. メソッド (Method)

/**
 * カメラを揺らす
 * @param duration 持続時間(ms)
 * @param intensity 強度 (0.0 - 1.0)
 */
public shakeCamera(duration: number = 500, intensity: number = 0.05) {
    this.cameras.main.shake(duration, intensity);
}

2. 使い方 (Usage)

create() {
    // 0.5秒間、強度0.05で揺らす
    this.shakeCamera(500, 0.05);
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

    create() {
        this.add.text(10, 10, 'Camera Shake', {
            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, 'SHAKE', () => {
            this.shakeCamera();
            infoText.setText('Shake!');
        });
    }

    /**
     * カメラを揺らす
     * @param duration 持続時間(ms)
     * @param intensity 強度 (0.0 - 1.0)
     */
    public shakeCamera(duration: number = 500, intensity: number = 0.05) {
        this.cameras.main.shake(duration, intensity);
    }

    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. 強度調整: intensity パラメータで揺れの激しさを調整できます。0.01（微震）〜0.05（激震）程度が実用的です。

2. 標準機能: Phaser 3のカメラには標準でシェイク機能が組み込まれているため、複雑な計算なしに一行で実装可能です。