Pulse (拡縮)

心臓の鼓動のように、大きくなったり小さくなったりを繰り返します。 注目させたいボタンやキャラクターに効果的です。

動作デモ

コードスニペット

1. メソッド (Method)

/**
 * オブジェクトを鼓動のように拡縮させる
 * @param target 対象オブジェクト
 * @param scale 最大スケール倍率 (デフォルト: 1.2)
 * @param duration 1回の脈打ち時間(ms) (デフォルト: 800)
 */
public startPulse(target: Phaser.GameObjects.GameObject, scale: number = 1.2, duration: number = 800) {
    this.tweens.add({
        targets: target,
        scaleX: scale,
        scaleY: scale,
        duration: duration,
        yoyo: true,  // 元に戻る
        repeat: -1,  // 無限ループ
        ease: 'Sine.easeInOut'
    });
}

2. 使い方 (Usage)

create() {
    const pulseObj = this.add.rectangle(400, 200, 100, 100, 0x00aaff);

    // 1.2倍の大きさで鼓動させる
    this.startPulse(pulseObj, 1.2, 800);
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

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

        this.add.text(400, 100, 'Pulse (拡縮)', { fontFamily: '"Noto Sans JP", sans-serif' }).setOrigin(0.5);
        const pulseObj = this.add.rectangle(400, 200, 100, 100, 0x00aaff);

        // 鼓動エフェクトを開始
        this.startPulse(pulseObj);
    }

    /**
     * オブジェクトを鼓動のように拡縮させる
     * @param target 対象オブジェクト
     * @param scale 最大スケール倍率 (デフォルト: 1.2)
     * @param duration 1回の脈打ち時間(ms) (デフォルト: 800)
     */
    public startPulse(target: Phaser.GameObjects.GameObject, scale: number = 1.2, duration: number = 800) {
        this.tweens.add({
            targets: target,
            scaleX: scale,
            scaleY: scale,
            duration: duration,
            yoyo: true,  // 元に戻る
            repeat: -1,  // 無限ループ
            ease: 'Sine.easeInOut'
        });
    }
}

実装のポイント

1. スケール操作: scaleX, scaleY を同時に変更することで、アスペクト比を保ったまま拡縮させています。

2. Sine イージング: Sine.easeInOut は、心臓の鼓動のような柔らかい動き（収縮と膨張）の表現に適しています。

3. Yoyo: yoyo: true で、大きくなった後に元のサイズに戻る動作を自動化しています。