* タイポグラフィによる美しいテキストレイアウト *
Material Face Outline
未来的な文字表現へ
《 TextMeshPro ▷ Inspector ▷ Face ▷ Outline 》
先の第 5 部でやっとカーニングの実装ができた。
いよいよ最後の課題、
文字に未来的な表現
をかける。
TextMeshPro は文字に様々な加工ができることから
夢見がちなアセットだが、加工を施すということは、
Font に失礼
と自分は考えてしまう。
元々それだけで美しい造形をあえて加工する必要はない。
なので加工ではなくFont に敬意を持ち、
造形を引き立たせる
そう、未来的な表現が Font 本来の魅力を引き出す結果にしたい。
未来的な表現…
例えばサイネージスクリーンの文字のように少し輝かせたらいいかもしれない。
きっと品が出る。
Material
マテリアルを操作する。
セッティング場所は、Face と Outline。
それ以外の項目は専門性の高い別次元の処理なので、別を当たって欲しい。
Material FaceOutline
やっていこう。
Font の形状やウェイト（太さ）により変化が異なるので
ちょうどいい値を探しながら調整する。
まず文字が光っているように見せるため、強めのぼかしをかける。
Face ▷ Softness （柔らかさ）の数値を上げる。
次に元の造形へ復元させていく。
Face ▷ Dilate （膨らみ）の数値を上げる。
これでなんとなくベースは出来た。
さらに光の密度を増やす。
Outline ▷ Color （色）を文字色の白へ。
Outline ▷ Thickness （厚さ）を増やす。
ちなみにOutlineというのは、Font をパス化したことではなく、
文字周囲という意味。
文字周囲の光の透明度を下げて整える。
Outline ▷ Color （透明度）を下げる。
自然な感じに輝いていてキレイ。
作業はこれだけ。
別のセリフを入れてみる。
あ。中央の文字入れ忘れてた。
FallbackFontAssets
大丈夫。
入れ忘れの文字だけ FontAssetCreator で追加生成。
CustomCharacter と Atlas 以外同じ設定。
Atlas 解像度はその文字が入る小さいサイズでOK。
生成した FontAsset を保存。
メインの FontAsset を選択して Inspector を表示。
GlyphTable の上にある FallbackFontAssets の［＋］をクリックして
追加 FontAsset をアタッチ。
今後も必要な文字が出たら追加、
または作り直してアタッチすればいい。
さて、今度は大丈...
ぶじゃない！ 追加した文字が上がっている！
追加した FontAsset の GlyphTable を修正。
操作方法は第5部で説明した通り。
OY 値を下方調整。
今度は、
バッチリ。
文字を入れ忘れても後から追加・修正できる。
Complete
これでやりたいことコンプリート。
そういえば、今回のタイポ入魂だけに関して言えばスクリプトを使ってない。
TextMeshPro はカーニングは正常に読み込まないし、直接カーニング値を入力しても
まともに動作しないし、Atlas ソースの変更は1日がかりで大変だったし...
なんか深いため息と一緒にどっと疲れが出た...
でも作品の奥深くまで浸透するタイポグラフィのレイアウト概念は、
全体のクオリティを格段に向上させてくれる。
そう、たった1日がんるだけで、
物語は永遠の美しさへと昇華する。
結論：
スクリプトに頼らずともUNITYは、
知恵と努力で
美の表現者へ昇華する
TextMeshPro の最も優れたところは、
文字加工や、文字サイズに左右されない品質だけでなく、
タイポグラフィのレイアウト概念がちゃんと通用するところである。
公開中の基幹システムで確認できる。
あと、KUMA* STUDIO ART でタイポグラフィや Font のことを
詳しく語っているので是非！
▷ KUMA* STUDIO ART タイポグラフィによる美しいテキストレイアウト
0コメント