Unityで画像の上に文字を表示すると、背景の明るさや色によって文字が読みにくくなることがあります。
たとえば、白い文字を使っている場合、明るい空や建物の上では文字が背景に溶け込んでしまいます。そのようなときに便利なのが、TextMeshProの文字へ黒い縁取りを付ける方法です。
この記事では、Unity 6.3のTextMeshProを使用し、白い文字の外側に黒い縁取りを付ける手順を解説します。
Material Presetの一覧に作成したマテリアルが表示されない場合の対処法も紹介します。
TextMeshProの文字に縁取りを付けると見やすくなる
今回作成する文字のイメージは、次のようなものです。
- 文字自体は白
- 文字の外側に黒い線を付ける
- 特定のTextMeshProだけに縁取りを適用する
- 同じフォントを使用しているほかの文字には影響させない
TextMeshProでは、文字の縁取りはTextコンポーネント側ではなく、フォントに使用するマテリアル側で設定します。
元のマテリアルを直接編集すると、同じマテリアルを使うほかの文字にも縁取りが反映される可能性があります。
そのため、縁取り専用のMaterial Presetを新しく作成します。
TextMeshProの元マテリアルを探す
まず、Projectウィンドウで、使用しているTextMeshProのFont Assetが保存されているフォルダを開きます。
今回の例では、次のフォントを使用しています。
NotoSansJP-VariableFont_wght SDF
Font Assetの左側にある三角形をクリックして展開すると、子アセットとして次のような項目が表示されます。
NotoSansJP-VariableFont_wght SDF
NotoSansJP-VariableFont_wght Atlas
NotoSansJP-VariableFont_wght Atlas Material
この中から、次のマテリアルを選択します。
NotoSansJP-VariableFont_wght Atlas Material
Font Asset本体ではなく、青い球体のようなアイコンが付いたMaterialを選択してください。
縁取り専用のMaterial Presetを作成する
元のAtlas Materialを選択した状態で、Inspector右上の縦三点メニューをクリックします。
︙
表示されたメニューから、次の項目を選択します。
Create Material Preset
これで、元のTextMeshProマテリアルをもとにした新しいMaterial Presetが作成されます。
Material Presetの名前を変更する
作成したマテリアルは、使用しているFont Asset名を先頭に付けた名前へ変更します。
今回の例では、次の名前にしました。
NotoSansJP-VariableFont_wght SDF - Outline
ここで重要なのは、使用中のFont Asset名を省略せず、マテリアル名の先頭へ入れることです。
使用中のFont Assetが、
NotoSansJP-VariableFont_wght SDF
であれば、縁取り用マテリアルは次のようにします。
NotoSansJP-VariableFont_wght SDF - Outline
次のようにFont Asset名を省略した名前では、TextMeshProのMaterial Preset一覧に表示されないことがあります。
NotoSansJP_Outline
Material Presetを作成できているのに、TextMeshPro側の一覧に出てこない場合は、まずマテリアル名を確認してください。
マテリアルで白文字と黒い縁取りを設定する
作成した縁取り用マテリアルをProjectウィンドウで選択します。
Inspectorに表示されるマテリアル設定から、FaceとOutlineを変更します。
Faceの設定
Faceは文字本体の色です。
Face Color：白
TextMeshProコンポーネント側のVertex Colorを白にしている場合も、Face Colorは白にしておくと分かりやすくなります。
Outlineの設定
Outlineは文字の外側に表示される線です。
Outline Color：黒
Thickness：0.2
まずはThicknessを0.2程度に設定すると、見やすい黒縁になります。
縁取りが太すぎる場合は、次のように小さくします。
Thickness：0.1～0.15
背景の上でまだ文字が読みにくい場合は、少し太くします。
Thickness：0.25前後
太くしすぎると文字内部が狭く見えるため、ゲーム画面を確認しながら調整してください。
作成したMaterial Presetを文字へ設定する
Hierarchyで、縁取りを付けたいTextMeshProオブジェクトを選択します。
InspectorのTextMeshPro - Text (UI)コンポーネントにある、次の項目を確認します。
Material Preset
右側のプルダウンを開くと、次の2つが表示されます。
NotoSansJP-VariableFont_wght Atlas Material
NotoSansJP-VariableFont_wght SDF - Outline
縁取り用に作成した、次のマテリアルを選択します。
NotoSansJP-VariableFont_wght SDF - Outline
これで、選択したTextMeshProだけに黒い縁取りが付きます。
Material Presetの一覧に作成したマテリアルが出ない場合
Material Presetを作成しても、TextMeshProのプルダウンに表示されないことがあります。
この原因の一つとしてマテリアル名があります。
作成直後の名前（一覧に表示されなかった名前）
NotoSansJP_Outline
この名前では、Material Presetの一覧に表示されませんでした。
変更後の名前（一覧に表示された名前）
NotoSansJP-VariableFont_wght SDF - Outline
こちらの名前で、Material Presetの一覧に表示されました。
使用中のFont Asset名を先頭に付けて、
Unityをリフレッシュ（メニューバー＞ Assets＞Refresh）すると、
Material Presetの一覧に表示されました。
名前の変更後は、Unity上部のメニューからリフレッシュを実行した方が良さそうです。
リフレッシュ後、一度別のオブジェクトを選択し、再び対象のTextMeshProオブジェクトを選択してください。
Material Presetのプルダウンを開き直すと、新しいプリセットが表示されます。
Material Presetのプルダウンには作成項目がない
TextMeshProコンポーネントにあるMaterial Presetのプルダウンは、既存のプリセットを選択するためのものです。
そのため、プルダウンを開いても、次の項目は表示されません。
Create Material Preset
Material Presetを新しく作る場合は、Projectウィンドウで元のAtlas Materialを選択し、Material Inspector右上の縦三点メニューから作成します。
操作する場所を間違えないように注意してください。
元のAtlas Materialは直接変更しない
次の元マテリアルへ直接Outlineを設定すると、同じマテリアルを使用するほかのTextMeshProにも縁取りが反映される可能性があります。
NotoSansJP-VariableFont_wght Atlas Material
特定の文字だけに縁取りを付けたい場合は、必ずMaterial Presetを複製して使用します。
今回の例では、次のように使い分けています。
通常の文字
→ NotoSansJP-VariableFont_wght Atlas Material
タイトルなどの強調したい文字
→ NotoSansJP-VariableFont_wght SDF - Outline
この方法なら、通常の会話文やボタン文字には影響を与えず、必要な文字だけを目立たせられます。
縁取りが途中で切れる場合の対処法
Outlineを太くしたときに、文字の端が切れて見えることがあります。
その場合は、まずTextMeshProオブジェクトのRectTransformを少し大きくしてください。
特に、文字が表示領域の端に近い場合は、上下左右に余白を持たせます。
TextMeshPro側にExtra Paddingが表示されている環境では、これを有効にする方法もあります。
ただし、UnityやTextMeshProのバージョンによってInspectorの表示項目が異なるため、見つからない場合はRectTransformを広げる方法で問題ありません。
今回使用した設定例
最終的には、次の設定にしました。
縁取りしたいTextMeshPro
Font Asset
NotoSansJP-VariableFont_wght SDF
Material Preset
NotoSansJP-VariableFont_wght SDF - Outline
Vertex Color
白
Font Style
Bold
縁取り用マテリアル
Face Color
白
Outline Color
黒
Outline Thickness
0.2
この設定により、背景画像が明るい場合でも暗い場合でも、タイトルなどの文字が読みやすくなりました。
まとめ
UnityのTextMeshProで特定の文字だけに縁取りを付ける場合は、元のAtlas Materialを直接編集せず、専用のMaterial Presetを作成します。
手順は次のとおりです。
- 使用中のFont Assetを展開する
- 子にあるAtlas Materialを選択する
- Inspector右上のメニューからMaterial Presetを作る
- Font Asset名を先頭に付けた名前へ変更する
- Face Colorを白、Outline Colorを黒にする
- 対象のTextMeshProへMaterial Presetを設定する
Material Presetの一覧に表示されない場合は、作成したマテリアルの名前を確認してください。
Font Asset名 - Outline
という形式に変更してUnityをリフレッシュすることで、一覧へ表示される場合があります。