TextMesh Pro でタイトル文字列を作ってみたので、ご紹介。今回は後編で、実際にタイトルを作ります。

前編はこちら。

ではさっそく。

TextMesh Pro UGUIコンポーネントの作成、編集

画面に文字列を表示していきます。

TextMesh Pro - Text オブジェクトを作る

uGUI の Canvas 配下で右クリックして UI > TextMesh Pro - Text オブジェクトを選択し、作成します。TextMesh Pro UGUI コンポーネントを持つ、TextMesh Pro Text オブジェクトが作られます。
png

TextMesh Pro UGUI コンポーネントの編集

今回はインスペクターで、以下の箇所を編集してみました。
png
  • TEXT INPUT BOX:タイトル文字列を入力(前回作成した Font Asset に含まれる文字を使用する)
  • Font Asset:前回作成した Font Asset を指定する
  • Color(Vertex):基本の文字色を指定する
  • Color Gradient:文字色をグラデーションで設定するため、チェックを入れる。Top Left ~ Bottom Right の各欄に色を設定し、グラデーションを作る
  • Font Size:フォントサイズ
  • Spacing Options:文字間、単語間、行間等の幅の基本設定。今回はChar(文字間)スペースを詰めるようマイナスの値を設定した
  • Alignment:天地・左右の配置。文字のてっぺんの位置を揃える等の設定も可能 

Font Asset を再編集して微調整する

さらに文字ごとの調整を行うために、Font Asset を選択してインスペクターから再編集します。

Glyph Table の編集

Font Asset のインスペクターで Glyph Table をクリックして展開すると、登録した文字とその設定が一覧表示されます。
png

文字ごとに、必要に応じて以下の箇所を編集します。
(Scene ビューまたは Game ビューに表示されたタイトル文字列を見ながら調整します)
  • OX:文字のX方向の位置調整(左右にずらす)
  • OY:文字のY方向の位置調整(上下にずらす)
  • ADV:文字送りの幅
  • SF:文字の大きさ

一文字だけ色を変える?

上記のように、Font Asset 設定では文字ごとに位置や大きさを変えることはできますが、文字ごとに色を変えたりすることはできないようです(できないはず)。
タイトル文字列の一文字だけ色を変えるには、以下のような方法があります。

方法その1)TEXT INPUT BOX でタグを使って指定する

まずは一つ目の方法。TextMesh Pro UGUI コンポーネント の TEXT INPUT BOX でタグを使って指定してみます。
こんな感じ。「求」の文字だけ赤を指定しています。
png
ただしこの方法では、タグで指定した文字だけグラデーションが適用されなくなります。

方法その2)特定の文字だけ、専用の Font Asset を作る

今回やったのはこちら。一文字分だけのFont Assetを作って、それを上からかぶせます。
こんな感じ。
png
2つの Font Asset を使うので、それぞれ設定できます。

完成!

ということで、ようやく完成。
png

標準のテキストUIで作った場合(比較用)

TextMesh Pro を使わずに標準のテキストUIで作るとこんな感じ。
別におかしくはありませんが、上のものと比べてみると明らかに違いが分かりますね。
png

TextMesh Pro はこのようにタイトルなど、「こだわりたい特定の箇所」で使用するのがよさそうです(基本としては)。
もっと本格的に編集したい場合は Adobe Illusrator など、外部の専用ソフト(有料) を使うことになりそうですが、無料化された TextMesh Pro を使うだけでもいろんなことができ、しかも Unityエディター上で画面全体のレイアウトを見ながら調整できるというのは大きなメリットだと思います。


今回は以上です。
この記事の使用環境: Unity 2018.1.0b13 Personal (.NET 4.x Equivalent), Visual Studio Community 2017, Windows10 ]