うどんてっくメモ

技術的なメモをまったりと

【Unity】TextMeshProのアウトラインを理解する

はじめに

本記事で紹介および検証を行なっているツール、ライブラリのバージョンは次の通りです。

  • Unity 2021.3.1f1
  • com.unity.textmeshpro@3.0.6

バージョンによっては挙動に差異がある場合もありますので、ご了承ください。

TextMeshProのアウトライン

UIを作っていく上で必要になりがちなアウトライン表現ですが、TextMeshProでやる場合にはMaterialのパラメータで実現できます。

Thicknessの値を大きくすれば、アウトラインを太くすることが可能です。

適当にアウトラインをつけたいだけならこれでいいのですが、たとえば5pxのアウトラインをつけたい!ということをする際、パラメータをどう設定すればいいかいまいち掴めませんでした。 そこで、Forumを漁ってみると公式の説明が投稿されていました。

forum.unity.com

この説明をもとに、アウトラインの大きさや見え方の仕組みについて紹介します。

アウトラインの大きさ

まず最終的なアウトラインの大きさの式から示します。

アウトラインのサイズ(大体) = FontSize * Padding / Sampling Point Size * Thickness * 2

たとえばテキストのFontSizeが50px、参照するFontAssetのSampling Point Sizeが100px、Paddingが9px、そしてMaterialのThicknessが0.5であれば、アウトライン幅は50 * 0.09 * 0.5 * 2 = 4.5pxになります。ここで大体という注釈をつけているのは、内部計算で端数の切り捨てや補完の計算が働くケースもあるためです。詳細は本記事では省略するため、実際のシェーダーの中身を参照してもらうといいかと思います。

FontSize

そのままで、TextMeshProによるGUIコンポーネントに設定されたFont Sizeです。

Padding / Sampling Point Size

わかりにくいですが、FontAssetのGeneration SettingsにあるSampling Point SizeをPaddingで割ったものになります。 Sampling Point Sizeが100でPaddingが9であれば「サンプリングされている文字のサイズに対するパディングの割合値」は0.09といった形です。

Sampling Point SizeとPaddingはTextMeshProにおけるSDF Textureでの文字ひとつひとつのサイズと間隔を表します。Atlas Population Modeについて、動的にサンプリングするDynamicであればこの画像にもあるGeneration Settingsの値を変更して調整しますが、事前にサンプリングしておくStaticであればFont Asset Creatorによる生成時にバインドされます。

この生成時にも、SP/PD Ratioという値で出力されてたりします。

Thickness

冒頭でも説明した、MaterialのOutlineにあるパラメータです。

内側と外側のアウトライン

注意しなければならないのが、このアウトラインは文字の輪郭を中心軸に外側と内側に描画されることです。 なので、大きさを求める計算式では最後に2を掛けています。 また、アウトラインの見せ方にも注意が必要です。たとえば外側にアウトラインをつけたいだけだと、内側に描画されてしまう分文字部分が潰れてしまいます。 対応するにはMaterialのFaceにあるDilateというパラメータを調整します。Dilateは文字の太さの拡縮の役割があります。

以上のように、アウトラインの大きさや見え方を調整するにはさまざまなパラメータを考慮する必要があります。

まとめ

これまで雰囲気でTextMeshProのアウトラインをつけていましたが、TextMeshProのパラメータを理解するいい機会になりました。 文中でも言及しましたが、詳細なロジックは実際のTextMeshProのシェーダーで確認できます。興味のある方はぜひのぞいてみるのがおすすめです。 また、本記事に誤りがある場合には筆者までコメントなどで指摘いただけますと幸いです。