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

2024年9月19日

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

1. 前提条件
2. 目次
3. 方法1: Tweeningライブラリ（DOTween）を使用する
- 3.1. DOTweenのインストール
- 3.2. スクリプトの実装
4. 方法2: コルーチンを使用する
- 4.1. スクリプトの実装
5. 方法3: Updateメソッドを使用する
- 5.1. スクリプトの実装
6. まとめ
7. 参考文献

前提条件

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

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

DOTweenのインストール

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

Package Managerを開きます。
画面左上の「＋」ボタンをクリックし、「Add package from git URL…」を選択します。
以下のURLを入力し、「Add」をクリックしてインストールします。

   https://github.com/Demigiant/dotween

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

スクリプトの実装

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

C#スクリプトを新規作成し、ScoreUpdater.csと命名します。
以下のコードをスクリプトに記述します。

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); // イージング関数を設定
    }
}

Unityエディタで、ScoreUpdaterスクリプトを任意のGameObjectにアタッチします。
ScoreTextフィールドに、得点を表示するTextMeshProのUI要素をドラッグ＆ドロップします。

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

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

スクリプトの実装

C#スクリプトを新規作成し、ScoreUpdaterCoroutine.csと命名します。
以下のコードを記述します。

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();
    }
}

Unityエディタで、ScoreUpdaterCoroutineスクリプトを任意のGameObjectにアタッチします。
ScoreTextフィールドに、得点を表示するTextMeshProのUI要素を設定します。

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

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

スクリプトの実装

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

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;
            }
        }
    }
}