UNITY* TextMeshPro 特集 * 第 2 部

* タイポグラフィによる美しいテキストレイアウト *

FontAssetCreater

フォントベジェパスの画像変換

《 FontAssetCreator ▷ FonAsset 》



実際に TextMeshPro を使ってみる。

今回は Font のセッティングだけ。 FontAssetCreator を使う。

ちなみにUNITY はフォントベジェパスをそのまま表示できない。

そんなベジェパスを画像変換してくれるのが FontAssetCreater。


画像見づらかったらクリックして拡大。





FontAssetCreator


AssetStore 無料版 TextMeshPro インストール。

下記メニュー FontAssetCreater 起動。(Ver 2018 搭載版ではメニューの場所が異なる)




セッティング。



▼Setting Menu


Font Source : フォントソース


 ▶︎ FONT アタッチ


 Asset → Font(フォルダなければ作る)→ Font 入れる →ドラッグ & ペースト


Font Size : フォントサイズ


 ▶︎ 50 (別途見解あり)



Font Padding : フォントパディング


 ▶︎ 5 (テスト結果あり)



Packing Method:パッキングメゾッド


 ▶︎ Optimum


 テスト段階では First、最終段階では Optimum。

 文字サイズを正確に測れるなど、精度の高い扱いができるようになる。


Atras Resolition : アトラス解像度(Font の集合体)


 ▶︎ 4096 x 4096 が最適(別途見解あり)



Character Set : 文字セット


 ▶︎ Custom Characters


 一般文字、常用漢字をセットできるようになる。

 選択するとSelect Font Asset が出現。


Select FontAsset:フォントアセット選択


 ▶︎ SDF FontAsset をアタッチ※1 


 

すでに書き出されたSDFをアタッチすることで、

そのファイルに含まれる文字セット一式が反映される。

文字の追加・削除がなければ2回目以降おすすめ。

その他情報は反映されない。



Custom Character List : 文字リスト


 ▶︎ 使用する一般文字や常用漢字をここにセット。



Font Style:フォントスタイル


 ▶︎ Normal ▶︎ 2


 基本はノーマル。

 自分の場合、斜体文字が作品コンセプトなのでItalicを選択している。

 Instector でもItalicを選べるが、角度が強すぎて見た目がひどくなる。

 セッティングと Instector でなぜ異なるのか。

 なお、デフォの 2 を別値に変えても何も変わらない。



Font Render Mode:フォントレンダーモード


 ▶︎ Distance Field 16 


 文字周囲エッジの鮮明さ、アンチエイリアス(ぼかし)精度。

 Distance Field 16、Distance Field 32 以外使い物にならない。

 Distance Field 16 の方が正確にトレースしているように見えるのはきっと好み。

 ※1 SDF ファイル:Font Render Mode の Distance Field 16 以上で生成。




GenerateFontAtlas をクリックして実行。





文字がフォントに入っていなかった場合、

弾かれて左下の MissingCheracters に表示される。




Save TextMeshPro FontAsset をクリックして、




設定を忘れないよう、ファイル名に入れたり。




書き出された Font Asset を開くと下記のように Material と Atlas が含まれている。

Font Asset を Text Mesh Pro の Instector にアタッチ。




セッティング完了。




FontPadding


FontPadding について


TEST:フォントサイズ 20 / 解像度 1024 x 1024 

     左 Padding 10 / 右 Padding 5


アトラスに記録する文字間の数値で、実際表示される文字間もこれに従う。

文字の周囲に線を入れたり立体化させるなどの、レンダリング加工する際の余白である。

文字間は Instector で調整できるし、数値が大きいほど書き出し時間がかかり、

文字の単体面積が大きくなって登録できる文字数も少なくなるので 5 でいいと思う。




Atras Resolution


Atlas 解像度について

ちょいとこちらを見て欲しい。 


Aとする...  左 フォントサイズ 50 / 解像度 4096 x 4096 / ビルドサイズ 約16mb

Bとする...  右 フォントサイズ 25 / 解像度 2048 x  2048 / ビルドサイズ 約8mb


Bのフォントサイズ 25ならアトラスの解像度を一段階下げても常用漢字一式入り、

データサイズが半分になる。(※ 当社比)




ちな見た目。


左:A  / 右:B

拡大するとBの方が若干縁が荒い。



上:A / 下:B

使用サイズ16なら見た目は変わらない。

大きい文字を使わなければ、軽量・高速処理の B を選んでもいいと思う。






結論:

Atlas は、

なんかキモい




うじゃうじゃはダメだ。

次回第 3 部、FontAssetCreater のカーニングの読み取りを試す。


▷ * 第 3 部 * へ




0コメント

  • 1000 / 1000