【Unity】TextMesh Proを使うと何ができるのか?メリットとデメリット

f:id:halya_11:20180603231601g:plain

先日(といっても結構前ですが)、TextMesh ProがUnityのオフィシャルなアセットとなりました。
今回はこのTextMesh Proの文字装飾機能について、ほかの方法と比較してみます。

描画方法の特徴

通常UIで使うようなダイナミックフォントの場合は、文字を描くときにフォントアトラスを生成し、それをそのままメッシュに貼ります。

f:id:halya_11:20180603171455p:plain

これに対してTextMesh Proでは、まず事前にフォントファイルを元にしてこんな感じのテクスチャを作成します。

f:id:halya_11:20180603222530p:plain

これはDistance Fieldというもので、「文字のエッジからの距離」を表します。
遠い部分ほど薄くなっていくこるがわかります。

f:id:halya_11:20180603222734p:plain

TextMesh Proではこの距離を表すテクスチャをシェーダで加工して描画します。
どういうことかというと、たとえばフォントのエッジと同じ距離まで色を塗れば元のフォントと同様の見栄えになります。

f:id:halya_11:20180603222943p:plain

距離がかなり遠い部分(上記のテクスチャでいう色が薄い部分)まで色を塗れば太くなります。

f:id:halya_11:20180603223033p:plain

これがTextMesh Proの基本的なレンダリング方法です。

メリット1 文字装飾が多彩

TextMesh Proを使うメリットしては、前節で説明したDistance Fieldを使って、多彩な文字装飾ができるということがあります。

距離が遠いところだけを塗ればアウトラインになるし

f:id:halya_11:20180603230846p:plain

距離が遠くなるにつれて色を薄くしていけば光彩の効果を掛けられます。

f:id:halya_11:20180603230915p:plain

Distance Fieldとは直接関係ないですがテクスチャを載せたりスクロールしたりもできます。

f:id:halya_11:20180603231601g:plain

さらにDistance Fieldを高さ情報としてみれば、ノーマルマップに変換できるので、ライティングまでできてしまいます。

f:id:halya_11:20180603232146p:plain

このような文字装飾はダイナミックフォントではやりづらいところです。

メリット2 拡大に強い

TextMesh Proは拡大に強いというメリットもあります。

f:id:halya_11:20180603232256p:plain

これはDistance Fieldが拡大しても荒くなりづらいためです。
この点は、画像をそのまま描画するビットマップフォントにはないメリットであるといえます。

デメリット1 表示できる文字

デメリットとしては、Distance Fieldのテクスチャを自動生成するため、あらかじめ使用する文字を決めておく必要があるという点があります。

ただしこのテクスチャは前述したとおり拡大に強いので、そこまで大きなサイズである必要はなく、さらに形式もAlpha 8なのでテクセルあたりの容量は小さくて済みます。
そのためアルファベット&ひらがなカタカナくらいならすべて入れてしまって問題ないケースがほとんどかと思います。

漢字も入れられますが、サイズを大きくするか、Distance Fieldの精密さを犠牲にする必要があります。
このあたりはアプリの状況次第です。

まとめると、表示できる文字の種類に関してはダイナミックフォントより自由度はないものの、ビットマップフォントよりはずっとあるといえそうです。

デメリット2 表現力

TextMesh Proはダイナミックフォントよりはずっと表現力がありますが、それでもできることは限られます。
そのため、完全に自由に表現ができるビットマップフォントに比べれば表現力が劣るといえます。

関連

light11.hatenadiary.com

参考

どんな表現ができるのかわかりやすく載っているドキュメントです。
digitalnativestudios.com

hexadrive.jp