UnityのUI機能でテキストを表示してみよう - 0からスタート！ゲーム開発ブログ

はじめに

こんにちは、azarashin です。大半のゲームでは必ず文字が登場します。設定画面やパラメータ表示であればアクションゲームにも登場しますし、ＲＰＧやノベルゲームともなればもはや文字だらけです。そこで本記事ではUnity のUI 機能の一つであるテキスト表示機能について紹介していきたいと思います。

注意事項

今回は使い方が簡単な旧式のText コンポーネントについて紹介します。一方、若干使い方が複雑になりますが、最近では高機能なTextMeshPro もUnity の標準機能として搭載されるようになっています。今のところはまだ普通に使えているText コンポーネントですが、今後廃止される可能性もありますので、 Unity のバージョンアップの際には注意しておきましょう。

Text オブジェクト（旧式）を作成する

まず、事前にCanvas オブジェクトを配置しておきます。 Canvas オブジェクトかその子オブジェクトを右クリックし、UI → Legacy → Text と選択してText オブジェクトを作成して下さい。（細かい話になりますが、本記事ではHierarchy 上のCanvas コンポーネントが付与されたGameObject のことをCanvas オブジェクト、 Text コンポーネントが付与されたGameObject のことをText オブジェクトと呼びます。一方、Inspector で表示される対象はそれぞれCanvas コンポーネント, Text コンポーネントと呼びます。）

Text オブジェクトにより表示されるテキストの色は作成された直後は真っ黒になっています。このままですと見づらいですので、テキストの色を変更しましょう。

テキストの色を変更する

Text オブジェクトにはRectTransform コンポーネントが付与されていますので、テキストの位置や表示範囲を自由に設定することができます。一方、テキストの色を変更するにはRectTransform コンポーネントではなくText コンポーネントを使用する必要があります。

Text コンポーネントの中にColor という色を指定するパラメータがありますので、このパラメータを変更します。グラデーションになっている領域があるのでここを左クリックし、変更したい色に設定しなおします。

テキストの内容を変更する

Text コンポーネントの中のText というパラメータを変更すると表示するテキストの内容を変更することができます。また、テキストの大きさを変更したい場合はText コンポーネントの中のSize というパラメータを変更します。

テキストの中身を変更する際、長いテキストを設定したり、テキストのサイズを大きくしすぎるとテキストの一部しか表示されなくなります。実はテキストはRectTransform で示される領域にしか表示することができません。

表示する範囲を広げたい場合はRectTransform のパラメータを変更しましょう。パラメータの変更はInspector のパラメータを直接変更しても良いですし、Scene ウィンドウにて直感的な操作でRectTransformの範囲を変更してもOKです。

テキストの見た目を改善する

もう少しテキストを見やすくしていきましょう。テキストの右揃え・中央揃え・左揃えをすることもできます。また、上下方向にも同様に上揃え・中央揃え・下揃えすることも可能です。

これでもまだ見づらい状況です。ゲームの画面とテキストとを区別しづらいのが原因です。特にゲームの画面が複雑になってくるとこの問題が目立つようになってきます。

この問題を解消するため、テキストに背景を設定するようにします。

Canvasオブジェクトかその子オブジェクトを選択し、右クリック→UI→Panel と選択してパネルオブジェクトを生成します
パネルオブジェクトを生成した直後は画面全体にパネルが広がっている状態ですので、パネルのサイズを適宜調整していきます
パネルオブジェクトをテキストオブジェクトその他前景オブジェクトの背面に設置するため、テキストオブジェクトらをパネルオブジェクトの子オブジェクトにします

なお、パネルのサイズを変更する時には注意が必要で、パネルオブジェクトの下に子オブジェクトがぶら下がっている時にパネルのサイズを変更すると子オブジェクトの位置が変化してしまいます。（パネルの位置だけを変更するのであれば問題ありません。）

そのため、パネルのサイズを変更する場合は以下の手順で変更するようにします。（もしくは、パネルのサイズを変更した後に子オブジェクトの配置を手動で修正する。）

パネルオブジェクトの子オブジェクトをパネルオブジェクトの下から外して別の階層に移す
パネルのサイズを変更する
1. で別階層に移した子オブジェクト群をパネルオブジェクトの下に戻す

あとはパネルの色を変えて見た目を整えましょう。パネルの色には透明度（α成分）も含まれています。透明度を調節してパネル前面のテキストの見やすさと背景の映り込み度合いとのバランスが取れるようにしましょう。

スクリプトでテキストの中身を変更する

コンポーネントの中の各種パラメータはプログラムを書くことでゲームの実行中に変更することができます。表示するテキストの中身もゲームの実行中に変化させることが可能です。

using UnityEngine;
using UnityEngine.UI;

public class ChangeText : MonoBehaviour
{
    [SerializeField]
    Text _label; 

    void Update()
    {
        int count = (int)(Time.time);
        _label.text = $"んにゃ？ x {count} @ {Time.time}"; 
        _label.color = Color.red;
    }
}