今回は長くなったので２回に分けます。
UnityでUIのテキストを表示するときは、uGUIのTextを使うと思います。
（TextMeshProのTextもありますが、オリジナルのビットマップフォントを扱う方法が見つからなかったので割愛）
しかしフォントを使って文字を描画するよりも、自分で作った画像をテキストで表示したいときがあると思います。
特にダメージとかの数字は自分で作った数字画像、つまりビットマップフォントが扱えるとうれしいですね。
Unityではビットマップフォントをサポートしていますが、設定を手動でやる場合、0~9の数字を用意するだけでも結構面倒くさいです。
少しでも楽するためのツールとして、ShoeBoxというものがあったので使い方を紹介します。
・用意するもの
自作の文字画像を1枚にまとめたもの(今回は0~9の数字)
ShoeBox http://renderhjs.net/shoebox/
ShoeBox Tools for Unity https://www.assetstore.unity3d.com/jp/#!/content/35760
※ShoeBoxはAdobeAirで動作しているので、AdobeAirを先にインストールしておく必要があります。
今回はこちらの画像を使います。拾い物。
手順
ShoeBoxを起動すると、タブがSpritesを選んだ状態になってると思います。GUIタブを選んで、BitmapFontのところに画像をD&Dしてください。
新しく開いたウィンドウのSettingsを選ぶと、また新しいウィンドウが開きます。それのAdvancedタブを選択。するとこんな画面になると思います。
設定を以下のように変えてください。
・TemplateをFNT-xml Starlingに（FNT Unityってあるけど無視！！）
・下の方のTxt Charsを「5678901234」に（あとで解説）
一応これで最低限の設定はできてます。
他の項目に関してはこの記事の最後に補足程度に説明しておきます。
Txt Charsをこのように設定したのは、今回扱う画像の並びが「5687901234」になっているからです。
ShoeBoxは文字の形を認識してどの文字を使うか決定しているわけではなく、左上から画像の区切りを１つずつ認識しているだけです。
それぞれにどの文字を当てはめるかを決めるのがTxt Charsです。
Applyを押すと、以下のようになると思います。
上の画像が元画像、左下が完成画像、右下が文字を並べたらどうなるかを見れるところです。
が、なんだか正しく認識できてないっぽいですね。この場合、元画像の数字の間隔をいじってください。ShowBoxを開いたまま画像をいじって、SettingsウィンドウのApplyを押せば読み込み直してくれます。
今回は5~9を少し上にするだけで済みました。
きれいに出来るとこうなります。
思った通りになっていればSave Fontを押してください。元画像があった場所にpngとxmlファイルが作られます。
できたファイルをUnityに入れるのが次のステップですが、長くなったので記事を2つに分けます。次回更新までお待ち下さい。
何か不明点、間違っている点があればご指摘ください。
補足
ShoeBoxの設定で、大体いじるであろう項目の解説をしておきます。
・Kerning~~ ...カーニングに関する設定です。今回は数字だけなのでカーニングはしません。ていうか設定の仕方わかりません。
・Message ...完成画像の横に表示する文字です。どんな感じでフォントが並ぶか見れます。
・Tex Power Of Two ...完成画像の幅、高さを２の乗数にするかです。ゲームに使うならTrueのほうがいいかも。
・Txt Line Height ...行の高さです。
・Txt Monospace ...文字同士の間隔を詰めるかです。
・Txt Space Width ...スペース文字の間隔の広さです。
・Txt Tab Size Spaces ...タブ文字の大きさをスペースいくつ分にするかの設定です。2,4,8が主流ですね。
