はじめに
UnityのUIシステムであるuGUI（Unity GUI）には、テキストを表示するためのコンポーネントとしてText (Legacy) が用意されています。
Text (Legacy) は、Unity 4.6で導入された古いUIテキストコンポーネントであり、Unity 2019以降では TextMeshPro の使用が推奨されています。
しかし、既存プロジェクトの互換性維持や、軽量なUI構築のために、Text (Legacy) を使用するメリットもあります。
本記事では、Text (Legacy) の基本的な使い方について解説します。
Text (Legacy) とは
Text (Legacy) の基本
Text (Legacy) は、Unityの uGUI (User Interface) に含まれるテキスト表示用のコンポーネントです。
ボタンやラベルなど、ゲーム内のUI要素にテキストを表示するために使用されます。
- uGUIに標準搭載されている（Unity 4.6 以降）
- シンプルな構造で軽量
- フォント、サイズ、色、アライメントの設定が可能
- スクリプトから動的にテキストを変更可能
ただし、後述する TextMeshPro の登場により、現在では 非推奨（Legacy） となっています。
それでも 軽量なUI を作成する場合や、既存のプロジェクトとの互換性を保つ ために使用されることがあります。
TextMeshPro との違い
現在のUnityでは、TextMeshPro (TMP) が推奨されています。
Text (Legacy) と TextMeshPro の違いを以下の表にまとめました。
| 項目 | Text (Legacy) | TextMeshPro |
|---|---|---|
| 推奨状況 | 非推奨 | 推奨 |
| 描画方式 | ラスター化フォント | SDF (Signed Distance Field) |
| テキスト品質 | 低品質（拡大すると粗くなる） | 高品質（どんなサイズでも鮮明） |
| スタイリング | フォントサイズ・色のみ | 豊富なエフェクト（影・縁取り・グラデーションなど） |
| パフォーマンス | 軽量 | 最適化されているが、やや重い |
| アイコンの埋め込み | 不可 | 可能 |
| 多言語対応 | 手動でフォント変更が必要 | 言語ごとにフォントアセットを設定可能 |
Text (Legacy) を使うべき場面
- スコア表示や時間の表示など、シンプルなUIテキストを表示したい
- 軽量なUIを構築したい
- 既存プロジェクトとの互換性を保ちたい
- エフェクトなどリッチなテキストが不要
- デバッグ用にテキストを表示したい
TextMeshPro を使うべき場面
- 高品質なフォントレンダリングが必要
- 拡大縮小しても綺麗に表示したい
- 影や縁取り等のエフェクトを多用する
- 複雑なリッチテキストを使用したい
Text (Legacy) の基本的な使い方
Text (Legacy) を使用するには、UI要素を配置するための Canvas が必要です。
もし、シーンに Canvas が無い場合は、Canvas を作成してください。
「ヒエラルキー(Hierarchy)」ウィンドウを右クリック⇒UI⇒キャンバス(Canvas)
を選択して Text (Legacy) を Canvas に追加します。
「ヒエラルキー」ウィンドウの Canvas オブジェクトを右クリック⇒UI⇒古い機能(Legacy)⇒テキスト(Text)
を選択して Text (Legacy) を Canvas に追加します。
Text (Legacy) コンポーネントでは以下の項目を設定できます。
- テキスト (Text)
- フォント (Font)
- フォントスタイル (Font Style)
- フォントサイズ (Font Size)
- 行間隔 (Line Spacing)
- リッチテキスト (Rich Text)
- 整列 (Alignment)
- ジオメトリで整列 (Align By Geometry)
- 水平オーバーフロー (Horizontal Overflow)
- 垂直オーバーフロー (Vertical Overflow)
- サイズ自動調節 (Best Fit)
- 色 (Color)
- マテリアル (Material)
- レイキャストターゲット (Raycast Target)
- レイキャストパディング (Raycast Padding)
- マスク可能 (Maskable)
- 影の追加 (Add Component -> UI -> Effects -> Shadow)
- 縁取りの追加 (Add Component -> UI -> Effects -> Outline)
順番に解説していきます。
テキスト(Text)の内容を変更する
インスペクターからテキストの内容を変更する方法
画像の赤枠部分を、表示したいテキストに書き換えます。
スクリプトからテキストの内容を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.text = "コッコ隊長の勉強部屋";
}
}テキストの内容の変更前と変更後の比較
フォント(Font)を変更する
事前準備としてフォントファイル(.ttf)を用意し、Assets\Fontsフォルダにコピーします。
インスペクターからフォントを変更する方法
画像の赤枠部分をクリックし、使用したいフォントを選択します。
スクリプトからフォントを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
public Font newFont; // インスペクターでアサイン(.ttfを指定)
void Start()
{
myText.font = newFont;
}
}フォントの変更前と変更後の比較
フォントスタイル(Font Style)を変更する
フォントスタイルは、テキストの見た目（装飾）を変更するプロパティです。
以下のスタイルを設定できます。
| スタイル | 内容 |
|---|---|
| Normal | 通常 |
| Bold | 太字 |
| Italic | 斜体 |
| Bold And Italic | 太字＋斜体 |
インスペクターからフォントスタイルを変更する方法
画像の赤枠部分をクリックし、ドロップダウンから使用したいフォントスタイルを選択します。
スクリプトからフォントスタイルを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.fontStyle = FontStyle.BoldAndItalic;
}
}フォントスタイルの変更前と変更後の比較
フォントサイズ(Font Size)を変更する
フォントサイズは、表示されるテキストの大きさをピクセル単位で指定するプロパティです。
インスペクターからフォントサイズを変更する方法
画像の赤枠部分をクリックし、任意の数値を入力します。
スクリプトからフォントサイズを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.fontSize = 128;
}
}フォントサイズの変更前と変更後の比較
行間隔(Line Spacing)を変更する
行間隔は、複数行のテキストを表示する場合に、行と行の間隔を調整するためのプロパティです。
単位はピクセルではなくスケール比（倍率）です。
インスペクターから行間隔を変更する方法
画像の赤枠部分をクリックし、任意の数値を入力します。
スクリプトから行間隔を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.lineSpacing = 1.5f;
}
}行間隔の変更前と変更後の比較
行間隔変更後(0.7)のゲーム画面
行間隔変更後(1.5)のゲーム画面
リッチテキスト(Rich Text)を変更する
リッチテキストは、HTMLに似たタグ構文を使用して、テキストの一部に色・太字・斜体・サイズ変更・下線などの装飾を適用することができる機能です。
使用可能なタグ
| タグ | 意味 |
|---|---|
| <b>…</b> | 太字(Bold) |
| <i>…</i> | 斜体(Italic) |
| <size=数値>…</size> | フォントサイズ変更 |
| <color=色名or#RRGGBB>…</color> | 文字色変更 |
インスペクターからリッチテキストを変更する方法
画像の赤枠部分をクリックし、リッチテキストの有効/無効を変更できます。
スクリプトからリッチテキストを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.supportRichText = true;
}
}リッチテキストのOFFとONの比較
整列(Alignment)を変更する
インスペクターから整列を変更する方法
画像の赤枠部分をクリックし、水平整列と垂直整列を変更できます。
左から順に、水平Left・水平Center・水平Right・垂直Top・垂直Middle・垂直Bottomです。
スクリプトから整列を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.alignment = TextAnchor.MiddleCenter; // 中央揃えに設定
}
}TextAnchorの一覧：
| 定数名 | 意味 |
|---|---|
TextAnchor.UpperLeft | 左上揃え |
TextAnchor.UpperCenter | 上中央揃え |
TextAnchor.UpperRight | 右上揃え |
TextAnchor.MiddleLeft | 左中央揃え |
TextAnchor.MiddleCenter | 中央揃え |
TextAnchor.MiddleRight | 右中央揃え |
TextAnchor.LowerLeft | 左下揃え |
TextAnchor.LowerCenter | 下中央揃え |
TextAnchor.LowerRight | 右下揃え |
整列の変更前と変更後の比較
ジオメトリで整列(Align By Geometry)を変更する
ジオメトリで整列とは、フォントのベースラインや余白を無視して、実際に描画される文字の形を基準にして整列する機能です。
インスペクターからジオメトリで整列を変更する方法
画像の赤枠部分をクリックし、ジオメトリで整列の有効/無効を変更できます。
スクリプトからジオメトリで整列を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.alignByGeometry = true; // ジオメトリで整列を有効にする
}
}水平オーバーフロー(Horizontal Overflow)を変更する
テキストが横方向にコンテナ（RectTransform）からはみ出したときに、どう表示するかを制御する設定です。
インスペクターから水平オーバーフローを変更する方法
画像の赤枠部分をクリックし、ドロップダウンから使用したい設定を選択します。
| 設定値 | 挙動 |
|---|---|
| 折り返し (Wrap) | はみ出したテキストを自動的に改行して納める。 |
| はみ出し許容 (Overflow) | テキストが横方向にはみ出しても表示される。 |
スクリプトから水平オーバーフローを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// 改行して収める
myText.horizontalOverflow = HorizontalWrapMode.Wrap;
// 改行せず、はみ出しても表示する
myText.horizontalOverflow = HorizontalWrapMode.Overflow;
}
}垂直オーバーフロー(Vertical Overflow)を変更する
テキストが縦方向にコンテナ（RectTransform）からはみ出したときに、どう表示するかを制御する設定です。
インスペクターから垂直オーバーフローを変更する方法
画像の赤枠部分をクリックし、ドロップダウンから使用したい設定を選択します。
| 設定値 | 挙動 |
|---|---|
| 切り詰める (Truncate) | テキストが縦方向にはみ出したときに表示されない。 |
| はみ出し許容 (Overflow) | テキストが縦方向にはみ出しても表示される。 |
スクリプトから垂直オーバーフローを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// はみ出した部分は表示しない
myText.verticalOverflow = VerticalWrapMode.Truncate;
// はみ出しても表示する
myText.verticalOverflow = VerticalWrapMode.Overflow;
}
}サイズ自動調節(Best Fit)を変更する
サイズ自動調節とは、テキストのフォントサイズをRectTransformの領域に合わせて自動調節する機能です。
インスペクターからサイズ自動調節を変更する方法
画像の赤枠部分をクリックし、サイズ自動調節の有効/無効を変更できます。
有効にすると、「最小サイズ」と「最大サイズ」が追加されます。フォントサイズはこの範囲内で自動調節されます。
スクリプトからサイズ自動調整を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.resizeTextForBestFit = true; // サイズ自動調節をON
myText.resizeTextMinSize = 12; // 最小サイズ
myText.resizeTextMaxSize = 36; // 最大サイズ
}
}色(Color)を変更する
インスペクターから色を変更する方法
画像の赤枠部分をクリックし、パレットから使用したい色を選択します。透明度も設定可能です。
スクリプトから色を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// 赤色に設定（RGB: 1, 0, 0）
myText.color = Color.red;
// カスタムカラー（紫色、半透明）
myText.color = new Color(0.5f, 0f, 0.5f, 0.5f); // R,G,B,A（0～1）
}
}マテリアル(Material)を変更する
テキストの描画スタイルやエフェクト（影、アウトライン、グラデーション）を制御するための設定オブジェクトです。
インスペクターからマテリアルを変更する方法
画像の赤枠部分をクリックし、使用したいマテリアルオブジェクトを選択します。
スクリプトからマテリアルを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
public Material customMaterial; // 事前に作成したMaterialをインスペクターでアサイン
void Start()
{
myText.material = customMaterial;
}
}レイキャストターゲット(Raycast Target)を変更する
レイキャストターゲットとは、マウスやタッチ操作（クリック・タップ）などのイベントが当たる対象にするかどうかを制御する設定です。
| 値 | 意味 |
|---|---|
| ON | Textに対してクリック判定が当たるようになる。 |
| OFF | Textが透過され、背後にクリック判定が通るようになる。 |
インスペクターからレイキャストターゲットを変更する方法
画像の赤枠部分をクリックし、レイキャストターゲットを有効/無効に設定することができます。
スクリプトからレイキャストターゲットを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.raycastTarget = true; // レイキャストを有効化
}
}レイキャストパディング(Raycast Padding)を変更する
レイキャストパディングとは、レイキャストの判定領域（当たり判定の領域）をテキストの矩形よりも拡大・縮小できる機能です。
※通常はRectTransFormの範囲がレイキャスト対象です。
インスペクターからレイキャストパディングを変更する方法
画像の赤枠部分をクリックし、レイキャストパディング（左・下・右・上）に任意の値を設定することができます。
単位はピクセルです。正の値を設定すると判定範囲が広がり、負の値を設定すると判定範囲が狭くなります。
スクリプトからレイキャストパディングを変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// 左10px、右10px、上5px、下5px パディングを追加
myText.raycastPadding = new Vector4(10f, 5f, 10f, 5f);
}
}マスク可能(Maskable)を変更する
UIのマスク（MaskコンポーネントやRectMask2D）で、このTextを隠せるようにするかどうかを制御するプロパティです。
| 値 | 意味 |
|---|---|
| ON | マスクで切り取り・隠される。 |
| OFF | マスクがあっても無視して表示される。 |
インスペクターからマスク可能を変更する方法
画像の赤枠部分をクリックし、マスク可能を有効/無効に設定することができます。
スクリプトからマスク可能を変更する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
myText.maskable = true; // // マスクの影響を受ける
}
}影を設定する(Add Component -> UI -> Effects -> Shadow)
UI の Shadow コンポーネントは、Text や Image などの Graphic コンポーネントに擬似的な影を追加するエフェクトです。
インスペクターから影を追加する方法
- インスペクターのコンポーネントを追加(Add Component)ボタンをクリック
- UI -> Effects -> Shadow をクリック
Shadow コンポーネントの設定項目：
| 項目 | 説明 |
|---|---|
| Effect Color | 影の色 （黒、グレー、赤など） |
| Effect Distance | 影のオフセット （1,-1で右下に1pxの影を付ける） |
| Use Graphic Alpha | 元のTextのアルファ値を影に適用する （ONにすると透明な部分の影も透明になる） |
スクリプトから影を追加する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// Shadow を追加
Shadow shadow = myText.gameObject.AddComponent<Shadow>();
// 影の色
shadow.effectColor = new Color(0, 0, 0, 0.5f); // 半透明の黒
// 影のずれ距離（右下に5px）
shadow.effectDistance = new Vector2(5f, -25);
// アルファを使用するか（ON推奨）
shadow.useGraphicAlpha = true;
}
}影の追加前と追加後の比較
縁取りの追加(Add Component -> UI -> Effects -> Outline)を変更する
UI の Outline コンポーネントは、Text や Image などの周囲に枠線を描くエフェクトです。
インスペクターから縁取りを追加する方法
- インスペクターのコンポーネントを追加(Add Component)ボタンをクリック
- UI -> Effects -> Outline をクリック
Outline コンポーネントの設定項目：
| 項目 | 説明 |
|---|---|
| Effect Color | 縁取りの色 （黒、グレー、赤など） |
| Effect Distance | 縁取りのオフセット （1,-1で斜め方向に少しずらす） |
| Use Graphic Alpha | 元のTextの透明度（アルファ値）を縁取りに適用する （ONにすると透明な部分の縁取りも透明になる） |
スクリプトから縁取りを追加する方法
using UnityEngine;
using UnityEngine.UI;
public class TextManager : MonoBehaviour
{
public Text myText; // インスペクターでアサイン
void Start()
{
// Outline コンポーネントを追加
Outline outline = myText.gameObject.AddComponent<Outline>();
// 縁取りの色（赤）
outline.effectColor = new Color(255f, 0f, 0f, 1f);
// 縁取りのオフセット（縁の太さ調整）
outline.effectDistance = new Vector2(3f, -1f);
// テキストのアルファに従う
outline.useGraphicAlpha = true;
}
}縁取りの追加前と追加後の比較
Text (Legacy) のパフォーマンス最適化
UIのテキストは、ゲーム全体のパフォーマンスに影響を与えるため、適切な最適化を行う必要があります。
Text (Legacy) のパフォーマンスに関する基本知識
Text (Legacy) の描画は、動的なUI更新が頻繁に発生すると負荷が高くなります。
その理由は、以下の2つです。
- テキストの変更ごとに再描画が発生する
uiText.text = "スコア：" + score.ToString();のように頻繁に更新すると、毎フレームテキストが再描画されるため負荷が高くなる - フォントのレンダリング処理に計算コストがかかる
Best Fitを使用すると、Unityはリアルタイムでフォントサイズを計算するため負荷が高くなる
描画負荷を減らすテクニック
テキストの更新回数を最小限にする
テキストを毎フレーム更新するのを避け、値が変化した場合のみ更新するようにしましょう。
例：
// 改善前（非効率なコード）
void Update()
{
uiText.text = "スコア：" + score.ToString(); // 毎フレーム更新 ⇒ 負荷が高い
}
// 改善後（効率的なコード）
private int preScore = -1;
void Update()
{
if(score != preScore){
uiText.text = "スコア：" + score.ToString(); // スコアが変更されたときのみ更新
preScore = score;
}
}不要なUIの更新を避ける
Canvas の更新は、子オブジェクトのUI全体に影響をあたえるため、頻繁に変更されるUI（スコア、タイマーの表示など）は Canvas を分けましょう。
Best Fit の使用を最小限にする
Best Fit を有効にすると、Unityはリアルタイムでフォントサイズを計算するため、描画負荷が増加します。
処理が重たい場合は、Best Fit の使用を最小限に抑え、固定サイズのフォントを使用するように変更しましょう。
テキストの影や縁取りの使用を抑える
影 (Shadow) や縁取り (Outline) は、テキストを視認しやすくしますが、描画負荷が増加します。
処理が重たい場合は、影や縁取りの使用を必要最小限に抑えましょう。
まとめ
UnityのテキストUIは、Text (Legacy) から TextMeshPro へ移行しておりますが、用途によっては Text (Legacy) も十分に活用可能です。
適切なUIコンポーネントを選択することで、開発コストを抑えつつ最適なUIパフォーマンスを実現できます。
コメント