UnityにおけるTextMeshProを使用した得点表示とイージング効果の実装方法

Unityでゲーム開発を行う際、得点の表示はユーザーエクスペリエンスを向上させる重要な要素の一つです。特に、得点が更新される際にイージング効果（滑らかなアニメーション）を適用することで、視覚的な演出を強化できます。本資料では、TextMeshProを使用した得点表示にイージング効果を追加する方法を詳しく解説します。

前提条件

  • Unityエンジン（バージョン2021以上を推奨）
  • TextMeshPro（Unityに標準で含まれています）
  • 基本的なC#とUnityの知識

目次

  1. 方法1: Tweeningライブラリ（DOTween）を使用する
    • DOTweenのインストール
    • スクリプトの実装
  2. 方法2: コルーチンを使用する
    • スクリプトの実装
  3. 方法3: Updateメソッドを使用する
    • スクリプトの実装
  4. まとめ
  5. 参考文献

方法1: Tweeningライブラリ（DOTween）を使用する

DOTweenのインストール

DOTweenは強力なTweeningライブラリで、値のアニメーションを簡単に実装できます。

  1. Package Managerを開きます。
  2. 画面左上の「＋」ボタンをクリックし、「Add package from git URL…」を選択します。
  3. 以下のURLを入力し、「Add」をクリックしてインストールします。
   https://github.com/Demigiant/dotween

注意: Unityのバージョンや設定によっては、Gitを使用したパッケージのインストールがサポートされていない場合があります。その場合は、公式サイトからUnityパッケージをダウンロードしてください。

スクリプトの実装

以下の手順でスクリプトを作成します。

  1. C#スクリプトを新規作成し、ScoreUpdater.csと命名します。
  2. 以下のコードをスクリプトに記述します。
using UnityEngine;
using TMPro;
using DG.Tweening; // DOTweenの名前空間を追加

public class ScoreUpdater : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    private int currentScore = 0;

    public void UpdateScore(int newScore)
    {
        // 数値をアニメーションさせる
        DOTween.To(() => currentScore, x => {
            currentScore = x;
            scoreText.text = currentScore.ToString();
        }, newScore, 1f) // 1秒間でnewScoreまでアニメーション
        .SetEase(Ease.OutQuad); // イージング関数を設定
    }
}
  1. Unityエディタで、ScoreUpdaterスクリプトを任意のGameObjectにアタッチします。
  2. ScoreTextフィールドに、得点を表示するTextMeshProのUI要素をドラッグ＆ドロップします。

方法2: コルーチンを使用する

コルーチンを使って自前でアニメーションを制御する方法です。

スクリプトの実装

  1. C#スクリプトを新規作成し、ScoreUpdaterCoroutine.csと命名します。
  2. 以下のコードを記述します。
using UnityEngine;
using TMPro;
using System.Collections;

public class ScoreUpdaterCoroutine : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    private int currentScore = 0;

    public void UpdateScore(int newScore)
    {
        StopAllCoroutines(); // 既存のコルーチンを停止
        StartCoroutine(AnimateScore(newScore));
    }

    private IEnumerator AnimateScore(int newScore)
    {
        float duration = 1f; // アニメーションの持続時間
        float elapsed = 0f;
        int startingScore = currentScore;

        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            t = Mathf.SmoothStep(0, 1, t); // イージング効果

            currentScore = Mathf.RoundToInt(Mathf.Lerp(startingScore, newScore, t));
            scoreText.text = currentScore.ToString();

            yield return null;
        }

        // 最終的な値を設定
        currentScore = newScore;
        scoreText.text = currentScore.ToString();
    }
}
  1. Unityエディタで、ScoreUpdaterCoroutineスクリプトを任意のGameObjectにアタッチします。
  2. ScoreTextフィールドに、得点を表示するTextMeshProのUI要素を設定します。

方法3: Updateメソッドを使用する

Updateメソッド内でアニメーションを処理する方法です。

スクリプトの実装

  1. C#スクリプトを新規作成し、ScoreUpdaterUpdate.csと命名します。
  2. 以下のコードを記述します。
using UnityEngine;
using TMPro;

public class ScoreUpdaterUpdate : MonoBehaviour
{
    public TextMeshProUGUI scoreText;
    private int currentScore = 0;
    private int targetScore = 0;
    private float animationDuration = 1f;
    private float animationProgress = 0f;
    private bool isAnimating = false;

    public void UpdateScore(int newScore)
    {
        targetScore = newScore;
        animationProgress = 0f;
        isAnimating = true;
    }

    void Update()
    {
        if (isAnimating)
        {
            animationProgress += Time.deltaTime / animationDuration;
            float t = Mathf.Clamp01(animationProgress);
            t = Mathf.SmoothStep(0, 1, t); // イージング効果

            int displayedScore = Mathf.RoundToInt(Mathf.Lerp(currentScore, targetScore, t));
            scoreText.text = displayedScore.ToString();

            if (t >= 1f)
            {
                isAnimating = false;
                currentScore = targetScore;
            }
        }
    }
}
  1. Unityエディタで、ScoreUpdaterUpdateスクリプトを任意のGameObjectにアタッチします。
  2. ScoreTextフィールドに、得点を表示するTextMeshProのUI要素を設定します。

まとめ

以上の方法を使用することで、TextMeshProの得点表示にイージング効果を簡単に追加できます。

  • DOTweenを使用する方法は、最もシンプルで拡張性があります。
  • コルーチンを使用する方法は、ライブラリに依存しない実装が可能です。
  • Updateメソッドを使用する方法は、カスタマイズ性が高く、細かい制御が可能です。

プロジェクトの要件やチームのスキルセットに応じて、最適な方法を選択してください。

参考文献

お問い合わせやご質問がございましたら、お気軽にお知らせください。

Unity

Posted by hidepon