MacでShoeboxを使ってビットマップフォントを作成してUnityで表示する

## 1.Shoeboxをインストール
Shoeboxを下記サイトよりダウンロードしてインストールする。
http://renderhjs.net/shoebox/

## 2.画像準備
ビットマップフォントにしたい画像を用意する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/88968/b9a4a59a-5a3c-8cdf-641c-872101f3a0ae.jpeg" width=50%>

## 3.ビットマップフォントを生成する
Shoeboxを起動して、用意した画像をGUIタブにあるBitmap Fontというところにドラッグ&ドロップする。
![sample1.jpg](https://qiita-image-store.s3.amazonaws.com/0/88968/043b99e0-e18e-4107-5e3c-5bcb50936085.jpeg)

すると下記のような画面になる（はず）
<img width="633" alt="sample2.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/e25fe700-e1de-034c-7e38-507e5753974b.png">

画像と設定されている文字列が違うので設定が必要になる。
Settingsをクリックして設定ウィンドウを表示させ、
・Templateを「FNT-xml Starling」に設定
・Txt Charsを「0123456789」に設定（使いたい文字を入力）
と設定したらApplyをクリックする。
<img width="378" alt="sample3.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/67477b2c-1d1b-bd0d-b261-a2d54b1a8df3.png">

上手くいっていれば、画像の数字と設定文字が一致している。（はず）
問題なければ、Save Fontをクリックする。
<img width="634" alt="sample4.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/339b1b0c-2bda-487e-db71-d43cc05a131e.png">

元画像と同じディレクトリに、パッキングされた画像とxmlファイルが生成される。
<img width="219" alt="sample5.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/bef957ec-c852-0614-bd25-9590ae7cf5fc.png">

生成されたxmlファイルが不具合(?)で一部壊れているので、何かのテキストエディタで修正する。（パス指定の部分が改行されてしまってる）

```xml:修正前
<font>
	<info face="/Users/UserName/Desktop/ダメージ数字
um_attr3-export" size="80" />
	<common lineHeight="80" scaleW="161" scaleH="172" pages="1" />
	<pages>
		<page id="0" file="/Users/koikejun/Desktop/ダメージ数字
um_attr3-export.png" />
	</pages>
	<chars count="12">
		<char id="48" x="88" y="0" width="36" height="49" xoffset="0" yoffset="20" xadvance="37" /><!-- 0 -->
		<char id="49" x="124" y="122" width="29" height="49" xoffset="0" yoffset="19" xadvance="30" /><!-- 1 -->
		<char id="50" x="86" y="120" width="37" height="49" xoffset="0" yoffset="20" xadvance="38" /><!-- 2 -->
		<char id="51" x="125" y="61" width="35" height="60" xoffset="0" yoffset="20" xadvance="36" /><!-- 3 -->
		<char id="52" x="0" y="0" width="45" height="61" xoffset="0" yoffset="19" xadvance="46" /><!-- 4 -->
		<char id="53" x="86" y="60" width="38" height="59" xoffset="0" yoffset="21" xadvance="39" /><!-- 5 -->
		<char id="54" x="0" y="62" width="42" height="60" xoffset="0" yoffset="9" xadvance="43" /><!-- 6 -->
		<char id="55" x="46" y="0" width="41" height="59" xoffset="0" yoffset="21" xadvance="42" /><!-- 7 -->
		<char id="56" x="125" y="0" width="35" height="60" xoffset="0" yoffset="9" xadvance="36" /><!-- 8 -->
		<char id="57" x="43" y="62" width="42" height="61" xoffset="0" yoffset="23" xadvance="43" /><!-- 9 -->
		<char id="32" x="0" y="0" width="0" height="0" xoffset="0" yoffset="0" xadvance="20" /><!--   -->
		<char id="9" x="0" y="0" width="0" height="0" xoffset="0" yoffset="0" xadvance="160" /><!-- 	 -->
	</chars>
	<kernings count="0">
	</kernings>
</font>
```

``` xml:修正後
<font>
	<info face="/Users/UserName/Desktop/ダメージ数字/num_attr3-export" size="80" />
	<common lineHeight="80" scaleW="161" scaleH="172" pages="1" />
	<pages>
		<page id="0" file="/Users/koikejun/Desktop/ダメージ数字/num_attr3-export.png" />
	</pages>
	<chars count="12">
		<char id="48" x="88" y="0" width="36" height="49" xoffset="0" yoffset="20" xadvance="37" /><!-- 0 -->
		<char id="49" x="124" y="122" width="29" height="49" xoffset="0" yoffset="19" xadvance="30" /><!-- 1 -->
		<char id="50" x="86" y="120" width="37" height="49" xoffset="0" yoffset="20" xadvance="38" /><!-- 2 -->
		<char id="51" x="125" y="61" width="35" height="60" xoffset="0" yoffset="20" xadvance="36" /><!-- 3 -->
		<char id="52" x="0" y="0" width="45" height="61" xoffset="0" yoffset="19" xadvance="46" /><!-- 4 -->
		<char id="53" x="86" y="60" width="38" height="59" xoffset="0" yoffset="21" xadvance="39" /><!-- 5 -->
		<char id="54" x="0" y="62" width="42" height="60" xoffset="0" yoffset="9" xadvance="43" /><!-- 6 -->
		<char id="55" x="46" y="0" width="41" height="59" xoffset="0" yoffset="21" xadvance="42" /><!-- 7 -->
		<char id="56" x="125" y="0" width="35" height="60" xoffset="0" yoffset="9" xadvance="36" /><!-- 8 -->
		<char id="57" x="43" y="62" width="42" height="61" xoffset="0" yoffset="23" xadvance="43" /><!-- 9 -->
		<char id="32" x="0" y="0" width="0" height="0" xoffset="0" yoffset="0" xadvance="20" /><!--   -->
		<char id="9" x="0" y="0" width="0" height="0" xoffset="0" yoffset="0" xadvance="160" /><!-- 	 -->
	</chars>
	<kernings count="0">
	</kernings>
</font>
```

## 4.Unityにビットマップフォントをインポートする
ShoeBox Tools for Unityをインポートする。
https://assetstore.unity.com/packages/tools/sprite-management/shoebox-tools-for-unity-35760

Asset->ShowBox Tools->Import Bitmap Font
でxmlファイルを選択する。
<img width="50%" alt="sample2.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/8e19051f-e0a2-24b6-5aeb-66d1069a717a.jpeg">

3ファイルがAssets直下に生成される
<img width="311" alt="sample9.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/37df5b9f-d416-5709-5b73-9e3d4b2a187d.png">

uGUIのTextのFont指定に先程生成されたものを指定する、無事ビットマップフォントが表示される。
<img width="50%" alt="sample10.png" src="https://qiita-image-store.s3.amazonaws.com/0/88968/5a4fceff-eeb1-23ed-780f-dd09a645bf2c.png">