【Unity】TextMeshProで使えるリッチテキストタグ

使用しているTextMeshProのバージョン

TextMeshPro 3.0.6

文字列にリッチテキストタグを仕込む

HTMLではテキストの途中で色や大きさを変えたりできますが、

TextMeshProでも表示するテキストにタグを仕込むことで

装飾(マークアップ)することが出来ます。

タグの一覧

英語のサイトですが、TextMeshProの開発元で確認できます。

数が多いので、ゲーム開発に使えそうなタグをピックアップしてみます。

ゲーム開発に使えそうなタグ

色

色の英語名
#で始まるRGB値
#で始まるRGB値+不透明度

を指定することで文字列中に色を変更することが出来ます。

<color=red>赤</color>
<color=#00FF00>緑</color>
<color=#0000FF80>青</color>

不透明度

#で始まる二桁の16進数

を指定することで以降の文字列の不透明度を変更することが出来ます。

FFで不透明,00で透明になります。

<alpha=#FF>0xFF
<alpha=#80>0x80
<alpha=#40>0x40

書体

で斜体
で太字

になります。

<i>斜体</i>
<b>太字</b>

文字間隔

cspaceの後に単位を指定することで文字の間隔を調整できます。

**emでピクセル単位
**pixでフォント単位

を指定できます。

-を指定することで逆に文字間隔を詰めることも出来ます。

<cspace=1em>フォント単位</cspace>
<cspace=20pix>ピクセル単位</cspace>

行の高さ

line-heightの後に単位を指定することで行の高さを調整できます。

**%でパーセンテージ指定
**pixでピクセル単位
**emでフォント単位

で指定できます。

1行目
<line-height=120%> 2行目
<line-height=60pix> 3行目
<line-height=3em> 4行目

大文字,小文字

lowercaseで小文字
uppercaseで大文字
smallcapsでは、全て大文字で表示されますが、小文字で入力された文字は小さく表示されます。

<lowercase>TextMeshPro</lowercase>
<uppercase>TextMeshPro</uppercase>
<smallcaps>TextMeshPro</smallcaps>

インデント

インデントとは行頭にスペースを挿入することで字下げする事です。

C#のスクリプトを書く際にも見やすくするためインデントを使っていると思います。

indentの後に単位を指定することでインデント幅を指定できます。

**%でパーセンテージ
**emでフォント単位
**pixでピクセル単位

を指定できます。

1行目
<indent=10％>2行目</indent>
<indent=1em>3行目</indent>
<indent=100pix>4行目</indent>

マーク

#の後にRGB値

で文字を強調して表示することが出来ます。

不透明度も指定することが出来ます。

こんな感じで<mark=#ff0000>強調</mark>できます

その他

他にもありますが、ここでは省略します。

気になる方はいろいろ試してみてください。

タグを無効にする

TextMeshProコンポーネントのExtra SettingsにあるRich Textのチェックを外すと

リッチテキストタグを無効にし、入力された文字列をそのまま表示することが出来ます。

タグを除いた文字列を取得する

リッチテキストタグを含む文字列の長さを求めると、当然タグを含んだ長さになります。

タグを除いた、表示されている文字列の長さのみを取得したい場合、

TextMeshProコンポーネントのGetParsedText() を使用します。

事前にForceMeshUpdate()を呼ぶ必要があります。

public class FontTest : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI _text;

    private void Start()
    {
        _text.text = "<color=red>赤</color>";
        _text.ForceMeshUpdate();

        var parsedText = _text.GetParsedText();
        
        Debug.Log(parsedText);
    }
}

コンソールには、リッチテキストタグを除いた「赤」と表示されます。

TextMeshPro側でRichTextを無効にしている場合は、タグも一緒に出力されます。

GARNET LOG