Tint (色変化)

オブジェクトの色合いを滑らかに変化させます。 Phaser.Display.Color.HSVToRGB を使うと、虹色のような変化も簡単に作れます。

動作デモ

コードスニペット

1. メソッド (Method)

/**
 * オブジェクトの色を虹色に変化させる
 * @param target 対象オブジェクト (Sprite, Image, Text等)
 * @param duration 1周する時間(ms) (デフォルト: 2000)
 */
public startTint(target: Phaser.GameObjects.GameObject & { setTint: Function }, duration: number = 2000) {
    this.tweens.addCounter({
        from: 0,
        to: 100,
        duration: duration,
        loop: -1,
        yoyo: true,
        onUpdate: (tween: Phaser.Tweens.Tween) => {
            const color = Phaser.Display.Color.HSVToRGB((tween.getValue() ?? 0) / 100, 1, 1);
            target.setTint(color.color);
        }
    });
}

2. 使い方 (Usage)

create() {
    const tintObj = this.add.text(400, 200, '★', { fontSize: '100px', color: '#ffffff' }).setOrigin(0.5);

    // 2秒サイクルで色を変化
    this.startTint(tintObj, 2000);
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

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

        this.add.text(400, 100, 'Tint (色変化)', { fontFamily: '"Noto Sans JP", sans-serif' }).setOrigin(0.5);
        const tintObj = this.add.text(400, 200, '★', { fontSize: '100px', color: '#ffffff' }).setOrigin(0.5);

        // 色変化エフェクトを開始
        this.startTint(tintObj);
    }

    /**
     * オブジェクトの色を虹色に変化させる
     * @param target 対象オブジェクト (Sprite, Image, Text等)
     * @param duration 1周する時間(ms) (デフォルト: 2000)
     */
    public startTint(target: Phaser.GameObjects.GameObject & { setTint: Function }, duration: number = 2000) {
        this.tweens.addCounter({
            from: 0,
            to: 100,
            duration: duration,
            loop: -1,
            yoyo: true,
            onUpdate: (tween: Phaser.Tweens.Tween) => {
                const color = Phaser.Display.Color.HSVToRGB((tween.getValue() ?? 0) / 100, 1, 1);
                target.setTint(color.color);
            }
        });
    }
}

実装のポイント

1. HSV色空間: 単純なRGBではなく Phaser.Display.Color.HSVToRGB を使うことで、虹色のような鮮やかな色変化を簡単に作れます。

2. Tween Update: onUpdate コールバック内で値を監視し、フレームごとに setTint を呼び出すことで、Tweenの値を色情報として動的に反映しています。