Unity Term Book
アニメーションと UI

TextMesh Pro

TextMesh Pro は Unity の高度なテキストパッケージです。SDF で任意サイズでも鮮明な字形を描き、リッチテキストタグやフォントスタイル、マテリアルプリセットで複雑な文字演出が可能です。図解とシミュレーターでタグと表示品質をすぐ試し、UI 表現の質をしっかり高められます。自学にも最適です。

想像してみてください...

古い Text コンポーネントはビットマップフォント——字形が画像なので拡大するとぼやけます。TextMesh Pro は SDF(Signed Distance Field)——ベクターのように各文字が数学関数で、どのサイズでもシャープです。リッチテキストタグは HTML 風: 文字列に color=red と書けばその範囲が赤になり、追加の Text コンポーネントは不要です。

概念の詳細

SDF Rendering: TextMesh Pro はフォントから SDF texture を作ります——各ピクセルが最も近い字形エッジまでの距離を保持します。描画時にシェーダーが任意スケールでシャープな輪郭を再構築します。1 つのアトラスで 8px〜200px を再ビルドなしで表示できます。

Font Asset が TMP の中核アセット——SDF テクスチャとメタデータ(スペーシング、カーニング、字形)。作成: Window → TextMeshPro → Font Asset Creator。元フォント(.ttf/.otf)、文字セット(ASCII、Unicode 範囲)、アトラスサイズを選びます。Dynamic Atlas(2021+)なら必要に応じて字形を追加——CJK に最適です。

Rich Text Tags はインラインマークアップです: <b><i><color=#ff0000><size=24><sprite index=0><gradient><link=“url”>… 1 文字列でリッチな書式——台詞、スキルツールチップ、ダメージ数字。

TMP には 2 つのコンポーネントがあります: TMP_Text (抽象ベース)と、その具象 TextMeshProUGUI (Canvas UI)および TextMeshPro (World Space/3D)。常に TMP_Text を参照すれば同じコードが両方で動きます。

リッチテキストタグの参照

Tag結果
<b>, <i><b>Bold</b> <i>Italic</i>Bold Italic
<color><color=red>danger</color>danger
<color=#hex><color=#f97316>fire</color>fire
<size><size=20>large</size>large
<sprite><sprite="icons" name="coin">🪙 (アトラスの sprite)
<link><link="item_001">Sword</link>Sword
<alpha><alpha=#88>ghost</alpha>ghost
<mark><mark=#ffff00aa>highlight</mark>highlight

ハンズオン手順

1

TMP Essential Resources をインポート

Window → TextMeshPro → Import TMP Essential Resources。TMP 動作に必須(フォント、シェーダー、設定)。

2

カスタムフォントから Font Asset を作成

Window → TMP → Font Asset Creator → .ttf を選び、Atlas Resolution 512×512 以上 → Generate → Save。

3

TMP Text コンポーネントを追加

Canvas なら UI → Text - TextMeshPro。World Space なら Add Component → TextMeshPro。Font Asset を割り当てます。

4

Inspector でリッチテキストを使う

"Enable Rich Text" はオンのまま(デフォルト)。Text フィールドにタグを直接入力します。

5

日本語/CJK 文字を追加

Font Asset Creator → Character Set → Custom Range → Unicode 範囲を入力。または Dynamic Atlas Mode を使います。

インタラクティブシミュレーター

リッチテキストタグを入力してプレビュー——Unity Inspector の TMP フィールドに近い体験です。

Preview

コード例

基本

スクリプトから TMP_Text——テキスト、リッチテキスト、色を実行時に設定。

using UnityEngine;
using TMPro; // TextMesh Pro namespace

public class TMPController : MonoBehaviour
{
  // TMP_Text works for both UI and World Space
  [SerializeField] TMP_Text titleText;
  [SerializeField] TMP_Text damageText;

  public void ShowDamage(int amount, bool isCrit)
  {
      if (isCrit)
      {
          // Critical hit: gold, larger type
          damageText.text = $"<color=#fbbf24><size=1.5em><b>CRIT {amount}</b></size></color>";
      }
      else
      {
          damageText.text = $"<color=red>-{amount}</color>";
      }
  }

  public void SetTitle(string name, int level)
  {
      // TMP_Text.SetText() can be cheaper than assigning .text
      titleText.text = $"{name} <size=0.7em><color=#64748b>Lv.{level}</color></size>";
  }

  // Vertex color without tags
  public void SetColor(Color c)
  {
      titleText.color = c;
  }
}

コード例

上級

タイプライター効果——コルーチンで文字を 1 つずつ表示(タグ込み)。

using UnityEngine;
using System.Collections;
using TMPro;

public class TypewriterEffect : MonoBehaviour
{
  [SerializeField] TMP_Text dialogText;
  [SerializeField] float charDelay = 0.04f;

  Coroutine current;

  public void ShowText(string text)
  {
      if (current != null) StopCoroutine(current);
      current = StartCoroutine(TypeRoutine(text));
  }

  IEnumerator TypeRoutine(string text)
  {
      dialogText.text = text;
      dialogText.ForceMeshUpdate(); // Rebuild the mesh immediately

      TMP_TextInfo info = dialogText.textInfo;
      int total = info.characterCount;

      // Hide every character via alpha
      for (int i = 0; i < total; i++)
      {
          SetCharAlpha(i, 0);
      }

      // Reveal one by one
      for (int i = 0; i < total; i++)
      {
          SetCharAlpha(i, 255);
          dialogText.UpdateVertexData(TMP_VertexDataUpdateFlags.Colors32);
          yield return new WaitForSeconds(charDelay);
      }
  }

  void SetCharAlpha(int charIdx, byte alpha)
  {
      TMP_TextInfo info = dialogText.textInfo;
      if (charIdx >= info.characterCount) return;
      int matIdx = info.characterInfo[charIdx].materialReferenceIndex;
      int vertIdx = info.characterInfo[charIdx].vertexIndex;
      Color32[] colors = info.meshInfo[matIdx].colors32;
      for (int k = 0; k < 4; k++) colors[vertIdx + k].a = alpha;
  }
}

📌 要点

  • SDF: 1 アトラスから任意サイズでシャープな文字
  • TextMeshProUGUI: Canvas UI、TextMeshPro: World/3D
  • TMP_Text(ベース)を参照すれば 1 スクリプトで両方対応
  • textInfo がすぐ必要なら ForceMeshUpdate()
  • 大きな文字セット(日本語、CJK)には Dynamic Atlas Mode

⚠️ よくあるミス

  • ❌ 文字が □(豆腐)になる

    Font Asset にその文字の字形がない

    ✅ 対象言語をカバーする Unicode 範囲で Font Asset を再生成する

  • ❌ リッチテキストタグが効かない

    TMP コンポーネントで Enable Rich Text がオフ

    ✅ Inspector → Extra Settings → Enable Rich Text = ON