【Unity】TextMeshProUGUIで文字変更・改行・寄せ方向・AutoSizeをスクリプトで制御する

この記事について
この記事で分かること
TextMeshProUGUIとは？
文字変更・改行・寄せ方向・AutoSize
TextMeshProUGUIで簡易タイマー表示の実装
まとめ

この記事について

この記事ではTextMeshProUGUIでの文字変更や改行等をスクリプトで制御する方法が学べます。

この記事で分かること

UnityのTextMeshProUGUIはスクリプトから柔軟に操作可能です。

.textで文字列を更新
\nで改行を挿入
.fontSizeでサイズ変更
.alignmentで寄せ方向を制御
.enableAutoSizingでAutoSizeを有効化

TextMeshProUGUIとは？

TextMeshProUGUIについては以下の記事を参考にしてください。

文字変更・改行・寄せ方向・AutoSize

TextMeshProUGUIの準備

まずはヒエラルキーで右クリックをしてTextMeshProUGUIを1つ用意します。
・「右クリック」→「UI」→「Text – TextMeshPro」

次にスクリプトを作成して先ほどのTextMeshProUGUIにアタッチしてください。

using TMPro;
using UnityEngine;

public class TextMeshProSample : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
   
    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
    }
}

ここまで出来たら準備完了です！
以降の短いコードは、Start()内でGetComponentからtmpUGUIを取得した行の後に追加してください。

テキストを動的に変更する

シンプルですが最も多用します！
私のゲームでも、プレイヤーがアイテムを取った瞬間に即座に数値が変わるようにしました。今回はスタート時にテキストが変わるようにしています。

using TMPro;
using UnityEngine;

public class TextMeshProSample : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
   
    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
        
        //テキストを動的に変更
        tmpUGUI.text = "Score:100";
    }
}

実行するとこのようにスタート時に切り替わります。

改行を正しく扱う

TextMeshProUGUIは「\n」を使えば改行できます。先ほどのスクリプトを以下のように書き換えてみましょう！
ここでは、C#の文字列内の\nが改行としてTextMeshProUGUIに渡されます。

tmpUGUI.text = "Score\n100";

実行したらこのようになります。
このやり方はスコア表示やボタンのテキストに使われていることが多いイメージです。

フォントサイズを変更する

次にフォントサイズの変更を行っていきます。
フォントサイズは「.fontSize」で操作することが可能です！

using TMPro;
using UnityEngine;

public class TextMeshProSample : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
   
    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
        
        //テキストを動的に変更
        tmpUGUI.text = "Score\n100";

        // AutoSizeを無効にして、フォントサイズを固定
        tmpUGUI.enableAutoSizing = false;
        tmpUGUI.fontSize = 60.0f;
    }
}

実行するとこんな感じになります。
フォントサイズの変更は演出で強調したい場面に便利です。

文字の寄せ方向を制御する

次に文字の寄せ方向を制御する方法を説明していきたいと思います。
寄せ方向は「.alignment」で操作することが可能です！
下の3行から、試したい寄せ方向の1行を選んでください。3行とも書くと最後の右寄せが適用されます。

tmpUGUI.alignment = TextAlignmentOptions.Left;    // 左寄せ
tmpUGUI.alignment = TextAlignmentOptions.Center;  // 中央寄せ
tmpUGUI.alignment = TextAlignmentOptions.Right;   // 右寄せ

それぞれの寄せ方向のイメージ画像が以下のようになります！

AutoSizeの使い方

次にAutoSizeをスクリプトで制御する方法を説明していきたいと思います。
AutoSizeは、Rect Transformの表示領域に収まるように、fontSizeMinからfontSizeMaxの範囲で文字サイズを調整します。以下の例では18〜60の範囲で自動調整します。
内部で文字の配置計算を繰り返すため、頻繁に更新するテキストでは必要性を確認して使いましょう。サイズを固定できる場合はAutoSizeをOFFにして.fontSizeを指定できます。詳しくはUnityの公式ドキュメントを参考にしてください。

tmpUGUI.enableAutoSizing = true;
tmpUGUI.fontSizeMin = 18f;
tmpUGUI.fontSizeMax = 60f;

TextMeshProUGUIで簡易タイマー表示の実装

ここではタイマーの実装例を載せておきます。
※今回は説明のためにテキストのフォントサイズや寄せ方向を動的にしてますが、事前に設定できるものはしておいたり、プレハブ化しておく方が効率はいいかと思います。

using TMPro;
using UnityEngine;

public class TextMeshProSample : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpUGUI;
    private float timer = 5.0f;

    void Start()
    {
        // 同じGameObjectにアタッチされているTextMeshProを取得
        tmpUGUI = GetComponent<TextMeshProUGUI>();
        
        //テキストを動的に変更
        tmpUGUI.text = "Time\n0";

        // AutoSizeを無効にして、フォントサイズを固定
        tmpUGUI.enableAutoSizing = false;
        tmpUGUI.fontSize = 60.0f;

        // 中央寄せ
        tmpUGUI.alignment = TextAlignmentOptions.Center;  
    }

    void Update()
    {
        timer -= Time.deltaTime;
        timer = Mathf.Max(timer, 0); // 0未満にならないよう制御

        tmpUGUI.text = "Time\n" + Mathf.CeilToInt(timer);

        //タイマーが0になったらスクリプトを削除する。
        if (timer <= 0)
        {
            tmpUGUI.text = "Time\n0";
            Destroy(this);
        }
    }
}

それでは最後に挙動をみて終わりにします。
タイマーが0で止まること、アタッチしているスクリプトが削除されていたら成功です！