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


はじめに
-----
この記事の内容は、Textコンポーネントで使うフォントについてよく知らない方も対象に入れて書かれています。
uGUIでビットマップフォントを扱う時の具体的な手順のみを知りたい場合、(3)からお読みいただくか、[リポジトリのReadme](https://github.com/barasixi/bitmapfont-for-ugui)をご覧ください。

追記(2017/4/23) Unity5.5.3での動作確認済み

(1)ビットマップフォントってなに？
---
アトラス（画像）を使って文字を表示するフォントです。

- フォントアトラスの例
![スクリーンショット 2016-02-03 15.57.38.png](https://qiita-image-store.s3.amazonaws.com/0/14945/60d5504f-be13-57c8-30eb-2dbcde356ea4.png "スクリーンショット 2016-02-03 15.57.38.png")

uGUIのTextを使って文字を表示する場合、2種類のフォントデータ形式があります。


### ダイナミックフォント
フォントファイル（.ttf/.otf）を使って文字を表示します。

* 特徴
  * 多くの種類の文字を表示できる（フォントに入ってる文字が多い）
  * フォントファイルさえあれば良いので導入が楽
* デメリット
 * ファイルサイズが4MB程度あるが、圧縮が殆ど効かないため複数のフォントが使いにくい。
 * 見た目の華やかさはビットマップフォントに劣る

### ビットマップフォント
文字のアトラスから任意の文字を表示します。

* 特徴
  * PhotoShopなどで装飾した華やかな文字が使える
* デメリット
  * uGUIの場合、<u>TextのFontSizeの値で大きさを変更できない。</u>
  * 文字詰めやBestFit機能など、ダイナミックフォントで使える機能が一部使えない
  * アトラスに存在する文字しか表示できない
  * 拡大しすぎるとぼやける（画像なので）
  * 文字数が多い、デザインの種類が多いとアトラスが増えて、ダイナミックフォントより容量を食ってしまう。


#### フォントデータの扱い注意点

どちらのフォントデータ形式にもデメリットはありますが、共通して考えなければならないのは容量の問題です。
ダイナミックフォントは1種類、ビットマップフォントは数字と一部の記号（！、？など）のみで使うと容量面のデメリットを抑えられて良いと思います。


(2)uGUIでビットマップフォントを使うには？
-----
1. BMFontなどのビットマップフォント作成ソフトで使いたいフォントデータのアトラスとfntファイルを出力する
1. 出力したアトラスに装飾を加える（用途によります）
1. フォントアトラスとfntファイルをUnityのプロジェクトに追加する
1. フォントアトラス用のマテリアルを作成する
1. FontSettingファイルを作成する（<b>手作業だと大変！</b>）
1. FontSettingファイルをTextコンポーネントのFontに設定すると使えるようになる

### FontSettingを作るのが大変
FontSettingはある文字がフォントアトラスのどの座標に対応しているかなどの情報がまとまったアセットです。
1文字分ずつ情報が保存されています。

![スクリーンショット 2015-11-12 17.28.05.png](https://qiita-image-store.s3.amazonaws.com/0/14945/94605db6-6c4b-6992-43bf-b433d3d16fa8.png "スクリーンショット 2015-11-12 17.28.05.png")

画像のような情報が1文字分ずつあって手作業では大変です。
uGUI用のスクリプトは何種類かあったのですが、痒いところに手が届かなかったので自作しました。


(3)FontSettingをスクリプトを使って作成する
-----
Githubにソースコードをアップしました。

https://github.com/barasixi/bitmapfont-for-ugui

* BitmapFontGenerator.cs
  * フォントアトラスとfntファイルを元に、fontSettingファイルとMaterialを生成するスクリプトです。
  * fntファイルの出力形式は「XML」のみ対応しています。
* BitmapFontScaling.cs
  * ビットマップフォントでTextのFontSizeに応じたサイズ可変を行うことができるスクリプトです。


### BitmapFontGeneratorの使い方
1. BMFontなどでアトラスファイルとfntファイルを出力する。
  - BMFontを使う場合、fntファイルの形式は<b>「XML」形式</b>を選択してください。

1. BitmapFontGenerator.csをEditorフォルダへ追加してください。

1. フォントアトラスファイルとfntファイルを選択状態に。
![スクリーンショット 2015-11-12 17.44.47.png](https://qiita-image-store.s3.amazonaws.com/0/14945/23cea341-0d39-7cea-d414-5a2a8a8f9b2d.png "スクリーンショット 2015-11-12 17.44.47.png")

1. 右クリック、Create→BitmapFontを選択します。

1. 同一フォルダにFontSettingファイルとMaterialファイルが作成されます。

![スクリーンショット 2015-11-12 17.45.33.png](https://qiita-image-store.s3.amazonaws.com/0/14945/e8797fad-99b1-c9d1-9f90-d7a7dc76e8ad.png "スクリーンショット 2015-11-12 17.45.33.png")

### 出力したFontSettingファイルを使う
TextコンポーネントのFont欄に出力したFontファイルをリンクするだけです。（ダイナミックフォントと同じですね）
Text欄に文字を打ち込むと画面に表示されます。

![スクリーンショット 2015-11-12 17.51.27.png](https://qiita-image-store.s3.amazonaws.com/0/14945/042baa6e-2864-5d08-6717-e599e195096b.png "スクリーンショット 2015-11-12 17.51.27.png")

![スクリーンショット 2015-11-12 18.38.20.png](https://qiita-image-store.s3.amazonaws.com/0/14945/179b6e3b-8447-c5ce-1cad-f3359bda08e7.png "スクリーンショット 2015-11-12 18.38.20.png")


(4)ビットマップフォントでもFontSizeで大きさを変えたい！
-----
弊社のデザイナーさんからの要望があったため対応してみました。
ただし、画像なので拡大しすぎると荒くなってしまうので注意。

### 使い方
ビットマップフォントを使うTextコンポーネントがついたゲームオブジェクトにスクリプトをアタッチしてください。

Add Component -> Bitmap Font Scaling

図のようにTextと同じオブジェクトにくっつけます。

![スクリーンショット 2015-11-12 18.12.10.png](https://qiita-image-store.s3.amazonaws.com/0/14945/36358710-ed63-61e9-247b-79e78eebfee4.png "スクリーンショット 2015-11-12 18.12.10.png")

<br>
下図の1行目のテキストはFontSize:40で
2行目のテキストはFontSize:25です。
サイズの制御はTextのFontSizeを弄ればOKです。

![スクリーンショット 2015-11-12 18.19.48.png](https://qiita-image-store.s3.amazonaws.com/0/14945/c0b09ef3-1c14-e563-5a18-5983ed3c7828.png "スクリーンショット 2015-11-12 18.19.48.png")

- TrueTypeのフォントの場合、BMFontで出力する時にFont Settingsの【Render from TrueType outline】と【Match char height】にチェックを入れてください。


(5)まとめ
-----
* ビットマップフォントを使う時はフォントアトラスとfntファイル（フォントデータ）とFontSettingファイルを用意しよう。
* BitmapFontGeneratorを使うとXML形式のfntファイルからFontSettingファイルを1クリックで生成できるよ。
* FontSizeの値でビットマップフォントを拡縮したい場合はBitmapFontScalingスクリプトを使ってみてね。