Unity を検索

Unity 2018 で TextMesh Pro を最大限に活用しよう

2018年10月16日 カテゴリ: テクノロジー | 7 分 で読めます
取り上げているトピック
シェア

FPS を開発していても、あるいはパズルゲームや VR 体験を開発していても、必ず作らなければならないのがユーザーインターフェースです。嬉しいことに、2017 年 3 月、TextMesh Pro が Unity ファミリーに加わりました。これにより、Unity での見栄えの良い UI の作成が今までより遥かに簡単に、素早く行えるようになりました!

ご存知ない方のためにご説明すると、TextMesh Pro は、Unity のデフォルトのテキストコンポーネントの代替となるものです。デフォルトのテキストコンポーネントに匹敵する(条件によってはさらに高い)性能を備えており、「符号付き距離場」(SDF)と呼ばれる、元々『Team Fortress 2』を開発した Valve によって使用された、まったく異なるレンダリング技術を用いています。TextMesh Pro を使用すれば、その高い性能によって素晴らしい見栄えのテキストが楽に作成できるだけでなく、従来より遥かに高度な制御がインスペクターとスクリプトから可能となります。本記事ではこの素晴らしいツールを最大限に活用する方法をご紹介します!

TextMesh Pro を使用したプロジェクトの開始をお勧めしたい理由は主に 2 つあります。1 つ目は、ビジュアルの向上です。SDF レンダリングのお陰で、フォントを作成し直すことなくテキストの見た目を簡単に変えることが可能となっています。すべての TextMesh Pro コンポーネントにアタッチされているマテリアルを調整してテキストのスタイルを変えることができます。2 つ目は、より高度な制御です。TextMesh Pro コンポーネントには、通常のテキストコンポーネント内にあるすべての変数の他にも、数多くの変数が用意されています。そして何より TextMesh Pro は、現在世界中の 2500 万人以上のデベロッパーが使用しているツールなのです!

TextMesh Pro とデフォルトテキストの比較

デフォルトの Unity テキストを使用されている方は、オブジェクトのストレッチやサイズ変更を行うと見た目がぼやける場合があることにお気付きかもしれません。これは、リサイズされた場合の見た目がどうなるかに関する情報がテキストに含まれないゆえに、欠損したピクセルの生成処理を Unity が「即興で」試みなければならないためです。TextMesh Pro はこれとは異なるレンダリング技術を使用しているため、この問題が解消されます。SDF はフォントアトラスを高解像度でレンダーするという原則に従っているため、リサイズ時の文字の見え方に関する情報が常にフォントに含まれるようになっています。

TextMesh Pro を使用すれば、どんなフォントファイルでもインポートして自分のフォントアセットを作成することができます(Window > TextMesh Pro > Font Asset Creator)。このため、フォントアトラスの解像度を選択することができます(この解像度によってテキストの SDF レンダリングの効率が変わります)。言うまでもなく、選択する解像度が低いほどフォントアトラスの生成速度が速くなります。

フォントは、様々な異なるサイズでどのような見た目になるかの情報を含んでいるので、アウトラインとドロップシャドウをフォントアトラスから再構築することも可能です。マテリアルプロパティを調整するだけで、テキストの見た目が完全に変わります!

より高度な制御

ここまでの内容からお分かりの通り、TextMesh Pro を使うと非常に見栄えの良いテキストが作成できます。しかし、いくら良いテキストがあってもそれを制御できなければ何の意味もありません。TextMesh Pro コンポーネントには、フォントサイズや間隔、アラインメント、カーニングをカスタマイズできるオプションがあるほか、自動サイズ調整を有効にしたり、コンテナのサイズにテキストを合わせられるオプションがあります。特に最後の 2 つは、一切のスクリプト記述なしで、該当のテキストコンテナに合わせてテキストの自動サイズ調整を行えるので、複数のプラットフォームや言語を扱う場合に非常に役立つ制御機能です。また、これらの設定をランタイムで変更したい場合は、TextMeshPro API から TextMesh Pro コンポーネント内のすべての変数にアクセス可能となっています。

さらに一歩踏み込んだカスタマイゼーションを行いたい場合は、テキストオブジェクトに Text Info Debug Tool コンポーネントを追加して、テキストオブジェクトが保持する文字数、ワード数、リンク数、行数などを表示させることもできます。

ヘッダーやタイトル、フレーズなどを挿入する度にテキストをフォーマットし直す時間を省きたいなら、目的に合わせたスタイルシートを設定することもできます。ひとつ例を挙げれば、例えばヘッダーに装飾を加える場合などです。スタイルシートを作成するには、メニューを Create > TextMesh Pro > Style Sheet の順に選択します。この新しいアセットをデフォルトのスタイルシートとして設定するには、メニューを Edit > Project Settings > TextMesh Pro Settings の順に選択してください。

リッチテキスト

テキストの見た目の制御は、インスペクターあるいはスクリプトからだけでなく、テキストフィールド自体からも行えます。HTML や XML に馴染みのある方なら、タイプしながらテキストの見た目をカスタマイズできます。そうでない方は、まずは TextMesh Pro でのリッチテキストの使い方ガイド(英語)をご一読ください。このガイドは、複数のスタイルやサイズ、マテリアルを同じテキストオブジェクト内で使用したい場合に特に役立ちます。

マテリアルのカスタマイズ

TextMesh Pro で見栄えの良いテキストを作成するもうひとつの方法は、テキストにサーフェスシェーダーを適用することです。これを行うとシーン内のライティングをテキストに影響させることができます。下の例では、複数のリアルタイムポイントライトがシーン内を動いてテキストの見た目に影響を与えています。

マテリアルのプロパティには、外観、アウトライン、ベベル、ライティング、バンプマップ、環境マップ、光彩、デバッグなどの設定をカスタマイズできるオプションが提供されています。

満足の行くマテリアルが作成できたら、マテリアルプリセットを作成して、他のフォントアセットに再利用することができます。これを行うには、マテリアル名の上で右クリックして「Create Material Preset」を選択してください。これにより、TextMesh Pro component > Font Settings > Material Preset から選択できるアセットが作成されます。

フォールバックシステム

生成したフォントアトラスから特定の文字が欠損している場合は、その文字がタイプされる度に TextMesh Pro がそれをデフォルトのグリフにフォールバックさせます。このグリフは Edit > Project Settings > TextMesh Pro Settings から変更できます。あるいは、メインのアトラス内にその文字が見付からない場合に TextMesh Pro がフォールバックするフォントアセットを、1 つまたは複数設定することも可能です。最適化のためには、メインのフォントアトラスを高解像度にして、フォールバック用アトラスはすべて低解像度にするのが理に適っています。

これに加え、TextMesh Pro Settings を使用して、Fonts & Materials または Sprite アセット用の Resources パスをセットアップできます。リッチテキストを使用している場合は、TextMesh Pro Settings で定義したメインのスプライトアセットのうち利用可能なものの中からスプライトを挿入することもできます。これを最も簡単に行うには、スプライトシートをインポートして、スプライトエディター内で該当アセットの上を右クリックしてスライスし、Create > TextMesh Pro > Sprite Asset の順に選択します。この新しいアセットから、オフセットやピボットなどの設定をカスタマイズできます。同様に、特定のスプライトがメインのスプライトアセット内にない場合は、フォールバック先となるスプライトアセットを設定することも可能です。

まとめ

パフォーマンスに関しては、上述の通り TextMesh Pro とデフォルトテキストはあまり変わりません ― TextMesh Pro もクワッド上に描画するので、ビットマップフォントを使用した場合と同様に効率的です。また、ランタイムのメモリ割り当てがありません ― TextMesh Pro がテキストオブジェクト用にメモリ領域の割り当てを行うのは再生ボタンが押された時のみです。文字数を大幅に増加させた場合、再割り当てが1 回だけ行われます。文字数を削減した場合は(256 文字以上削減した場合以外は)再割り当ては行われません。TextMesh Pro の使用によって改善される点は、アウトラインやドロップシャドウなどのスタイルで仕上がりがより良くなることです。これは TextMesh Pro が SDF レンダリング技術を使用しているためです。

本記事でご紹介したもののほとんどは、TextMesh Pro をプロジェクトにインポートすれば、サンプルシーンとして使用可能となっています(バージョン 2018.1 以降の Unity で、Window > Package Manager > TextMesh Pro > Install からインストールしてください)。TextMesh Pro の使用を開始される前にぜひご覧になってみてください。多くの疑問に対する答えが解決されると思います。フィードバックや、サンプルシーンをご覧になっても解決されないご不明点は、お気軽にフォーラムにご投稿ください。

2018年10月16日 カテゴリ: テクノロジー | 7 分 で読めます
取り上げているトピック