Pop In (ポップイン)

UIやアイテムが出現する際、単に表示するのではなく「ポヨン」と飛び出す演出（Pop In）を加えることで、画面に心地よいリズムとフィードバックを与えることができます。 Back.out イージングを使用することで、少しスケールがオーバーシュートしてから戻る「弾力感」を表現します。

動作デモ

コードスニペット

1. メソッド (Method)

シーンクラスに追加するヘルパーメソッドです。

/**
 * オブジェクトを「ポヨン」と出現させる
 * @param target 対象のゲームオブジェクト
 * @param duration アニメーション時間 (ms)
 * @param scale 目標のスケール値 (デフォルトは1)
 */
public popIn(target: Phaser.GameObjects.GameObject & { setScale: Function, scale: number }, duration: number = 300, scale: number = 1) {
    target.setScale(0); // 最初はサイズ0
    this.tweens.add({
        targets: target,
        scale: scale,
        duration: duration,
        ease: 'Back.out' // ここが「ポヨン」の肝
    });
}

2. 使い方 (Usage)

create() {
    this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
        // クリックした位置に円を生成
        const shape = this.add.circle(pointer.x, pointer.y, 30, 0xff00cc);

        // ポップイン効果
        this.popIn(shape);
    });
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

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

        // Instructions
        this.add.text(400, 50, '画面をクリックして出現', {
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: '16px',
            color: '#ffffff'
        }).setOrigin(0.5);

        // Demo objects to pop in
        const shapes = [
            (x: number, y: number) => this.add.circle(x, y, 30, 0xff00cc),
            (x: number, y: number) => this.add.rectangle(x, y, 60, 60, 0x00ccff),
            (x: number, y: number) => this.add.star(x, y, 5, 20, 40, 0xffff00),
            (x: number, y: number) => this.add.text(x, y, 'Pop!', { fontSize: '32px', fontStyle: 'bold' }).setOrigin(0.5)
        ];

        this.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
            // Randomly select a shape
            const createShape = Phaser.Utils.Array.GetRandom(shapes);
            const shape = createShape(pointer.x, pointer.y);

            // Apply popIn effect
            this.popIn(shape);

            // Auto destroy after a while to keep scene clean
            this.time.delayedCall(2000, () => {
                this.tweens.add({
                    targets: shape,
                    alpha: 0,
                    scale: 0,
                    duration: 500,
                    onComplete: () => shape.destroy()
                });
            });
        });

        // Initial demo
        const centerObj = this.add.rectangle(400, 300, 100, 100, 0xffffff);
        this.popIn(centerObj, 500, 1);
    }

    /**
     * オブジェクトを「ポヨン」と出現させる
     * @param target 対象のゲームオブジェクト
     * @param duration アニメーション時間 (ms)
     * @param scale 目標のスケール値 (デフォルトは1)
     */
    public popIn(target: Phaser.GameObjects.GameObject & { setScale: Function, scale: number }, duration: number = 300, scale: number = 1) {
        target.setScale(0); // 最初はサイズ0
        this.tweens.add({
            targets: target,
            scale: scale,
            duration: duration,
            ease: 'Back.out' // ここが「ポヨン」の肝
        });
    }
}

実装のポイント

初期状態を非表示に: target.setScale(0) でターゲットのサイズを0にし、見えない状態からスタートします。
Back.out イージング: ease: 'Back.out' がこのエフェクトの核です。目標値（scale）を少し通り越してから戻るような動きを自動で行ってくれます。これが「ポヨン」という質感を生みます。
汎用性: Phaser.GameObjects.GameObject で setScale を持つものであれば、スプライト、画像、テキスト、コンテナなど何にでも適用できます。