【Unity】TextMesh ProでOutlineなどの設定を複数保持する方法

TextMesh Proを使っているときに、インスペクターウィンドウの下部でOutline、Faceなどの設定を行うことができます。

が、同じフォントでもちょっと見た目を変えたいなーと思ってうっかりOutlineを変更したら、全てのテキストに影響が出ちゃった！　なんてこともあります。

「まさかフォントアセットを複数作る必要が……？」

と不安になったあなた。ご安心ください。同じフォントアセットに対して、Outlineなどの設定を複数保持することができるんです。その機能とは、Material Preset(マテリアル プリセット)。

使いたい場面ごとにこのMaterial Presetを用意しておくことで、設定を使いまわせるし、切り替えられるしでとても便利なんです。というわけでこの記事ではMaterial Presetについて解説します。

環境

macOS 10.15 Catalina

Unity2018.4.23f1

Material Presetとは

TextMeshProのMaterial Presetとは、テキストに対する装飾の設定を保持するためのアセットファイルです。文字の輪郭を装飾するOutline、文字の表面を装飾するFaceなどの設定を保持しておくことができます。

このファイルは、TextMesh ProのFont Asset(フォントアセット)を作成した時に一緒に1つ作成されます。通常は表示されていないのですが、Font Assetの右側にある右向きの三角マーク [▶︎] をクリックして表示内容を広げることでそこに含まれていることが分かります。

Material Presetの設定はプロジェクトウィンドウからアセットファイルを選択することでインスペクターウィンドウで調整することができますし、『Text Mesh Pro UGUI』コンポーネントの下部で調整することもできます。

例えば装飾がない場合とある場合の比較は以下のとおり。下の文字はOutline、Glowを使っています。Unityの中で表現を使い分けられる点がとても便利です。

ただ、単純に『Text Mesh Pro UGUI』コンポーネントから設定を変更してしまうと、同じMaterial Presetを使っている『Text Mesh Pro UGUI』コンポーネント全てで設定が反映されてしまいます。そのため、新しくカスタマイズできるようにMaterial Presetを作成しましょう。

Material Presetの作成方法

Material Presetを作成する場合は、まずフォントアセットに含まれているMaterial Presetを選択します。

インスペクターウィンドウでは左上に表示されているアイコンを右クリック(あるいは二本指タップ)してコンテキストメニューを開き、[Create Material Preset] を選択します。

作成されたMaterial Presetは好きな名前をつけます……と言いたいところですが、『Font Asset』で指定しているフォントアセットの名前を含めるようにします。ここで設定した名前は『Text Mesh Pro UGUI』コンポーネントの『Material Preset』のプルダウンで選択する際に表示されますが、フォントアセットの名前が含まれていない場合は一覧に表示されないので注意が必要です。

例えばボタン用のテキストのためにMaterial Presetを用意する、メッセージ本文で表示するテキストのためにMaterial Presetを用意するなど、場面ごとにMaterial Presetを用意しておくことで、ゲーム全体で一貫性を持った表現が可能になります。

Material Presetの作例

Material Presetの値を変更していくつか例を紹介します。見た目の例については、「Photoshop レイヤースタイル」などでググるとサンプルがたくさん見つかると思いますので、そうしたサンプルを見ながらいい感じのプリセットを作ってみてください。

シンプルなアウトライン

フォントの形を活かしてシンプルに縁取り。

『Outline』の『Thickness』を [0.6] に設定しています。

使用フォント: Arvo (Designed by Anton Koovit)

Google Fonts

 

52145 Pockets

Google Fonts

https://fonts.google.com/specimen/Arvo#standard-styles

Making the web more beautiful, fast, and open through great typography

ライセンス: SIL Open Font License (OFL) https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

文字を光らせてみる

Glow(グロー)を使って文字を光らせてみます。背景が明るいとただの白になってしまうため、暗い背景の上に文字を配置しています。明るい背景の「み」の部分が光っているように見えないのに注目です。

『Text Mesh Pro UGUI』コンポーネントでは縦書きにする機能はありませんが、1行に1文字しか入らない幅(Width)に設定して縦書き風に表現しています。この方法だと句読点は正しく表示されないので注意。

Glowは色を加算する方向(白に近づける方向)で計算します。なので、背景が明るい場合は元々白に近く、Glowの部分が白のように見えてしまうのです。逆に背景が暗いと光っている感が出てきます。

設定は以下の通りです。

Face

Glow

使用フォント: 幻ノにじみ明朝 (フォントな)

フォントな

 

5 Users

41 Pockets

幻ノにじみ明朝のフリーフォントダウンロード

http://www.fontna.com/blog/1912/

幻ノにじみ明朝はどんなフリーフォント？ フリーフォントの幻ノにじみ明朝フォントは無料でダウンロードできる書体。…

ライセンス: SIL Open Font License (OFL) https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

ベベルを使って立体感を出す

ベベル(Bevel: 面取り)を使うと、平面的なテキストの面を削ったような表現となり、立体的に浮き出ているような表現になります。例えば以下の例は、上が通常の装飾なしのテキスト、下がベベルを使ったテキストです。Photoshopを使わなくてもUnityの中でこれくらいの装飾ができるというのは嬉しい限りです。

デザイナーさんにテキストを装飾した画像を作ってもらって、それをUnityにインポートして使っていた部分が、TextMesh Proを使って一部代替できるかもしれません。修正はUnityの中で済むので、画像ファイルの再インポートなどの手間が減ります。

もちろん全て代替するのは無理ですが、TextMesh Proの機能で表現できる軽微な装飾でよければデザイナーさんの手間も減らせるかと思います。

上のサンプルではFace、Outline、Underlay、Lightingの4パートを設定しています。Lightingの中にBevelの設定が含まれます。

設定は以下の通りです。

Face

Outline

Underlay

Lighting

Bevel

Local Lighting

Environment Map

使用フォント: ロゴタイプゴシック (フォントな)

フォントな

 

682 Shares

308 Users

470 Pockets

フリーフォント　ロゴたいぷゴシックのダウンロード　

http://www.fontna.com/blog/1226/

ロゴたいぷゴシックはどんなフリーフォント？ フリーフォントのロゴたいぷゴシックは無料でダウンロードでき商用・非…

ライセンス: M+ License

サンプルを足掛かりに

このページでは3つの本当にシンプルなサンプルを紹介しました。

これらのサンプルを足掛かりに、色々と試してみてもらうと表現の引き出しも増えていくと思います。多分やり始めるといくらでもできちゃうくらい楽しい部分なので、Unityの中でテキストの装飾を試してみてください。

他にもサンプルを見る場合はこの記事もご参照くださいな。

エクスプラボ

【Unity】TextMeshProのMaterial Preset設定サンプル集

https://ekulabo.com/tmpro-material-preset-samples

UnityのTextMesh ProではMaterial Presetを用意することで様々な装飾を行うことができます。キャラクターのセリフなどを表示する本文から、ボタンのUIとして表示する文字、果てはタイトルとして表示するロゴなど、うまく使えば外部のツールで画像を作る手間を減らすこともできます。

まとめ

このページではTextMesh Proを使っているときに設定可能なOutline、Faceなどの設定を保持するアセットファイルであるMaterial Presetの作り方を紹介しました。

また、Material Presetにおける設定についても3つのサンプルを紹介したので、ぜひご自身でも試してみてください。