【Unity】TextMeshProUGUIの使い方を徹底解説

この記事について

この記事は私がゲーム制作・学習等で学んだ知識を元にTextMeshProUGUIの使い方をわかりやすく説明していきます。

この記事でわかること

TextMeshProUGUIの導入方法と基本的な使い方
スクリプトからテキスト制御
よくあるエラーとその解決策
日本語対応やフォント追加の手順

TextMeshProUGUIとは？

Unity標準のTextよりも高機能な文字描画システム。

アンチエイリアスで綺麗に表示
アウトラインや影を簡単につけられる
リッチテキスト（色・サイズ・スタイルの部分変更）が強力
動的に文字を変えてもくっきり見える

また、TextMeshProには大きく分けて2種類あります。

コンポーネント	用途
TextMeshPro (3D Object用)	3D空間に文字を置く（ワールド空間の看板や名前表示など）
TextMeshProUGUI (UI用)	Canvas の上に配置する文字（HPバー、ボタンのラベル、UIテキストなど）

TextMeshProUGUIの導入

TextMeshProUGUIの導入方法

TextMeshProUGUIはUnityの標準であるため、インストールは不要です。

「Window」タブからインポート

Unityの[Window]→[TextMeshPro]→[Import TMP Essential Resources]
Import Unity Packageが開かれるので「Import」を選択

GameObjectの追加

UIとして追加する場合
1. [GameObject] → [UI] → [Text – TextMeshPro]を選択
2. 画面上にTMPテキストが表示される

TextMeshProUGUIの基本構成

TextMeshProUGUIの基本的なプロパティはInspectorで設定できます。特によく使用するところだけを説明します。
※ ①、②、④、⑥は後述します。

①表示するテキスト
②使用するフォント
③太字、斜体等、フォントサイズ
④Vertex Color：文字の色
　Color Gradient：グラデーション
⑤テキストの余白、位置揃え
⑥TextMeshProの表示、非表示

Font Materialの設定（アウトライン・影）

TextMeshProUGUIにはアウトラインや影の設定ができますが、デフォルトではチェックボックスのチェックは外れています。
しかし、ゲーム制作では演出が大事なので必ず知っておいた方がいいかと思います。

インスペクターでの説明は省略しますが、スクリプトで制御したい方は以下を参考にしてください。

Extra Settings

普段はたたまれていないので見る機会は少ないですが、いろいろと設定ができるみたいです。この辺になると都度、それについて検索するといいと思いますが、これだけは覚えていてほしい！
ユーザーに入力させるところ、反映するところでは「Rich Text」のチェックは外そう！
理由としてはリッチテキストなのでいろいろといたずらができてしまうからです。(泣)

ユーザー入力といえばInputFieldなのでどういうことができるかを知りたい方は以下を参考にしてください。

①テキストを取得・変更する

Inspectorでテキストを変更

Inspectorではテキストを変更できます。

スクリプトでテキストを動的に変更

スクリプトからテキストを動的に変更できます。以下の記事を参考にしてください。

②Font Assetの追加

カスタムフォントを使うには、Font Assetの作成が必要です。

Fontのダウンロード

商用利用かつ無料でも良い方はGoogle Fontを以下のサイトからダウンロードしましょう。

Google Fonts：https://fonts.google.com

Font Assetの作成方法

以下のサイトを参考にしてください。

※ フォントによって表示できない文字もあるので気を付けましょう。

日本語が「□」になるときの対応

日本語を入力すると「□（豆腐）」になることがあります。まず、TextMeshProUGUIに設定したFont AssetとFallback Font Assetに、その文字が含まれているかを確認しましょう。

日本語に対応したフォントを用意し、上のFont Asset Creatorの手順で必要な文字を含むFont Assetを作成・更新して、InspectorのFont Assetに設定します。不足する文字を別のFont Assetで補う場合は、Fallback Font Assetsを設定します。

日本語を表示するだけなら、Localizationの導入は必須ではありません。日本語・英語など、言語に合わせて文章や使用するアセットを切り替えたい場合は、以下のLocalizationの記事を参考にしてください。

※ 言語を切り替える場合も、表示する文字を含むFont Assetやフォールバックの準備が必要です。Font Assetの文字とフォールバックについては、Unity公式のTMP_FontAssetリファレンスも確認してください。

④スクリプトでカラー・透明度・グラデーションを変更

TextMeshProUGUIのカラーを変える場合、Inspectorで変更可能だがスクリプトでの変更もすることが多いので、以下の記事を参考にしてください。

⑥表示の切り替え

Inspectorで表示を静的に切り替え

Inspectorでは、TextMeshProUGUIコンポーネントのチェックを切り替えて、文字の表示・非表示を設定できます。

スクリプトで表示を動的に切り替え

スクリプトからTextMeshProUGUIの表示・非表示を切り替えられます。以下は、開始時に文字だけを非表示にするサンプルです。TextController.csを有効なGameObjectに追加し、InspectorのText Mesh Pro欄に対象のTextMeshProUGUIを割り当ててください。

Start内は目的に合う1行だけを使用します。表示・非表示の4行を続けて実行しても、時間を空けて切り替わるわけではありません。最後がSetActive(false)なら、対象のGameObjectは非アクティブになります。

using TMPro;
using UnityEngine;

public class TextController : MonoBehaviour
{
    public TextMeshProUGUI textMeshPro;

    void Start()
    {
        // 目的に合う1行だけを使用してください。
        textMeshPro.enabled = false; // 文字だけを非表示
        // textMeshPro.enabled = true; // 文字を表示
        // textMeshPro.gameObject.SetActive(false); // GameObjectを非アクティブ化
        // textMeshPro.gameObject.SetActive(true); // GameObjectをアクティブ化
    }
}

enabledはTextMeshProUGUIコンポーネントの有効・無効を切り替えます。SetActiveはGameObject全体に作用するため、同じGameObjectの他のコンポーネントや子オブジェクトにも影響します。親GameObjectが非アクティブな場合は、子だけにSetActive(true)を指定しても表示されません。

また、非アクティブになったGameObjectのスクリプトはUpdateが呼ばれなくなります。後で再表示する処理は、別の有効なGameObjectなどから呼び出しましょう。詳しい動作はUnity公式のSetActiveリファレンスを確認してください。

応用編：スクリプトでアニメーションを実装

スクリプトでアニメーションを作成することはよくあり、その中でも頻繁に使用する物を下記の記事にまとめました。

よくあるエラーと解決策

フォントが表示されない

原因: Font Assetが未設定、または表示したい文字がFont Assetとフォールバックに含まれていない
解決策: TextMeshProUGUIのFont Asset欄を確認します。「□」になる文字は、対応する元フォントからFont Assetに追加・再生成するか、対応するFallback Font Assetで補いましょう。元フォント自体に文字がない場合は、その文字に対応したフォントを用意します。