【Unity道場スペシャル 2017大阪】カッコいい文字を使おう、そうText meshならね

Editor's Notes

• #3: 自己紹介を。 自分はユニティテクノロジーズジャパンの山村と言います フィールドエンジニアをしながら、Unityのエヴァンジェリストをしています。 福岡は初めてです。てっきり大阪と東京の間くらいかと思ったら、熊本とか長崎とかアタリだったでござる。 もしかしたら知らない人のために、Unityを少し紹介させて下さい。
• #4: Text Mesh Pro
• #5: フォント、変えてますか？ 文字には拘ってますか？ これはUnityの提供する最も雑なアセットですが、UIも雑ですがフォントも適当に貼られてます。 物にもよりけりですが、割と初めの方はフォントに意識を割かれる事が少なく、そのままArialが使われる事も多いです。
• #6: しかし、 フォントには大きな可能性がある
• #7: 例えば先程のタイトルのフォントを少し書き換えてみました。 フォントはゲームの雰囲気を伝える
• #8: 文字は記号である。 同じ言語権の人に限られますが、内容を一瞬で誤解なく連絡できる魔法のツールです。
• #9: 文字の配置で受ける印象も変わる デザインの本とかを呼んでみると、タイポグラフィ、 文字の配置方法で画面の印象を大きく変化させるテクニックが多く紹介されています。
• #10: フォントは単なる「言葉を伝えるもの」という物だけでなく、 画面やゲームの雰囲気を作ったり、レイアウトしたり色々と良い。 さぁ、みんな使おう！　となる所ですが、
• #11: ただ、Unityの伝統的なUI機能は単純に文字を出すだけで満足しており、 フォントの力を100％引き出す事が出来ない。
• #12: ということで、今回フォントの魅力を100％出しやすくするアセットである、 Text Mesh Proを紹介しよう。
• #13: Text Mesh Pro
• #14: Text Mesh Proには5つの特徴
• #16: 拡大しても滲まない
• #17: これはuGUIのテキストとTextMeshProのテキストを拡大スケールした時に分かりやすく差が出る。 uGUIのフォント解像度は画面解像度からよく見える物を選択するので、大抵の場合は問題とならないが、VRやUIをスケールするようなケースでは、かなりボケてしまう問題が、TextMeshProなら回避出来る。
• #19: 沢山のレイアウト調整機能 例えばカーニングしたり、
• #20: 範囲内で文字が埋まるように、等間隔で並べたり
• #21: 禁則処理を行ったり。
• #23: アウトライン・色の滲み・表面模様等の文字に表情を付ける効果
• #24: 変更したら即座に反映される
• #26: 凹凸や立体感といったエフェクト
• #29: リッチテキストによる制御
• #30: Spriteを登録すれば、アイコンも使える
• #31: 独自にタグを作る事も出来ます。便利便利
• #32: ここが凄いText Mesh Pro！ どうです？少し興味が出てきたり…？
• #33: まぁ色々と機能がある事は分かった。じゃぁ、実際どうやって使えば良いの？
• #34: TextMeshProはStandardAssetsや基本機能としては含まれていないので、AssetStoreから入手します。
• #35: 作業の流れですが、 基本的にText Mesh Proは、uGUIと比較して、少し面倒な手順が必要になります。 フォントをTextMeshAssetに変換（利用するフォントを登録） TextMeshのコンポーネントにTextMeshAssetを登録 使用する材質を選択 使う
• #36: ちょっと小話で何でこんな面倒な事をしてるのかという話ですが、 Text Mesh ProはUnityのUIシステムと異なり、ダイナミックフォントではなくDistance Fieldという特別なフォーマットを使用して文字を表現しています。
• #37: Text Mesh Proがズームしても滑らかなのは、これが理由です。 他にもアウトライン等にも活用してるっぽいですが。
• #38: ただ、この計算はかなり負荷の高い事前計算が必要になるため、Text Mesh Proではフォントを利用する前に使用するフォントの選択や、データの変換が必要です。
• #39: 話を戻しまして、実際に操作をやってみます。 まず、フォントの変換から。 今回はせっかくなので、モリサワさんのフォントを変換してみます。
• #40: フォントコンバーターを表示し、フォントを選択します。
• #41: 後は使用するテキストの範囲を入力します。 日本語の範囲を入力する場合は、
• #42: 後は使用するテキストの範囲を入力します。 日本語の範囲を入力する場合は、レンジを選択して、日本語の文字コードを含めます。 含める文字コードの範囲は、Text Mesh Pro+日本語とかで検索すれば、素晴らしい記事が見つかります。
• #43: コンバート、あっという間に終わりました。 ちなみに、これ5,000倍速です。
• #44: コンバート完了したら、Font Assetを保存します。
• #45: これで事前準備が完了しました。 後はText Mesh Pro（3D Text）や、Text Mesh Pro（uGUI対応）に変換して使用します。 例えばuGUI対応版の場合、こんな感じ。
• #46: UIを作って、FontAssetを先程作成した物に差し替えるだけです。
• #47: 後はテキストをセットすれば文字が表示されます。
• #48: 後は使うだけではあります
• #49: が、一つだけややこしい問題があります。 TextMeshProのエフェクトはマテリアルに格納されています。このマテリアルを切り替える事でエフェクトを表現しています
• #50: このマテリアル、生成時は一つしか作られません。 そのため、一つ変更すれば全てのフォントが影響を受けてしまいます。
• #51: ので、コレマテリアルを増やして複数種類のエフェクトを持てるようにします。
• #52: 上のテキストのエフェクトだけを書き換えたい
• #53: マテリアルを増やすには、マテリアルのCreate Material Presetという機能を使用します。
• #54: マテリアルを増やせば、TextMeshProが指定のフォントに対して使用できるエフェクトの数が増えます。 実際に上と下のエフェクトの種類を分けて
• #55: かたっぽだけにエフェクトを加えます。 こんな感じで、ユニークなエフェクトが必要な場合はマテリアルを量産します。
• #56: さて、準備は整いました。 実際に色々と試してみましょう。
• #57: さっそく使っていきましょう。 そこで気になるのが、何処に何をどんなふうに使うのか…という話です。 今回3つ考えてみました。
• #58: 例えばボタンのUIを作ってみます。 こんな酷いUIではなく、少しの工夫を加えたものです。
• #59: 難しい事はありません、基本的にはTextMeshやuGUIのTextと同じように使えます。
• #60: まずはUIを用意して、TextMeshProをTextの変わりに登録します。
• #61: フォントを選択します。 どんなフォントを選択するのかはゲームに寄りますが、ボタンなら読みやすいフォントより見た目の良いフォントを選択しても良いかもしれません。
• #62: 後はUIにうっすらと影をつけちゃったりしたり色々です。
• #63: 見出し用のフォント等もどんどん使って良さそうです。 昨今のゲームUIを見てると、アウトラインが付いてる事が多いです。場合によってはブラーもかかっています。
• #64: ゲーム内の文字。特に値が変動する数値はTextureが少し面倒な部分なので、出来ればフォントで行きたい。 <<クリック>> また、読むことは出来ますが、背景の色が固定では無いので、アウトラインが欲しい こちらはよく動くオブジェクトになるハズなので、uGUIではなく3D Textベースがオススメです。
• #65: という事で、アウトラインを付けます。 アウトラインは内側に伸びていくので、FaceのDilateで文字自体を広げてやると割とバランスが取れます。
• #66: それと、文字と文字の間を詰めて表示します。 この際、文字の表示順を桁数が多い順に設定しておくと良いです。
• #67: あと、せっかくなのでタイトルロゴ的なものもやってみます。 映画のパンフレットとか見てみると、意外とコレ多いんですよね。 もっとロゴロゴしてるかと思いましたが、そうでもなく。
• #68: まずは文字の幅を調整します。 今回調整するのは、2つのアプローチで行っています。 一つはspacing optionで文字間の位置を調整 もう一つがmspaceタグでより文字の間を詰める
• #69: ちなみに、フォントがカーニングの設定を持っている場合、Font Asset作る時にカーニング設定が作られます。一応後付で「
• #70: 一応後付でカーニング設定…つまり、指定の順番でフォントが並んだら文字列の間を詰める処理は追加出来るみたいです。
• #71: そしてLightingの項目で立体感を与えました。
• #72: 最後にText Mesh ProとuGUIの使い分けについてです。
• #73: Text Mesh Proを
• #74: Text Mesh ProとuGUIの一番の明確な違いは、フォントがダイナミックかどうか。 ダイナミックなフォントを利用したい場合は、uGUIに軍配が上がる。 含まれる文字が既に決まっているならば、Text Mesh Proはすごく有効
• #75: TextMesh Replacer、一気にuGUIのテキストをTextMeshProに変換する