【Unity】TextMeshProで太いアウトラインをつける（Padding）

TextMeshProを使っていて、アウトラインを太くしたら見切れてしまった。

f:id:naichilab:20190728014016p:plain:w320

これを綺麗に表示したいと思います。

TextMeshProでアウトラインをつける方法自体は説明を省きますが、こちらの記事が分かりやすいです。【Unity】TextMeshProのアウトラインは、uGUIのと比べてとても良い - テラシュールブログ

先に結論を書いておくと、FontAssetCreatorでアセットを作る際に、Padding の値を大きくしておくと綺麗にアウトラインが描けます。

例えば、Sampling Point Size = 64 、 Padding = 16 だと下の図のようになります。

f:id:naichilab:20190728024526p:plain:w320

Sampling Point Size = 64(黄緑) に対して、Padding = 16(赤) がつくので、最大で黄色枠ぐらいのアウトラインがつけられます。

実際に描画してみるとこんな感じ。

f:id:naichilab:20190728025540p:plain

Padding のデフォルト値は5ですが、Sampling Point Size との比率によって見た目のアウトライン最大幅は変わってしまいます。（冒頭の画像はサイズ70に対してパディング5でした。）

大きな Sampling Point Size にする場合は Padding をいくつにするか事前に計算しておくと良さそうですね。

せっかくなのでパディングを変えていくとどれくらいの見た目になるのか試してみたいと思います。

Sampling Point Size は64固定、Padding を0,2,4,8,16,32と変えて作ってみました。

パディングを大きくするほど生成に時間がかかり、64は終わる気配がなかったので中断しました。

P	作られたテクスチャ	P	作られたテクスチャ
0		2
4		8
16		32

大きくするほどグラデーションがきめ細かくなっていることが確認できます。

作成したそれぞれのFont Materialについて、Face - Dilate と Outline - Thickness を同量ずつ変えてみます。

f:id:naichilab:20190728021848p:plain:w320

Outline = 0	0.2	0.4

Outline = 0.6	0.8	1.0

Outline = 0.4 を越えるとあまり変化ないように見えますね。最大サイズに向かって直線補間されてるわけではなさそう。

Padding 4か8、大きくても16ぐらいあれば良さそうですね。

4,8,16は Sampling Point Size に対する比率で言うと、それぞれ 0.0625, 0.125, 0.25 です。

普通に使う分にはフォントサイズの5~10%程度。特に太いアウトラインを付けたい場合は20~30%のパディングを付けましょう。とごく当たり前な結論になりました。。。

naichi's lab