テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】TextMeshProのアウトラインは、uGUIのと比べてとても良い

f:id:tsubaki_t1:20170920045940j:plain

前回に続きTextMeshPro。今回はアウトラインについてです。

TextMeshProのアウトライン

f:id:tsubaki_t1:20170920054157j:plain

まず本題です。

TextMeshProは、シェーダー側でアウトラインを実現しています。元々SDFでフォントを実現する仕組みなので、その辺りは割と簡単に出来ているのかなと。

アウトラインの設定方法

アウトラインの設定は、マテリアルのOutlineのThicknessから行います。

この項目を増やすと、文字にアウトラインが付きます。

f:id:tsubaki_t1:20170920054618j:plain

ただ実際に行えば分かる通り、このアウトラインは内側に進みます。太いフォントでもThicknessの値が大きい場合、文字のシルエットが変化してしまうかもしれません。

f:id:tsubaki_t1:20170920054847j:plain

内側滲む対策は、文字を広げる事で回避

この内側に滲む問題の手っ取り早い対策は、文字を広げてしまうことです。

FaceのDilateの値をOutlineのThicknessと同じくらいの値を設定してやると、内側への滲みと文字の広がりが丁度よい感じに相殺されます。

f:id:tsubaki_t1:20170920055053j:plain

f:id:tsubaki_t1:20170920055222j:plain

 

アウトラインの色々なエフェクトを試してみる

TextMeshProのアウトラインは色々と出来ます。

例えば、Faceの色を透明にして中抜きアウトラインを表現したり、SoftnessやGrowを活用してボケた感じのアウトラインを作ったり、ぶっといアウトラインを用意したり云々。

f:id:tsubaki_t1:20170920060118j:plain

ただ、ぶっといアウトラインを表現する場合、アウトラインも含めて1文字である事に注意が必要です。アウトラインが隣の文字を侵食します。

 Spacingで文字の間を詰めると、こんな表現になるかもしれません。

f:id:tsubaki_t1:20170920060451j:plain

 

ポリゴン数も増えず、オーバードローも無い。レイアウトにも優しい

TextMeshProで良い点の一つは、uGUIの文字ずらしアウトライン系と異なり、ポリゴンが増えず、オーバードローがない点です。

実際にUI Profilerで確認しても、ポリゴンは通常のフォントと同じ1文字6点のみ。またアウトラインの有無にかかわらず同程度の表現であることが確認出来ます。

f:id:tsubaki_t1:20170920055742j:plain

f:id:tsubaki_t1:20170920055755j:plain

特にポリゴンが少ないので、レイアウト変更したときのコストは割安です。

 

uGUIのアウトライン手法と問題について

一方uGUIのアウトラインはどうでしょう。

uGUIのアウトライン表現は、上下左右にズラシた文字を利用したアウトラインです。この手法では、上下左右に少しずつズラした文字+中央の文字でアウトラインを表現しています。

http://tsubakit1.sakura.ne.jp/images/201406210055390f9.gif

細い文字はアウトラインを太くしにくい問題

まず起こるのが、細い文字はアウトラインを太くしにくい…という事です。

文字をズラして表示する関係上、細い文字…例えばLightと名前が付くようなフォントでアウトラインを表現しようとすると、十分な太さに移動する前に、はみ出てしまいます。

f:id:tsubaki_t1:20170920051007j:plain

ただまぁ、これは実は強引に解決することが出来なくはないです。

uGUIのアウトラインは「UIを利用してアウトラインを作る」ので、小さめのアウトラインを連打することである程度の太さのアウトラインを実現出来ます。

f:id:tsubaki_t1:20170920051509j:plain

色を変えると分かりやすいかもしれません。

f:id:tsubaki_t1:20170920051727j:plain

しかし、このアプローチは場合によっては地獄を呼びます。

文字を表現するために沢山の描画が発生する問題

アウトラインでもう一つ問題になるのがオーバードローです。

単純にアウトラインの文字を一つ書くには、エッジ用に上下左右で4、中央で1の5枚描画する必要が出てきます。

この辺りUI Profilerで確認すると、とても光っているのが確認できます。

白ければ白いほど、ヤバイです。

f:id:tsubaki_t1:20170920052138j:plain

まぁオーバードロー自体は実はそれ程問題にならないかもしれません。オーバードローは描画面積が広ければ問題になりますが、所詮文字です。多分範囲は限定的でしょう。

 

どちらかと言えば、気になるのはもう一つ。ポリゴン数です。ワイヤー表示すると、中々にエグい表示が確認出来ます。

f:id:tsubaki_t1:20170920052457j:plain

特にUIがちょくちょく更新される場合、かつ文字数が多いような場合は、レイアウトコストやら云々が結構なコストになるかもしれません。

具体的にはコレくらい。

f:id:tsubaki_t1:20170920052927j:plain

ソレはソレとして

まぁ実際問題、文字が背景に溶け込まないようにする事が目的の場合、アウトラインは薄いの一つで問題ないかもしれないので、そこまで問題にはならないかもしれません。

またダイナミックフォントが使えるのは、かなり強力なuGUIのメリットです。使いやすい物をケースバイケースで使い分けるのが良いかなと。

関連

tsubakit1.hateblo.jp

indie-du.com

tsubakit1.hateblo.jp

www.youtube.com