Search Unity

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 の使用を開始される前にぜひご覧になってみてください。多くの疑問に対する答えが解決されると思います。フィードバックや、サンプルシーンをご覧になっても解決されないご不明点は、お気軽にフォーラムにご投稿ください。

22 コメント

コメントの配信登録

コメント受付を終了しました。

  1. David Miller

    10月 29, 2018 7:05 am

    you can use the TextMesh Pro Settings to set up Resources paths for Font & Materials or Sprite Assets. When using Rich Text, you can insert a Sprite depending on which are available in the primary Sprite Asset you have defined in the Settings.

  2. We need better Asian language support. Nowadays a quarter of the PC market is Chinese. It cannot be ignored. Anything coming on this front in Unite 2018 LA?

  3. TextMesh Pro is really bad for most asia languages. Think of convert all Japanese, Chinese and Korean characters to font asset. That take a lot of time and burn my CPU. Thai also has problem with vowel symbols and tone diacritics.

    1. I also need character sets for each languages. Why you can’t make it dynamic?

      This is why I don’t want TextMesh Pro replace the default one. Because it really bad for localization and most asia languages.

    2. Hey Tim,
      This does not sound like a good idea in general. There are just too many characters in Chinese or Japanese to create good sdf assets. I recommend not trying to create an asset with all characters out there, but with just the one’s your game really uses. TMP makes it really easy to define the characters for the asset with a text file. In order to create that text file I made a handy little tool: https://github.com/JohannesDeml/CsvCharacterExtractor

      1. Most games have dynamic text, such as user’s names, chats, information pulled from web services, etc. Trying to pre-bake all characters that might ever be used is not practical in these languages in this case. Never tried to implement this, but maybe interesting: http://jcgt.org/published/0006/02/02/

    3. That’s what happens when you don’t speak a proper language. By now everybody should speak English.

      1. Sirius Bizdness

        11月 15, 2018 5:39 am

        What, English? An insane, convoluted spaghetti tangle of languages and rules from across the globe? Trust me, you could do way better than making everyone speak this mess.

        …I mean, given the state of today’s society, those problems may be exactly why it ends up as the Universal Language….

  4. i wish there was a way to automatically upgrade text to textmesh in scripts…

  5. Is there an option to adjust sorting layers for TMP objects by now? When I used TMP last time, the assets could not be properly rendered along with sprites (cause sort layering was missing) making the plugin pretty much useless.

  6. How do I simply, in the editor, animate a fade of a TextMeshPro object? Like an opacity or alpha slider. Is there such a thing for TMP?

    1. You can simply use a canvas group in one of the parent objects to animate alpha values for all its children. Otherwise you could also animate the material of the TMP object (or an instance of it).

  7. Please change the editor UI to correspond to native Unity one

    1. Ciro Continisio

      10月 19, 2018 6:46 pm

      It’s in the works! ??

      1. Sirius Bizdness

        11月 15, 2018 5:40 am

        Sweet. Was hoping that was the case.

  8. One of the best. Purchased this at the time it was being developed by Stephan.

  9. Yilmaz Kiymaz

    10月 17, 2018 7:36 am

    Isn’t this sentence a bit disingenious? “…it still renders on quads, so it is as efficient as using a bitmap font”. A quick look at the TextMesh Pro SDF shader reveals that the vertex and fragment shaders are quite a bit heavier than those used for bitmap font rendering.

    1. True, there is some overhead in the shader. I guess what they tried to say is, that TMP does not create high poly characters in order to generate that vectorlike rendering.
      For me the mobile shader does not create too much overhead, and you can always switch to the bitmap mobile shader, which does not really have any more overhead than the normal text shader. I guess if you’re targeting low level devices it does make quite a lot of sense to use TMP since dynamically generating the font atlases can create quite some spikes (especially when the atlas is too small and a new atlases with double resolution is created).

  10. what if you have an asset that could use it ? is it possible to have it packaged with the asset itself ? or we have to deal with “hey i just imported and there is error, can you fix it ? ” so basically not an option

    1. You should not try and include it with the asset, especially now that installation is controlled by the package manager I use it in my assets and simply state in setup instructions how the user can get and install it. I do not get questions about this so I guess the instructions are working.

  11. Any new features or improvements coming… easier to do multi languages.. current setup process is a bit of learning curve

  12. Is there any way to use HDR colors in TextMeshPro? So it will be tonemapped correctly by the post process.