
マイケル
TextMeshPro使うの楽しいな〜〜〜

エレキベア
何それクマ

マイケル
おやおや知らないのかいエレキベア!
説明しよう!!
説明しよう!!

エレキベア
(むかつクマ・・・。)

マイケル
TextMeshProとは!!
TextMeshProとは
- フォントやアウトラインなど高度な設定が可能な、テキスト作成のためのUnityアセットのこと!
↑フォント・アウトラインの設定例

エレキベア
これまでよく使ってたやつクマね

マイケル
標準のuGUIのテキストよりも幅広いから有用性が高いんだ。

マイケル
しかしフォントを変更することはできるけど、
どうせなら自分で作成したフォントも設定してみたい・・・。
どうせなら自分で作成したフォントも設定してみたい・・・。

マイケル
そう思って調べてみたら、案外簡単にできそうだったので試してみたよ!

エレキベア
自分で作ったフォントを使えたら更に幅が広がるクマね〜〜〜〜

マイケル
それじゃ早速やり方をみていこう!
自作フォントの設定方法
自作フォントの作成

マイケル
まずは設定するフォントを作成しましょう!
今回作成したのはこんな感じ!
今回作成したのはこんな感じ!
↑フォントを作成

マイケル
こんな感じで均等な幅で文字を並べて、画像として出力しましょう!

エレキベア
なんで縦長に作ったクマ??

マイケル
これは今回俺が使ったフォントの特性もあるけど、
文字ごとに横幅が異なる場合は、あとでSprite分割するときに幅を合わせやすいから縦長にしたんだ。
文字ごとに横幅が異なる場合は、あとでSprite分割するときに幅を合わせやすいから縦長にしたんだ。

エレキベア
確かに横幅を合わせないと文字列にした時に
バランスが悪くなってしまうクマね・・・。
バランスが悪くなってしまうクマね・・・。

マイケル
逆に縦幅がバラバラな場合には、横長の方が調整しやすいかもしれません。
Spriteの分割

マイケル
画像を出力したらUnityでSpriteとして読み込みましょう!

マイケル
読み込んだら、インスペクタから「Sprite Editor(※1)」を押下してエディタを開きます。
※1)Sprite Editorがない場合は、「2D Sprite」パッケージをインポートすると使えるようになります。

マイケル
エディタを開いたら
① 左上の「Slice」で文字ごとに自動分割して、
② 切り取られた各文字の大きさを調整
します!!
① 左上の「Slice」で文字ごとに自動分割して、
② 切り取られた各文字の大きさを調整
します!!

エレキベア
ここで各文字の幅を合わせるクマね

マイケル
その通り!
調整が終わったら忘れずに「Apply」を押下しましょう。
調整が終わったら忘れずに「Apply」を押下しましょう。
Sprite Assetの作成

マイケル
幅を調整したら、Spriteを選択後
「Create -> TextMeshPro -> Sprite Asset」を押下
してSprite Assetを作成します!
「Create -> TextMeshPro -> Sprite Asset」を押下
してSprite Assetを作成します!

エレキベア
拡張子が「.asset」のファイルができたクマ

マイケル
ファイルができたら、次は各文字のIDを設定します。
Assetを選択して、「Up」「Down」で順番を入れ換えて「Index」の値を調整しましょう!
Assetを選択して、「Up」「Down」で順番を入れ換えて「Index」の値を調整しましょう!

マイケル
この値が文字を設定する時のIDになります。

エレキベア
重要な値なのクマね

マイケル
ちなみに下記のように数字以外の文字も同様にIDを設定することで呼び出すことができます。

エレキベア
「G」のIDが「11」、
「!」のIDが「13」みたいな感じクマね
「!」のIDが「13」みたいな感じクマね
TextMeshProの設定

マイケル
ここまで作成したらあとはTextMeshProで設定するだけ!

マイケル
TextMeshProのコンポーネントを作成し、
Extra Settings -> Sprite Assetsに作成したAssetを設定しましょう。
Extra Settings -> Sprite Assetsに作成したAssetを設定しましょう。

マイケル
設定したらText欄に「<sprite=【IndexのID】>」と入力することで、
作成したフォントを使うことができます。
作成したフォントを使うことができます。
↑作成したフォントで入力できる!

エレキベア
できたクマ〜〜〜〜〜

マイケル
これでもう自由自在だぜ!!
スクリプトからの設定

マイケル
最後にスクリプトから設定する方法について!

マイケル
こちらも同じように「<sprite=【IndexのID】>」の形で設定するだけなのですが、
作成する文字が多くなるほど設定が大変になってきます。
作成する文字が多くなるほど設定が大変になってきます。

エレキベア
それぞれの文字にIDが振られてるクマしね〜〜〜

マイケル
そのため、下記のように変換用のメソッドを作成してあげると
文字が増えた時や変更があった時でも対処しやすくなります!
文字が増えた時や変更があった時でも対処しやすくなります!

マイケル
上記スクリプトの例では、
「【TMPコンポーネント】.text = ConvUtil.ConvFoolCoolFont(【文字列】);」
のように、文字列を渡すだけで使用できるようになります!
「【TMPコンポーネント】.text = ConvUtil.ConvFoolCoolFont(【文字列】);」
のように、文字列を渡すだけで使用できるようになります!

エレキベア
これならメンテもしやすそうクマね
おわりに

マイケル
というわけで今回はTextMeshProの自作フォント設定についてでした!
どうだったかな??
どうだったかな??

エレキベア
他のフォントと同じように使えるようになって感動だったクマ

マイケル
テキスト設定は汎用性が高いから、やり方は覚えておいて損はなさそうだね。

マイケル
それではまた次回!
アデュ〜〜〜!!
アデュ〜〜〜!!

エレキベア
クマ〜〜〜〜〜〜〜〜
【Unity】TextMeshProで自作のフォントを設定する 〜完〜