Unity UIの基本③｜TextとTextMeshProの使い方

前回は、UnityのUIパーツの1つである Panel について確認しました。

Panelは、メニュー画面やゲームオーバー画面、設定画面などを作るときの土台として使えるUIです。

今回は、そのPanelの上に文字を表示する方法として、Text と TextMeshPro について確認していきます。

文字は、ゲームUIの中でも特によく使う要素です。
たとえば、次のような場面で使います。

・タイトル画面の文字
・メニュー画面の説明文
・スコア表示
・残り時間の表示
・ゲームオーバーの文字
・ボタンの文字

Unityでは、文字を表示する方法として、主に Text と TextMeshPro があります。

今回は、基本的な違いを確認しながら、スクリプトから文字を変更する方法、さらにTextMeshProを使った文字演出まで見ていきます。

Textとは

Text は、Unityで文字を表示するための基本的なUIパーツです。
以前から使われている文字表示用のコンポーネントで、UI上に簡単に文字を表示できます。

Hierarchyウィンドウで右クリックし、
UI > Legacy > Text
から作成します。

※Unityのバージョンによっては、通常のTextは Legacy として表示されることがあります。

TextMeshProとは

TextMeshPro は、Unityで文字をきれいに表示するための高機能な文字表示システムです。
通常のTextよりも、文字がくっきり表示されやすく、細かい設定もしやすいのが特徴です。

Hierarchyウィンドウで右クリックし、
UI > Text - TextMeshPro
から作成できます。

初めてTextMeshProを使うときは、TMP Importer のようなウィンドウが表示されることがあります。
TextMeshProに必要なデータをインポートすることで使えるようになります。

TextとTextMeshProの違い

TextとTextMeshProは、どちらも文字を表示するためのUIです。

主な違いは次の通りです。

初めて使う場合は、まずTextで文字表示の考え方を確認して、そのあとTextMeshProを使うと理解しやすいと思います。

Textを作成する

まずは、通常のTextを作成してみます。

Hierarchyウィンドウで右クリックし、UI > Legacy > Text を選択します。

すると、Canvasの中にTextが作成されます。
Textを選択すると、InspectorにTextコンポーネントが表示されます。
Textコンポーネントでは、次のような項目を設定できます。

・表示する文字
・フォントサイズ
・文字の色
・文字の配置
・行間
・横幅や高さ

まずは、InspectorのText欄に文字を入力してみましょう。
たとえば「ゲームスタート！」と入力すると、画面上にその文字が表示されます。

TextMeshProを作成する

次に、TextMeshProを作成します。

Hierarchyウィンドウで右クリックし、UI > Text - TextMeshPro を選択します。

すると、Canvasの中にTextMeshProのオブジェクトが作成されます。

TextMeshProを選択すると、Inspectorに TextMeshPro - Text (UI) というコンポーネントが表示されます。

ここで、表示する文字やフォントサイズ、文字色、配置などを変更できます。
通常のTextと同じように使えますが、TextMeshProの方が設定項目は多くなっています。
最初は全部を理解しようとしなくても大丈夫、まずは次の項目を押さえておけば十分です。

・Text Input
・Font Size
・Color
・Alignment
・Auto Size

文字の内容を変更する

TextMeshProでは、Inspectorの Text Input に入力した文字が画面に表示されます。

たとえば、Game Start と入力すれば、画面上に表示されます。

日本語表示についての注意点

TextMeshProはとても便利な文字表示機能ですが、デフォルトの状態では日本語表示に十分対応していないようです。
これは、TextMeshProで使っているフォントアセットに、日本語の文字情報が含まれていないためです。
日本語を正しく表示するには、日本語に対応したフォントを用意し、TextMeshPro用のフォントアセットを作成する必要があります。

この設定は少し長くなるため、次回以降の記事で、TextMeshProで日本語を表示するためのフォントアセットの作り方 を確認していきます。

文字の位置とサイズの調整

TextやTextMeshProも、Panelと同じように、位置やサイズは Rect Transform で調整します。

文字が表示されない場合は、TextMeshProの文字そのものではなく、Rect Transformの表示範囲が小さい可能性もあります。

特に長い文章を表示する場合は、WidthやHeightを広げておきましょう。

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

文字の大きさは、Font Sizeで変更できます。
TextMeshProの場合は、Inspectorの Font Size を変更します。

タイトル画面では大きめに、説明文では少し小さめにすると見やすくなります。

文字の色を変更する

TextMeshProの文字色は、Inspector上部にある Vertex Color で変更できます。
通常の文字色を変えたい場合は、まずこの Vertex Color を使えば大丈夫です。

UIでは、背景と文字色の差が小さいと読みづらくなります。
たとえば、暗いPanelの上に文字を置く場合は、白や黄色などの明るい色にすると見やすくなります。

なお、TextMeshProには下の方に Face Color や Outline Color もあります。
Face Colorはマテリアル側の文字本体の色、Outline Colorは文字のフチの色です。
Face Color や Outline Color を使うと、よりゲームの素材らしいリッチな仕上がりとなります。

文字の配置を変更する

TextMeshProでは、Alignmentで文字の配置を変更できます。
よく使う配置は次の3つです。

・左寄せ
・中央寄せ
・右寄せ

タイトル文字やゲームオーバー表示では、中央寄せを使うことが多いです。
説明文では、左寄せの方が読みやすい場合もあります。
UIを作るときは、文字の内容に合わせて配置を変えると見やすくなります。

Auto Sizeを使う

TextMeshProには、Auto Size という機能があります。
Auto Sizeを有効にすると、表示範囲に合わせて文字サイズを自動で調整できます。

たとえば、文字数が多くなったときに、Textの枠からはみ出してしまうことがあります。
そのような場合にAuto Sizeを使うと、文字が枠内に収まるようにサイズを調整してくれます。

スクリプトでTextの変更

通常のTextを使う場合は、次のusingが必要です。

using UnityEngine.UI;

サンプル１：Textの文字を変更する

UIの文字は、Inspectorから入力するだけでなく、スクリプトから変更することもできます。

たとえば、次のような場面では、スクリプトから文字を変更します。

・スコアが増えたとき
・残り時間が減ったとき
・ゲームオーバーになったとき
・アイテムを取得したとき
・会話メッセージを切り替えるとき

まずは、通常のTextをスクリプトから変更する例を確認します。

using UnityEngine;
using UnityEngine.UI;

public class TextSample : MonoBehaviour
{
    public Text messageText;

    void Start()
    {
        messageText.text = "ゲームスタート！";
    }
}

Textの表示内容を変更したい場合は、次のように text に文字を代入します。

messageText.text = "表示したい文字";

このスクリプトを使う場合は、Hierarchy上に配置したTextを、Inspectorの Message Text にドラッグ＆ドロップして登録します。

これで、ゲーム開始時にTextの文字が変更されます。

通常のTextでは、このように文字の内容を変更できます。

ただし、現在のUnityではTextMeshProを使うことが多いので、次にTextMeshProの場合も確認します。

スクリプトでTextMeshProの変更

TextMeshProをスクリプトから使う場合は、次のusingを追加します。

using TMPro;

TextMeshProUGUIの文字を変更するサンプルは次の通りです。

using UnityEngine;
using TMPro;

public class TMPSample : MonoBehaviour
{
    public TextMeshProUGUI messageText;

    void Start()
    {
        messageText.text = "ゲームスタート！";
    }
}

通常のTextでは、変数の型に Text を使いましたが、TextMeshProでは TextMeshProUGUI を使います。

public TextMeshProUGUI messageText;

文字を変更する部分は、通常のTextと同じです。

messageText.text = "ゲームスタート！";

つまり、基本的な使い方はほとんど同じです。

TextMeshProで文字に動きを付ける

TextMeshProは、単に文字を表示するだけでなく、文字に動きを付けることもできます。

たとえば、次のような演出ができます。

・文字を波のように揺らす
・1文字ずつ落下させる
・文字を順番に光らせる

このような演出を使うと、タイトル画面やゲームクリア画面の見栄えがよくなります。
ここからは、TextMeshProを使った文字演出のサンプルを確認します。

サンプル1：文字を波のように揺らす

まずは、文字を1文字ずつ上下に動かし、波のように揺らすサンプルです。

using UnityEngine;
using TMPro;

public class TMPSample : MonoBehaviour
{
    public TextMeshProUGUI messageText; // テキストオブジェクト

    void Update()
    {
       messageText.ForceMeshUpdate(); // テキストのメッシュを更新

        TMP_TextInfo textInfo = messageText.textInfo; // テキストの情報を取得

        for (int i = 0; i < textInfo.characterCount; i++) // テキストの文字数分ループ
        {
            if (!textInfo.characterInfo[i].isVisible) // 文字が表示されていなければ
            {
                continue; // スキップ
            }
            // マテリアルのインデックスを取得
            int materialIndex = textInfo.characterInfo[i].materialReferenceIndex;
            // 頂点のインデックスを取得
            int vertexIndex = textInfo.characterInfo[i].vertexIndex; 

            // メッシュの頂点を取得
            Vector3[] vertices = textInfo.meshInfo[materialIndex].vertices; 

            // 波の高さを計算
            float wave = Mathf.Sin(Time.time * 5f + i * 0.5f) * 10f;

            // 頂点の位置を更新
            vertices[vertexIndex + 0].y += wave;
            vertices[vertexIndex + 1].y += wave;
            vertices[vertexIndex + 2].y += wave;
            vertices[vertexIndex + 3].y += wave; 
        }

        for (int i = 0; i < textInfo.meshInfo.Length; i++) // メッシュの数分ループ
       {
            // メッシュの頂点を更新
            textInfo.meshInfo[i].mesh.vertices = textInfo.meshInfo[i].vertices; 
            // メッシュを更新
            messageText.UpdateGeometry(textInfo.meshInfo[i].mesh, i); 
        }
    }
}

このサンプルでは、TextMeshProの文字を1文字ずつ上下に動かしています。

ポイントは、次の部分です。

float wave = Mathf.Sin(Time.time * 5f + i * 0.5f) * 10f;

Mathf.Sin を使うことで、時間に合わせて上下に変化する値を作っています。
さらに、i * 0.5f を足すことで、文字ごとに動きのタイミングを少しずつずらしています。
その結果、文字全体が波のように揺れて見えます。

数字を変えると、動き方も変わります。

Time.time * 5f

この 5f を大きくすると、揺れるスピードが速くなります。

* 10f

この 10f を大きくすると、上下に揺れる幅が大きくなります。

サンプル2：1文字ずつ落下させる

次は、文字が1文字ずつ上から落ちてくるような演出です。

タイトル表示やゲームクリア画面などで使うと、少し動きのあるUIになります。

using UnityEngine;
using TMPro;

public class TMPDropText : MonoBehaviour
{
    public TextMeshProUGUI tmpText; // テキストオブジェクト

    public float dropHeight = 300f; // 落下の高さ
    public float dropSpeed = 4f; // 落下の速度
    public float delay = 0.1f; // 落下の遅延

    void Update()
    {
        tmpText.ForceMeshUpdate(); // テキストのメッシュを更新

        TMP_TextInfo textInfo = tmpText.textInfo; // テキストの情報を取得

        for (int i = 0; i < textInfo.characterCount; i++) // テキストの文字数分ループ
        {
            if (!textInfo.characterInfo[i].isVisible) // 文字が表示されていない場合は
            {
                continue; // スキップ
            }
            // マテリアルのインデックスを取得
            int materialIndex = textInfo.characterInfo[i].materialReferenceIndex; 
            // 頂点のインデックスを取得
            int vertexIndex = textInfo.characterInfo[i].vertexIndex; 
            // メッシュの頂点を取得
            Vector3[] vertices = textInfo.meshInfo[materialIndex].vertices; 

            float t = Time.time - i * delay;  // 落下の時間を計算
            // 落下の高さを計算
            float offsetY = Mathf.Max(0, dropHeight - t * dropSpeed * 100f);

            // 頂点の位置を更新
            vertices[vertexIndex + 0].y += offsetY;
            vertices[vertexIndex + 1].y += offsetY;
            vertices[vertexIndex + 2].y += offsetY;
            vertices[vertexIndex + 3].y += offsetY;
        }

        for (int i = 0; i < textInfo.meshInfo.Length; i++) // メッシュの数分ループ
        {
            // メッシュの頂点を更新
            textInfo.meshInfo[i].mesh.vertices = textInfo.meshInfo[i].vertices; 
             // メッシュを更新
            tmpText.UpdateGeometry(textInfo.meshInfo[i].mesh, i);
        }
    }
}

このサンプルでは、各文字を最初は上の位置にずらしておき、時間が経つにつれて元の位置に戻しています。

ポイントは次の部分です。

float offsetY = Mathf.Max(0, dropHeight - t * dropSpeed * 100f);

offsetY が大きい間は、文字が上に表示されます。
時間が経つと offsetY が少しずつ小さくなり、最終的に0になります。
offsetY が0になると、文字は元の位置に表示されます。
また、次の部分で文字ごとに落ち始めるタイミングをずらしています。

float t = Time.time - i * delay;

i は文字の番号です。
そのため、1文字目、2文字目、3文字目というように、少しずつ遅れて落下してきます。
delay の値を大きくすると、文字が落ちるタイミングの差が大きくなります。

サンプル3：1文字ずつ光らせる

TextMeshProでは、文字ごとに色を変更することもできます。

次のサンプルでは、文字が左から順番に光っているような演出を作ります。

using UnityEngine;
using TMPro;

public class TMPColorText : MonoBehaviour
{
    public TextMeshProUGUI tmpText; // テキストオブジェクト

    void Update()
    {
        tmpText.ForceMeshUpdate(); // テキストのメッシュを更新

        TMP_TextInfo textInfo = tmpText.textInfo; // テキストの情報を取得

        for (int i = 0; i < textInfo.characterCount; i++) // テキストの文字数分ループ
        {
            if (!textInfo.characterInfo[i].isVisible) // 文字が表示されていない場合は
            {
                continue; // スキップ
            }
            // マテリアルのインデックスを取得
            int materialIndex = textInfo.characterInfo[i].materialReferenceIndex; 
            // 頂点のインデックスを取得
            int vertexIndex = textInfo.characterInfo[i].vertexIndex; 
            // メッシュのカラーを取得
            Color32[] colors = textInfo.meshInfo[materialIndex].colors32; 

            float value = Mathf.Sin(Time.time * 4f + i * 0.5f); // サイン波の値を計算
            byte brightness = (byte)Mathf.Lerp(100, 255, (value + 1f) / 2f); // 明度を計算

            Color32 color = new Color32(brightness, brightness, brightness, 255); // カラーを計算

            // 頂点のカラーを更新
            colors[vertexIndex + 0] = color;
            colors[vertexIndex + 1] = color; 
            colors[vertexIndex + 2] = color;
            colors[vertexIndex + 3] = color; 
        }

        for (int i = 0; i < textInfo.meshInfo.Length; i++) // メッシュの数分ループ
        {
            // メッシュのカラーを更新
            textInfo.meshInfo[i].mesh.colors32 = textInfo.meshInfo[i].colors32;
            // メッシュを更新
            tmpText.UpdateGeometry(textInfo.meshInfo[i].mesh, i);
        }
    }
}

このサンプルでは、文字ごとに明るさを変えています。

ポイントは次の部分です。

byte brightness = (byte)Mathf.Lerp(100, 255, (value + 1f) / 2f);

brightness の値が変わることで、文字が明るくなったり暗くなったりします。
さらに、次の部分で文字ごとにタイミングをずらしています。

float value = Mathf.Sin(Time.time * 4f + i * 0.5f);

そのため、文字が左から順番に光っているように見えます。

白っぽく光らせたい場合は、このままでよいです。
色を付けたい場合は、次の部分を変更します。

Color32 color = new Color32(brightness, brightness, brightness, 255);

たとえば、黄色っぽくしたい場合は、赤と緑を強くして、青を少し弱くします。

Color32 color = new Color32(brightness, brightness, 50, 255);

TextMeshProの文字演出でやっていること

ここまでのサンプルでは、少し難しいコードが出てきました。
初心者のうちは、すべてを完璧に理解しなくても大丈夫です。
まずは、TextMeshProでは 1文字ずつ操作できる というイメージを持っておきましょう。

TextMeshProでは、文字は内部的に小さな四角形のような形で表示されています。
1つの文字は、4つの頂点で作られています。

その4つの頂点を動かすことで、文字の位置を変えることができます。

vertices[vertexIndex + 0].y += wave;
vertices[vertexIndex + 1].y += wave;
vertices[vertexIndex + 2].y += wave;
vertices[vertexIndex + 3].y += wave;

このように、4つの頂点をまとめて動かすことで、1文字全体が動いて見えます。

文字を揺らしたり、落下させたりする処理は、基本的にはこの考え方です。

今回のまとめ

今回は、UnityのUIで文字を表示する方法として、TextとTextMeshProについて確認しました。

ポイントは次の通りです。

TextMeshProは、UIの文字表示ではとてもよく使う機能です。

まずは、文字を表示する、色を変える、サイズを変える、スクリプトから変更する、という基本を押さえておきましょう。

慣れてきたら、今回のように文字に動きを付ける演出にも挑戦してみてください。

次回の予告

次回は、Canvasの中に配置するUIパーツの中から、Imageについて解説します。
Imageは、画像やアイコンを表示するだけでなく、ボタンの背景、ウィンドウの装飾、HPバー、クールタイムゲージなどにも使われる基本的なUIパーツです。

さらに、Filledを使って横方向のゲージや円形・扇形のゲージを作り、スクリプトから表示量を変更する方法まで解説します。

こちらはUnity初心者向けの記事をテーマ別にまとめています。
▼ Unity初心者向け記事まとめはこちら

こちらのマガジン「ミニゲーム作成講座　全8回セット」でもシーンの切り替えなどを活用して、初心者でも知識ゼロから作れるミニゲーム作成講座を紹介しています。

さらにステップアップの「スマホで遊ぶジャンプゲーム　8回セット」のマガジンもぜひご活用ください。

ファイブボックスでは、スクラッチやUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。