ゲーム開発
Unity
UnrealEngine
C++
Blender
ゲーム数学
ゲームAI
グラフィックス
サウンド
アニメーション
GBDK
制作日記
IT関連
ツール開発
フロントエンド関連
サーバサイド関連
WordPress関連
ソフトウェア設計
おすすめ技術書
音楽
DTM
楽器・機材
ピアノ
ラーメン日記
四コマ漫画
その他
おすすめアイテム
おもしろコラム
  • ゲーム開発
    • Unity
    • UnrealEngine
    • C++
    • Blender
    • ゲーム数学
    • ゲームAI
    • グラフィックス
    • サウンド
    • アニメーション
    • GBDK
    • 制作日記
  • IT関連
    • ツール開発
    • フロントエンド関連
    • サーバサイド関連
    • WordPress関連
    • ソフトウェア設計
    • おすすめ技術書
  • 音楽
    • DTM
    • 楽器・機材
    • ピアノ
  • ラーメン日記
    • 四コマ漫画
      • その他
        • おすすめアイテム
        • おもしろコラム
      1. ホーム
      2. 20200927_02

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

      Unityゴーゴーゴロヤンもぐら叩きAR
      2020-09-27

      マイケル
      マイケル
      TextMeshPro使うの楽しいな〜〜〜
      エレキベア
      エレキベア
      何それクマ
      マイケル
      マイケル
      おやおや知らないのかいエレキベア!
      説明しよう!!
      エレキベア
      エレキベア
      (むかつクマ・・・。)
      マイケル
      マイケル
      TextMeshProとは!!
      TextMeshProとは
      • フォントやアウトラインなど高度な設定が可能な、テキスト作成のためのUnityアセットのこと!

      ↑フォント・アウトラインの設定例
      エレキベア
      エレキベア
      これまでよく使ってたやつクマね
      マイケル
      マイケル
      標準のuGUIのテキストよりも幅広いから有用性が高いんだ。
      マイケル
      マイケル
      しかしフォントを変更することはできるけど、
      どうせなら自分で作成したフォントも設定してみたい・・・。
      マイケル
      マイケル
      そう思って調べてみたら、案外簡単にできそうだったので試してみたよ!
      エレキベア
      エレキベア
      自分で作ったフォントを使えたら更に幅が広がるクマね〜〜〜〜
      マイケル
      マイケル
      それじゃ早速やり方をみていこう!

      自作フォントの設定方法

      自作フォントの作成

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

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

      Spriteの分割

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


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

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

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

      Sprite Assetの作成

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

      TextMeshProの設定

      マイケル
      マイケル
      ここまで作成したらあとはTextMeshProで設定するだけ!
      マイケル
      マイケル
      TextMeshProのコンポーネントを作成し、
      Extra Settings -> Sprite Assetsに作成したAssetを設定しましょう。
      マイケル
      マイケル
      設定したらText欄に「<sprite=【IndexのID】>」と入力することで、
      作成したフォントを使うことができます。

      ↑作成したフォントで入力できる!
      エレキベア
      エレキベア
      できたクマ〜〜〜〜〜
      マイケル
      マイケル
      これでもう自由自在だぜ!!

      スクリプトからの設定

      マイケル
      マイケル
      最後にスクリプトから設定する方法について!
      マイケル
      マイケル
      こちらも同じように「<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で自作のフォントを設定する 〜完〜


      Unityゴーゴーゴロヤンもぐら叩きAR
      2020-09-27

      関連記事
      【Unity】Timeline × Excelでスライドショーを効率よく制作する
      2024-10-31
      【Unity】Boidsアルゴリズムを用いて魚の群集シミュレーションを実装する
      2024-05-28
      【Unity】GoでのランキングAPI実装とVPSへのデプロイ方法についてまとめる【Go言語】
      2024-04-14
      【Unity】第二回 Wwiseを使用したサウンド制御 〜インタラクティブミュージック編〜
      2024-03-30
      【Unity】第一回 Wwiseを使用したサウンド制御 〜基本動作編〜
      2024-03-30
      【Unity】第二回 CRI ADXを使用したサウンド制御 〜インタラクティブミュージック編〜
      2024-03-28
      【Unity】第一回 CRI ADXを使用したサウンド制御 〜基本動作、周波数解析編〜
      2024-03-28
      【Unity】サウンドミドルウェアに依存しない設計を考える【CRI ADX・Wwise】
      2024-03-27