* タイポグラフィによる美しいテキストレイアウト *
TextMeshPro
テキスト表示にもの申す
《 TextMeshPro 》
文字をいかに読みやすくさせるか。美しく魅せるか。
グラフィックデザインのひとつ「タイポグラフィ」。
いろいろ試したが、残念ながら UNITY はさほどデザイン分野に対応していない。
なので自分なりのタイポ魂をブチ込んでいく。
使うアセットは TextMeshPro。
一見、文字を様々に加工できる演出アセットのように見えるが本質は違う。
これかから TextMeshPro の真の価値を引き出していく様をご覧いただく。
恐らくこのような調整する人間は後にも先にも自分だけかもしれない。
タイポグラフィ、つまり「文字や文章をデザインする大切さ」も合わせて理解いただく。
なお、情報量が多いことから数回に分けて説明していく。
TextMeshPro
セリフフレーム上に TextMeshPro を配置。
とりあえずテキストボックスに文字を流し込んで考察。
う〜ん...
・文字間バラバラ。
・改行の字切りが単語の途中。
・3 行めの文字数が少ないことから見た目のバランスが悪い。
・行間広すぎ。
・天地左右の余白バラバラ。
結論：
見づらい
読みづらい
ということで、やりたいことをまとめる。
・文字間を均等にしたい。
・読み切りの良いところで改行させたい。
・行間を整える。
・余白天地左均一にしたい。（右はなりゆき）
文字間は最終的にこんな感じ。
全部漢字の文字間と同じくらい詰めて広げる。
「」は空き少しキツイかな。
ついでに、
・追従するアイコンを入れたい。
・文字を滑らかに、流れるように表示させたい。
・文字に未来っぽい表現をかけたい。
・次のセリフへの移行、または終了時、文字をフェードアウトさせたい。
追随するアイコンは複数行の場合、次の行頭に折り返す必要があるので、
1 つのテキストボックスだけでは技術的に難しい。
スプライトマスクなんかを使えばもしかしたらと思ったが、
見えない部分であっても、なるべくエレガントな処理にしたい。
それらを踏まえてレイアウトを組んでみる。
行間、余白を整えながら 3 段分のテキストボックスを設ける。
テキストボックスそれぞれにマスクをかける。
テキストが見えなくなるようマスクは左端に小さく置いておき、
表示するときは、右へ拡大させながら隠れていた文字を徐々に表示させていく。
さらにマスクが広がる動きに合わせてアイコンを追従させ、
あたかもアイコンから文字が流れ出ているように表示させる。
全てを表示させたら、アイコンは文章最後の後ろに点滅して残る。
次のセリフ、または終了時のフェードアウトはスクリプトで簡単に操作できた。
ちなみにこのセリフ 3 行 1 セットは「 , 」で区切った配列 Strings 1 行にまとめている。
SERIF[0] = "0001,1,ありがとうございます！,それではお言葉に甘えて,
何か「美しいものを」いただければ"
（0001はボイスファイル名、1はキャラナンバー）
ここまででまだ達成されていない課題は下記の通り。
・すべての文字間を均等にしたい。
・文字に未来っぽい表現をかけたい。
結論：
UNITYよ、もう少し君を
文系型にする
次の第 2 部でいよいよ TextMeshPro の操作。
0コメント