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 |
ハンズオン手順
TMP Essential Resources をインポート
Window → TextMeshPro → Import TMP Essential Resources。TMP 動作に必須(フォント、シェーダー、設定)。
カスタムフォントから Font Asset を作成
Window → TMP → Font Asset Creator → .ttf を選び、Atlas Resolution 512×512 以上 → Generate → Save。
TMP Text コンポーネントを追加
Canvas なら UI → Text - TextMeshPro。World Space なら Add Component → TextMeshPro。Font Asset を割り当てます。
Inspector でリッチテキストを使う
"Enable Rich Text" はオンのまま(デフォルト)。Text フィールドにタグを直接入力します。
日本語/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