20241/12

UnityでTextMeshProを使ってテキストをリッチに加工する

2024年1月12日20,608 views

ころもちゃん

テキストを盛っておしゃれな文字を表示したい！

・TextMeshProで文字を加工する手順
・TextMeshProでできる文字加工例（アウトライン、ベベル、枠線、影付け、Glow、グラデーション、テクスチャを貼る）

TextMeshProとは何だっけ？という人はこちらの記事を見てください。

文字加工用のマテリアルを作ろう

前提として、TextMeshProは、使用するフォントをまとめた大きなテクスチャ画像から、対応するテキストを読み取って表示します。TextMeshProのテキストを加工するには、この表示したテクスチャに対してどのような加工をするか、というマテリアルが必要になるわけです。

マテリアル、テクスチャについては、こちらの記事でも簡単に解説しています。

今回の解説は、こちらのリンクのM+ 1p(Bold700)フォントを使用します。

加工するには、マテリアルを新規で作成します。

ただ、テキストオブジェクトの加工は、似た系列のパラメータ違いのものが多数必要になることが多いです。
例えば、Outlineの太さだけ変えた加工テキストが欲しい場合など。

パラメータ違いで選択が可能な、「マテリアルバリアント」を使ってパラメータ違いのフォント加工の種類を増やす方法を紹介します。

作成するにはTextMeshProのフォントが保存しているフォルダに行きます。

マテリアル（青い球のアイコン）を選択して、右クリック。
「作成」 > 「マテリアルバリアント」を選択すると、新規のマテリアルバリアントが作成されます。

新規で作ったマテリアルバリアントの名前は適当なものに変えておきましょう。

どのマテリアルをこのテキストに設定するかは、インスペクタウィンドウの「MaterialPreset」から設定できます。

同じマテリアルを複数のテキストオブジェクトで使っている場合、一つに変更を加えるとすべてが変更されてしまいます。
個別にテキストの加工内容を変更したい場合は、必ずマテリアルを新規に作ってから変更しましょう。

まずは、一番よく使う文字のアウトラインです。マテリアルの、Outlineから、アウトラインの色と太さを調整します。

アウトラインを付ける場合は太字のフォントにすることをオススメします。細文字にアウトラインを付けると逆に見づらくなるため、注意が必要です。

こちらはUnderlayを設定します。通常影は右下にあることが一般的なので、Xは0から1、Yは、-1から0がいいでしょう。

Lightingの項目で設定します。

見た目に影響を大きく与える主な設定値は以下のとおり。