バッテラのハローワールド研究室

エンジニア、プログラミングに関する情報を掲載中!

TextMeshProでテキスト表示する (デザイン編)

はじめに

こんにちは、バッテラです。

基本編でFontAssetを作って日本語表示するまでをやりました。

www.m2game.net

今回はTextMeshProでのデザインについて調べたことを共有したいと思います。

環境

  • MacOS BigSur (11.4)
  • Unity (2020.3.14f1)
  • TextMeshPro (3.0.6)

【エフェクト】アウトラインをつける

アウトラインは文字の外側に輪郭をつけることをいいます

TextMeshProでは輪郭の太さや色を設定することができます。

単色のテキストよりアウトラインを使った2色にするとより見た目がリッチになります

アウトラインをつけるには、Textオブジェクトをクリックして

Inspectorビューの一番下にスクロールしていくと Shader の項目があると思います。

その中の Outline の箇所をいじっていきます。

f:id:m2game:20220126154452p:plain

Color : 色
Tickness: 太さ
Texture: 未調査

アウトラインをつけるとこんな感じのテキストができます

f:id:m2game:20220126154341p:plain:w600

Shaderいじると他のテキストにも反映される?

アウトラインなどの【エフェクト】はマテリアル単位で共有されるものになっているようです。

仮に2つTextゲームオブジェクトがあり同じマテリアルを使っているとした場合、

片方のアウトラインを変えたつもりでももう片方も同時に変わっちゃいます。

f:id:m2game:20220126154940p:plain

ただしフォントサイズやフォントカラーはマテリアルではなくTextコンポーネントが持つ独立したパラメータであるため、影響は受けません。

アウトラインのデザインをゲームオブジェクトごとで変えたいという場合は、

マテリアルを量産するかしかないと思います。

マテリアルを作る方法

TextMeshProのマテリアルは普通のマテリアルとは作り方が違います。

FontAssetを作った段階でマテリアルが1個できてます。

そのマテリアルから複製するようなことができます。

下図参考にマテリアルを選択した状態で、インスペクタービュー上のアイコンを右クリックするとメニューが表示されます

f:id:m2game:20220126154904p:plain

その中の Create Material Preset をクリックします

FontAssetと同じディレクトリに マテリアルが複製されています。

そうするとTextゲームオブジェクトの Material Preset のプルダウンの項目が増えています

f:id:m2game:20220126154919p:plain

これでゲームオブジェクトごとにマテリアル(デザイン)を変えられます。

複製した分増プルダウンの選択肢が増えていきます。

複製したらついでにマテリアルの名前を変えたいと思うのですが、

注意点ありまして、

フォント名が頭についていないとプルダウンの項目として表示されませんでした。

なので、

フォント名 + 好きな文字列

という名前になるようにリネームしましょう。

おわりに

とりあえずアウトラインだけですが、今後追加していきます。

それでは、また。

読者登録・Twitterのフォローをしていただけると、ハッピーになります。