【Unity】uGUIでビットマップフォントを表示する方法

ugui-bitmap-font

uGUIの通常のテキストは、アウトラインやドロップシャドウはつけられるものの、装飾としてはまだまだ足りない物があります。

ですので、Photoshopなどで装飾した文字画像をフォントとして表現できるビットマップフォントを作成してみました。

素材の作成

Photoshopのレイヤースタイルで、加工した数字を作成します

Noto Sans CJK JPに境界線+光彩(内側)+グラデーションオーバーレイ+ドロップシャドウを追加

文字が分けやすいように、少しだけ文字間隔調整

f:id:min0124:20171119102455p:plain

ShoeBoxのインストール

下記のURLからShoeBoxをインストールします

ShoeBox

ShoeBoxでビットマップフォント作成

f:id:min0124:20171119104830p:plain

  • ソフトを起動し、GUIタブを開き、Bitmap Fontに向かって、画像をドラッグ&ドロップ

  • 新しいウィンドウが起動、Auto fit Settingsボタンを押して、スプライトを分割する

  • その他設定。Settingsを開く

  • Template>ModifiedをFNT-xml Staling

  • File Nameを変更

  • 画像に振り分けられている文字の調整 Txt Chars を調整

  • 画像を見て、設定が良さそうであれば、Save Fontボタンで出力(.xmlとpng)

Unityで設定する方法

  • Unityを開き、ShoeBox Tools for Unity(無料)のアセットをインポート

ShoeBox Tools for Unity - Asset Store

  • Assetsに先程出力したxmlファイルを置く

  • メニュー Assets>ShoeBox Tools>Import Bitmap Fontsを選択し、XMLファイルを選択

f:id:min0124:20171119103539p:plain

  • あとはuGUIのテキストを作成し、文字を入力。生成したフォントとシェーダーを適応するとビットマップフォントとして機能することを確認します

f:id:min0124:20171119103834p:plain

参考

Bitmap Font

etc:ShoeBoxでビットマップフォントを作る - devlog [naru design]

chrooot: ShoeBoxを使用してフォントを作成して表示する。

ビットマップフォントを自分で描いて、Cocos2d-xで表示してみよう - WonderPlanet DEVELOPER BLOG

uGUIでビットマップフォントを使ってみよう - Qiita