【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 Resouces]
Import Unity Packageが開かれるので「Import」を選択

GameObjectの追加

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

TextMeshProUGUIの基本構成

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

①表示するテキスト
②使用するフォント
③太字、斜体等、フォントサイズ④Vector 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の作成方法

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

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

日本語化対応

日本語を入力すると「□（豆腐）」になることがあります。これは、Unity標準のフォントに日本語が含まれていないからです。以下のサイトを参考して多言語化対応をしましょう！

※ Font Asset CreatorによりFontを作成し、言語毎に設定する必要があります。

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

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

⑥表示の切り替え

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

InspectorからTextMeshProUGUIを動的に表示、非表示ができます。

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

スクリプトからTextMeshProUGUIを動的に表示、非表示ができます。以下のコードはサンプルとして記載しております。

using TMPro;
using UnityEngine;

public class TextController : MonoBehaviour {
    public TextMeshProUGUI textMeshPro;

    void Start() 
　{
        textMeshPro.enabled = true;　//テキストコンポーネントを表示
        textMeshPro.enabled = false;　//テキストコンポーネントを非表示

        textMeshPro.gameObject.SetActive(true);　//テキストコンポーネントを含むゲームオブジェクトを表示
        textMeshPro.gameObject.SetActive(false);　//テキストコンポーネントを含むゲームオブジェクトを非表示
    }
}

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

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

よくあるエラーと解決策

フォントが表示されない

原因:フォントアセットが設定されていない
解決策:フォントアセットに正しいフォントを適用する。また、「□」のように表示される場合はフォントに文字登録がされていないのでフォントを変更する必要があります。

NullReferenceException : Object reference not set to an instance of an object

原因: TextMeshProUGUIコンポーネントが紐づいていない
解決策: InspectorでTextMeshProUGUIをアタッチする

まとめ

この記事では、TextMeshProUGUIの基本から応用まで解説しました。
TextMeshProUGUIは美しいテキスト表示・リッチテキスト対応・スクリプトからの動的変更ができるため、UnityのUIでのテキスト管理に最適です。

・方法導入 → インストールは不要だが、インポートが必要
・基本設定 → フォント・サイズ・リッチテキスト活用
・スクリプト制御 → 動的なテキスト変更と表示、必表示の切り替え

TextMeshProUGUI Unity

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

この記事について

この記事でわかること

TextMeshProUGUIとは？