TextMeshProの使い方【後編】

こんにちは、やまだたいし( やまだ たいし (@OrotiYamatano) | Twitter )です。
TextMeshProの使い方後編です!

前編はこちら orotiyamatano.hatenablog.com


目次


設定


早速前回の続きからです。

Atlas & Material についてです。
こちらは生成されたFontアトラスとそのマテリアルの参照を表しています。
変更は出来ません。

Font Weights は
太字と斜体がフォントの外観をどのように変更するかを制御できるものです。
文字のスタイルによって表示するフォントアセットを指定することが出来るようです。
設定すれば、italic(斜体)のときはAのフォント、太字(Bold)の時はBのフォントみたいな感じで使い分けができそう。
また下の方の項目でテキストの太さと間隔を調整することもできるようです。
今回は触らないので詳細は割愛。

Fallback Font Assets は
フォントを複数のアセットに分散し管理できる機能のようです。
今回は常用漢字と英数字とひらがなだけなので8192*8192でギリギリ納まるので問題ないですが、
納まりきらない時に分散出来るらしいです。
また、1つのフォントにすべての文字が含まれていない場合に別のフォントを読み込ませることで代替表示させるために用いるようです。
別のTMP_FontAssetを指定するだけのようです。

Character Table は
その名の通りフォントアセットに含まれる文字をUnicode値で検索するために使用される辞書のようです。
打ち込んだ文字と表示される文字が別(例えば「あ」と打ち込んだのに「い」と表示される)の場合に値を編集してなおすことが出来るようです。
下記のGlyph TableのIDと紐付いているようです。

Glyph Table は
登録した文字とその設定が一覧表示されます。
特定の文字が表示されない、文字が崩れているという場合にココで検索するとどんな状態で文字が保存されているか調べることが出来ると思います。
値が変更することが出来るので文字の位置が合わないといったことがある場合ココを編集すれば良さそうです。

Glyph Adjustment Table は
特定の文字2つを選んで文字間を調整するものっぽい?
その組み合わせの場合のみ文字間が調整されるようです。
上手く動かないという話もあるようなので、あまり機能としては信用しないほうが良いかも?

f:id:OrotiYamatano:20201121014121p:plain

いざベイク!


各ベイク設定について


では、テクスチャのアトラス化をするためにベイクをやっていこうと思います。
フォントアセットのUpdate Atlas Textureをクリックします。
f:id:OrotiYamatano:20201121022141p:plain

すると、ウィンドウで開くと思います。
前半で設定した値と違っても反映されると思うので大丈夫だと思いますが、怖い人は合わせて置くと良いでしょう。
因みに私の設定はこんな感じにしました。
f:id:OrotiYamatano:20201121022623p:plain

Sampling Point Size は大元となるフォントのポイントの大きさですが、コレはベイクする速度を考えてAuto Sizingにしておくことにしました。
Paddingはベイクされるときの文字間です。小さすぎると文字を表示する際に隣の文字が表示されてしまうことがあるのでデフォルトの9のままを適用しました。
Packing Method は ベイクするスピードで遅いほど精度が高くなるのですが、特にこだわりは無いのでFastにしておきます。
Atlas Resolutionはアトラステクスチャのサイズです。今回は常用漢字ひらがな・カタカナ、英数字、ちょっとした記号なのでいっぱい入る8192*8192のサイズにしておきます。
Character Setには焼き込む文字の指定方法を指定します。後で変更するので詳細は割愛。
Select Font Asset は実際に焼き込む設定のアセットです。特に変更することはありません。
Character SequenceはCharacter Setに指定する方法によって入れる設定が変わります。詳細は割愛。
Render Modeはベイクするときの設定です。これは前編で解説しているので割愛します。SDFAAで今回は焼き込みます。
Get Kerning Pairs は カーニング情報をフォントデータからコピーするか?です。フォントによってはそもそも含まれない場合もあるのでfalseでいいです。
あるやつはtrueの方がキレイに表示できると思いますがソコまで気にする必要も無いかと……。

ベイクする文字の指定


ベイクする文字の指定方法はいくつかあります。

f:id:OrotiYamatano:20201121023730p:plain

  1. ASCII→ASCIIコードでの指定です。ASCIIコード表にある全ての文字がベイクされます。
  2. Extended ASCII→拡張ASCIIコード指定です。拡張ASCIIのすべての文字がベイクされます。
  3. ASCII Lowercase→ ASCII Lowercaseコード指定です。
  4. ASCII Uppercase→ ASCII Uppercaseコード指定です。
  5. Numbers+Symbols→番号記号またはナンバーサインと呼ばれる文字列がベイクされます。
  6. Custom Range→Decimal(10進数)で指定された文字(文字コード)をベイクします。今回これを使います。
  7. Unicode Range(Hex)→ Hex(16進数)Unicodeで指定された文字コードをベイクします。
  8. Custom Characters→指定した文字がベイクされます。(文字をそのまま入力する)
  9. Character from File→文字が入力されたテキストを指定します。そのテキストがベイクされます。(多分)

ASCII系↓ theasciicode.com.ar

Numbers+Symbols↓ coolsymbol.com


今回ベイクするのは常用漢字などです。
↓ここの文字列を使わせていただくことにしました。
gist.github.com

準備が出来たらGenerate Font Atlasをクリックします。
f:id:OrotiYamatano:20201121025834p:plain

するとベイクが始まります。
f:id:OrotiYamatano:20201121025901p:plain

始まらない場合、エラーが表示されるので、そのエラーを解決してベイクしましょう。
性能の低いPCでは固まってしまうこともあるので触らずに気長に待ちましょう。

エラーがなければすべてベイクされるはずです。
f:id:OrotiYamatano:20201121030043p:plain

Saveをクリックして保存しておきましょう。

ここまで来て言うのは何なんですが、画像を見ると included 2434/2635 とすべてベイク出来ていないようです。
いらない文字が入ってしまっていただけだとは思いますが気になる方は
↓こちらのほうを利用してCustom Charactersでベイクし直したほうが良いかも知れません。
gist.github.com


ベイクされたことでアセットのマテリアルとテクスチャが保存されたはずです。
びっしりと白い文字が割り当てられてるか確認してみましょう。
f:id:OrotiYamatano:20201121030315p:plain f:id:OrotiYamatano:20201121030329p:plain

これでもう使えます。
マテリアルとテクスチャの設定が出来るのですが、要望があれば別途記事を書きます。
ココに関しては他の方も記事を書かれているので私が書く必要はないと思いますが……。

TextMeshProの表示


TextMeshProの表示は普通のテキストとほとんど似ています。
解説する必要もほとんど無いと思うのでUIでの表示のみ解説します。

挿入したいところに右クリック> UI>Text -TxteMeshProを選択
f:id:OrotiYamatano:20201121030918p:plain

生成されたTxteMeshProのゲームオブジェクトのTxteMeshPro - Textコンポーネントを開き、MainSettings> Font Assetを生成したFont Assetに変更します。
f:id:OrotiYamatano:20201121031054p:plain

すると表示されるはずです。
後はTextMeshProのコンポーネントの値をいじって楽しんでみてください。
f:id:OrotiYamatano:20201121032021p:plain

縁取りの方法などは他の方の書かれた記事にも記載があるので、そちらの方が分かりやすいと思います。

アセットを更新しない限り、もうフォントは必要ないのでプロジェクトから消してしまっても構わないです。
注意事項としてはGitでこのアセットを管理するときにバイナリで管理されるため読み込みに失敗して、テクスチャアトラスの参照が剥がれてしまうことがあるようです。
あまりにも高頻度で参照が剥がれてしまうようでしたら今回解説したFallback Font Assets機能を使って、2048*2048のテクスチャ複数枚で管理するなどをおすすめします。

一旦これで以上になります。
閲覧ありがとうございました。

まとめ


以上でTextMeshProの使い方を終わりにします。
間違っていたら連絡ください手直しいたします。
今回はベイクするまでの設定を中心に教えましたが、TextMeshProはベイクする作業より色々装飾をつける作業のほうが楽しいので、ここで終わりにせず色々いじってみて欲しいです。
私としてはベイクについて中心的に述べてある記事が少ないことが気がかりだったために、この記事を書きました、装飾の仕方などは別の方の記事を参考にしていただければと思います。
(それはそれとして要望があれば書きます。Twitterなりでメンションくれれば即反応すると思います)
これからTextMeshProを始める人の手助けになれば幸いです。
以上、やまだたいし( やまだ たいし (@OrotiYamatano) | Twitter )でした。