【Unity】TextMeshProの使い方完全ガイド｜スクリプト制御・フォント追加・日本語対応まで徹底解説｜Wamutai Tech

使用環境

・Unity Editor：2021.3.18f1

この記事でわかること

TextMeshProの導入方法と基本的な使い方
標準のテキストとの違いとメリット
スクリプトからテキストを変更・制御する方法
よくあるエラーとその解決策
日本語対応やフォント追加の手順

TextMeshPro（UI）とは？

ピッグダディ

今日はUnityで使える高品質なテキストシステム『TextMeshPro』の使い方を紹介していくよ！
TextMeshProは従来の「UI Text」よりもはるかに高機能なテキスト表示システムで、文字を滑らかに、美しく、そして自由に装飾できるのが特徴なんだ。
アウトラインやシャドウ、グラデーション、リッチテキストタグを駆使して、ゲームのUIを格段に見やすくできるよ。

アイコン名を入力

TextMeshProって名前は聞いたことあるけどどういうもなの？

ピッグガール

標準のTextより高機能だけど、
初めて使うと設定がちょっと難しいんだよね…

ピッグダディ

安心して！導入からフォント追加、日本語対応、スクリプト制御、表示切り替えまで図解でわかりやすく解説していくよ！

TextMeshPro(TMP)の導入

TextMeshProの導入方法

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

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

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

GameObjectの追加

UIとして追加する場合
1. [GameObject] → [UI] → [Text – TextMeshPro]を選択
2. 画面上にTMPテキストが表示される
3Dオブジェクトとして追加する場合
1. [GameObject] → [3D] → [text – TextMeshPro]を選択
2. シーン内に3Dテキストが配置される

TextMeshProの基本構成

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

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

①TextMeshProのテキストを変更する

InspectorでTextMeshProのテキストを静的に変更

Inspectorでテキストを動的に変更できます。

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

スクリプトからテキストを動的に変更できます。以下のコードはサンプルとして記載しております。

using TMPro;　//TextMeshProを使用するときに必用
using UnityEngine;

public class TextController : MonoBehaviour {
    public TextMeshProUGUI textMeshPro; //型はTextMeshProUGUI

    void Start() 
　{
        textMeshPro.text = "Hello";　//テキストの変更
    }
}

②Font Assetの追加

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

Fontのダウンロード

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

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

Font Assetの作成方法

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

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

TextMeshProの日本語化対応

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

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

⑥TextMeshProの表示の切り替え

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

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

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

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

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

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

まとめ

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

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

※InputFieldとButtonにもTextMeshProを使うので参考程度にしてください。

TextMeshPro

【Unity】TextMeshProの使い方完全ガイド｜スクリプト制御・フォント追加・日本語対応まで徹底解説