【Unity】TextMeshProでかっこいいアウトラインフォントを表示する

アウトライン(縁取り)があると、背景によらず文字が読みやすくなるため、
ゲーム開発では必須のテクニックとなっています。

今回はアウトラインの設定と、ポイントにわかりやすくまとめました。

TextMeshPro自体の使い方や、日本語表示などについてはこちらをチェック

事前準備

アウトラインの設定はマテリアルプリセットに含まれるため、
何も考えずに編集してしまうと、同じ Material Preset を参照しているすべてのテキストが変更されて悲惨なことになります。

それを回避するために、新しい Material Preset を作りましょう

Material Presetの新規作成

Font Asset ファイルの中には Material と、 Texture Atlas が含まれています。
そこに含まれるMaterialが Material Preset なので、コピペします。

新規にMaterial Presetができたら、名前を変更します。
このとき、名前は フォントアセット名 から始まる必要があります。

上の例の場合、フォントアセット名が ZenAntiqueSoft-Regular SDF なので、
マテリアルプリセットは ZenAntiqueSoft-Regular SDF Outline となります。
フォントアセット名から始まらない場合は、
TextMeshProのインスペクターから選択できなくなります。

シェーダーの設定

マテリアルプリセットには、2種類のシェーダーがあります。

TextMeshPro カテゴリの直下にあるものと、TextMeshPro/Mobile 下にあるものです。
TextMeshPro/Distance Field は、Face, Outlineの他に、Underlay, Lighting, Glow が指定できますが、
TextMeshPro/Mobile/Distance Field は、Face, Outline, Underlay しか指定できません。
こちらは、用途によって切り替えると良いです。

アウトラインを付ける

アウトラインを付けるには、マテリアルプリセットの Outline -> Thickness を0より大きくします。

文字が潰れる

そのまま Thickness のみを大きくすると、文字の内側が潰れてしまいます。

アウトラインなしのテキストを重ねる

すぐ思いつく対処として、アウトラインの内テキストを上から重ねるという方法があります。

比較的に綺麗に表示されますが、TextMeshProが 2回レンダリングされるのでよろしくないです。

そこで、Face -> Dilate の値を調整してフォントの内側領域を調整します。

Face -> Dilateの値で文字の太さを調整する

Face -> Dilateは、フォントの太さを調整できるパラメータです。
アウトラインの内側に食い込んだ分を、Dilateで太さ調整して外側に押し出しているようなものです。

だいたい、Thickness と Dilateは同じくらいの値にするとアウトラインがかっこよく表示されるようです。

まとめ

TextMeshProでいい感じにアウトラインを表示する方法を紹介しました。

• 既存のMaterial Presetを直接編集しない
• フォントアセットのマテリアルプリセットを複製(コピペ)して扱う
• Outlineの太さは Thickness で指定する。
• 内側がつぶれるときは Dilate を Thickness と同じくらいの値にする

この他にも、Underlay, Lighting, Glow を調整することでいろんなテキスト表現ができます。
TextMeshProを使いこなして、ゲーム中にかっこいいフォントを表示していきましょう！