【Unity】TextMeshProで自作のフォントを設定する

Unity
マイケル
マイケル
TextMeshPro使うの楽しいな〜〜〜
エレキベア
エレキベア
何それクマ
マイケル
マイケル
おやおや知らないのかいエレキベア!
説明しよう!!
エレキベア
エレキベア
(むかつクマ・・・。)
マイケル
マイケル
TextMeshProとは!!
TextMeshProとは
  • フォントやアウトラインなど高度な設定が可能な、テキスト作成のためのUnityアセットのこと!
IMG 7206
↑フォント・アウトラインの設定例
エレキベア
エレキベア
これまでよく使ってたやつクマね
マイケル
マイケル
標準のuGUIのテキストよりも幅広いから有用性が高いんだ。
マイケル
マイケル
しかしフォントを変更することはできるけど、
どうせなら自分で作成したフォントも設定してみたい・・・。
マイケル
マイケル
そう思って調べてみたら、案外簡単にできそうだったので試してみたよ!
エレキベア
エレキベア
自分で作ったフォントを使えたら更に幅が広がるクマね〜〜〜〜
マイケル
マイケル
それじゃ早速やり方をみていこう!
スポンサーリンク

自作フォントの設定方法

自作フォントの作成

マイケル
マイケル
まずは設定するフォントを作成しましょう!
今回作成したのはこんな感じ!
Screenshot 2020 09 27 16 59 30
FoolCoolFont
↑フォントを作成
マイケル
マイケル
こんな感じで均等な幅で文字を並べて、画像として出力しましょう!
エレキベア
エレキベア
なんで縦長に作ったクマ??
マイケル
マイケル
これは今回俺が使ったフォントの特性もあるけど、
文字ごとに横幅が異なる場合は、あとでSprite分割するときに幅を合わせやすいから縦長にしたんだ。
エレキベア
エレキベア
確かに横幅を合わせないと文字列にした時に
バランスが悪くなってしまうクマね・・・。
マイケル
マイケル
逆に縦幅がバラバラな場合には、横長の方が調整しやすいかもしれません。

Spriteの分割

マイケル
マイケル
画像を出力したらUnityでSpriteとして読み込みましょう!
Screenshot 2020 09 27 17 01 22
マイケル
マイケル
読み込んだら、インスペクタから「Sprite Editor(※1)」を押下してエディタを開きます。


※1)Sprite Editorがない場合は、「2D Sprite」パッケージをインポートすると使えるようになります。

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

します!!
エレキベア
エレキベア
ここで各文字の幅を合わせるクマね
マイケル
マイケル
その通り!
調整が終わったら忘れずに「Apply」を押下しましょう。

Sprite Assetの作成

マイケル
マイケル
幅を調整したら、Spriteを選択後
「Create -> TextMeshPro -> Sprite Asset」を押下
してSprite Assetを作成します!
Screenshot 2020 09 27 17 02 31
エレキベア
エレキベア
拡張子が「.asset」のファイルができたクマ
マイケル
マイケル
ファイルができたら、次は各文字のIDを設定します。
Assetを選択して、「Up」「Down」で順番を入れ換えて「Index」の値を調整しましょう!
マイケル
マイケル
この値が文字を設定する時のIDになります。
エレキベア
エレキベア
重要な値なのクマね
Screenshot 2020 09 27 17 03 06
マイケル
マイケル
ちなみに下記のように数字以外の文字も同様にIDを設定することで呼び出すことができます。
Screenshot 2020 09 27 17 03 23
エレキベア
エレキベア
「G」のIDが「11」、
「!」のIDが「13」みたいな感じクマね

TextMeshProの設定

マイケル
マイケル
ここまで作成したらあとはTextMeshProで設定するだけ!
マイケル
マイケル
TextMeshProのコンポーネントを作成し、
Extra Settings -> Sprite Assetsに作成したAssetを設定しましょう。
Screenshot 2020 09 27 17 03 57
マイケル
マイケル
設定したらText欄に「<sprite=【IndexのID】>」と入力することで、
作成したフォントを使うことができます。
Screenshot 2020 09 27 17 04 12
Screenshot 2020 09 27 17 04 31
↑作成したフォントで入力できる!
エレキベア
エレキベア
できたクマ〜〜〜〜〜
マイケル
マイケル
これでもう自由自在だぜ!!

スクリプトからの設定

マイケル
マイケル
最後にスクリプトから設定する方法について!
マイケル
マイケル
こちらも同じように「<sprite=【IndexのID】>」の形で設定するだけなのですが、
作成する文字が多くなるほど設定が大変になってきます。
エレキベア
エレキベア
それぞれの文字にIDが振られてるクマしね〜〜〜
マイケル
マイケル
そのため、下記のように変換用のメソッドを作成してあげると
文字が増えた時や変更があった時でも対処しやすくなります!
using System;

public static class ConvUtil
{
    // SpriteAssets変換用
    public static string ConvFoolCoolFont(string str)
    {
        string rtnStr = "";
        // NULLの場合対象外
        if (str == null)
            return rtnStr;
        // 文字列を一文字ずつ変換
        for (int i = 0; i < str.Length; i++)
        {
            // 文字列変換
            string convStr;
            switch (str[i])
            {
                case '-':
                    convStr = "10";
                    break;
                case 'G':
                    convStr = "11";
                    break;
                case 'O':
                    convStr = "12";
                    break;
                case '!':
                    convStr = "13";
                    break;
                // 上記以外(0〜9はそのままIndexのIDに設定)
                default:
                    convStr = str[i].ToString();
                    break;
            }
            // 「<sprite=【IndexのID】>」の形に変換
            rtnStr += "<sprite=" + convStr + ">";
        }
        return rtnStr;
    }
}
マイケル
マイケル
上記スクリプトの例では、
「【TMPコンポーネント】.text = ConvUtil.ConvFoolCoolFont(【文字列】);」
のように、文字列を渡すだけで使用できるようになります!
エレキベア
エレキベア
これならメンテもしやすそうクマね

おわりに

マイケル
マイケル
というわけで今回はTextMeshProの自作フォント設定についてでした!
どうだったかな??
エレキベア
エレキベア
他のフォントと同じように使えるようになって感動だったクマ
マイケル
マイケル
テキスト設定は汎用性が高いから、やり方は覚えておいて損はなさそうだね。
マイケル
マイケル
それではまた次回!
アデュ〜〜〜!!
エレキベア
エレキベア
クマ〜〜〜〜〜〜〜〜

【Unity】TextMeshProで自作のフォントを設定する 〜完〜

コメント