Wave Text (揺れる文字)

RPGのステータス異常表示や、タイトル画面などでよく見られる、文字がふわふわと波打つエフェクトです。 Phaser.Tweens を使用して、各文字のY座標を少しずつタイミングをずらして動かすことで実現します。

動作デモ

コードスニペット

1. メソッド (Method)

このヘルパーメソッドを、Scene クラスに追加してください。 文字を一文字ずつ分解し、それぞれに遅延（delay）をもたせたTweenを適用しています。

/**
 * 文字が波打つエフェクトを作成するヘルパー
 * @param x 開始X座標
 * @param y 開始Y座標
 * @param text 表示するテキスト
 * @param style テキストスタイル
 */
public createWaveText(x: number, y: number, text: string, style: Phaser.Types.GameObjects.Text.TextStyle) {
  let currentX = x;
  // 文字列を1文字ずつ分割
  const splitText = text.split('');

  splitText.forEach((char, index) => {
      // 改行処理（簡易実装）
      if (char === '\n') {
          currentX = x;
          y += 40; // 行の高さ分ずらす
          return;
      }

      const charObj = this.add.text(currentX, y, char, style);

      // 次の文字のX座標を計算
      currentX += charObj.width;

      // Tweenアニメーションで上下に揺らす
      this.tweens.add({
          targets: charObj,
          y: y - 10, // 上に10px移動
          duration: 500,
          yoyo: true, // 行って戻る
          repeat: -1, // 無限ループ
          ease: 'Sine.easeInOut',
          delay: index * 100 // インデックスに応じて動きを遅らせる
      });
  });
}

2. 使い方 (Usage)

create() {
  const text = "Wave Text Effect\nPhaser 3 is Awesome!";

  // Waveエフェクトを実行
  this.createWaveText(50, 100, text, {
    fontSize: '48px',
    color: '#ffffff',
    fontStyle: 'bold'
  });
}

完全なソースコード

クラス全体を見る

import Phaser from 'phaser';

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

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

        // 文字列を定義
        const text = "Wave Text Effect\nPhaser 3 is Awesome!";

        // Waveエフェクトを実行
        this.createWaveText(50, 100, text, {
            fontFamily: '"Noto Sans JP", sans-serif',
            fontSize: '48px',
            color: '#ffffff',
            fontStyle: 'bold'
        });
    }

    /**
     * 文字が波打つエフェクトを作成するヘルパー
     * @param x 開始X座標
     * @param y 開始Y座標
     * @param text 表示するテキスト
     * @param style テキストスタイル
     */
    public createWaveText(x: number, y: number, text: string, style: Phaser.Types.GameObjects.Text.TextStyle) {
        let currentX = x;
        const splitText = text.split('');

        splitText.forEach((char, index) => {
            // 改行処理
            if (char === '\n') {
                currentX = x;
                y += 60; // 行送り
                return;
            }

            const charObj = this.add.text(currentX, y, char, style);

            // 次の文字のX座標を計算（簡易的な幅計算）
            currentX += charObj.width;

            // Tweenアニメーションで上下に揺らす
            this.tweens.add({
                targets: charObj,
                y: y - 10, // 上に10px移動
                duration: 500,
                yoyo: true,
                repeat: -1,
                ease: 'Sine.easeInOut',
                delay: index * 100 // インデックスに応じて遅延させることで波を作る
            });
        });
    }
}

実装のポイント

1. 文字ごとのTween: 文字を split で分解し、それぞれに個別のTweenを適用することで波打つ動きを表現します。

2. Delayの活用: index * 100 のようにインデックスに応じた遅延（delay）を設定することで、動きに位相差（ウェーブ）を生み出しています。

3. Sine イージング: Sine.easeInOut を使うことで、自然で滑らかな上下運動になります。