TextMeshProを利用し、PixelMplusを綺麗に表示する

# 概要
タイトル通り、 `TextMeshPro` を利用して、8bitビットマップふうフォント、 `PixelMplus` を綺麗に表示する手順についてです。

また、 `PixelMplus` には、 `10ピクセル`、 `12ピクセル` にそれぞれ `Bold` 、 `Regular` と4種類がありますが、今回は `10ピクセル` の `Regular` を利用します。

サクッと行けるかと思いましたが、意外と面倒だったので、健忘録として残します。

## 環境

Unity : 2020.1.0f1
OS : Windows 10
TextMeshPro : 3.0.1

## 準備概要
前準備としては以下となります。

1. `PixelMplus` フォントをダウンロード
2. `Unity` のプロジェクトを `2D` で作成
2. `Unity` に `PicelMplus` を読み込む
3. `Unity` に `TextMeshPro` のアセットを追加
4. `Font Asset Creator` で `Font Asset` を作成

## 利用手順概要
Scene内で行う、実際の大まかな手順は以下となります。

1. `Scene` に `Text - TextMeshPro` を追加
2.  `TextMeshPro` コンポーネントの設定
2.  表示確認

# 準備

## `PixelMplus` フォントをダウンロード

[itouhiroはてなブログ](http://itouhiro.hatenablog.com/entry/20130602/font)さんの記事中程に `ダウンロード` リンクがあるので、こちらからフォントが入ったzipをダウンロードしましょう。
具体的なファイルは `PixelMplus10-Regular.ttf` となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/3467d2c1-6913-aeb2-1e29-399b4eed585a.png)

## `Unity` のプロジェクトを `2D` で作成

他のモードでも行けるかもですが、今回は `2D` でプロジェクトを作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b67c9bf9-79b0-f805-9fb2-ce43bc40fbee.png)

## `Unity` に `PicelMplus` を読み込む

`Assets` 配下に適当にフォント用フォルダ等を作って、そこに `PixelMplus10-Regular.ttf` ファイルをドラッグ&ドロップするだけでOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/1e7ad0f3-3ea7-b050-839d-b5e993d8420f.png)

## `Unity` に `TextMeshPro` のアセットを追加

デフォルトでは `TextMeshPro` は利用できないので、 `PackageManager` からパッケージをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/ce1030c3-fe7b-78a4-1c57-6d3a91335689.png)
`Packages: Unity Registry` を選択。 `TextMeshPro` を探して、 `Install`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/c002490b-86d9-e655-db14-fc48a0b905b7.png)

## `Font Asset Creator` で `Font Asset` を作成

### Font Asset Creator のパネルを開く

`TextMeshPro` のパッケージが追加されると、 `Window` から関連メニューが開けるようになります。
`Font Asset Creator` を選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/fa9ffff6-3125-4eab-b461-b7b7d24bf539.png)

### Font Asset Creator

このようなパネルが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/b33d3b57-1f95-c47a-6253-dda06c39f27a.png)

今回は各値を以下のように設定します。

|項目|概要|今回設定する内容|設定根拠|
|:--|:--|:--|:--|
|Source Font File|フォントを設定|PixelMplus10-Regular.ttf||
|Sampling Point Size|作成するフォントのサイズ|Custom Size > 10|フォントが10ピクセルで作成されているため|
|Packaging Method|フォントの生成手続き？|Fast|Optimumにすると時間がかかってしまいます。おそらく生成時のフォントの綺麗さなどにえいきょうするのではとおもいますす、今回は `Fast` でも綺麗に出力できました|
|Padding|フォントアトラスでのフォント間の感覚|4|根拠がある数値ではないですが少し幅とっておけば大丈夫かと|
|Atlas Resolution|フォントアトラスを作成する画像の縦横サイズ| 512 x 512|フォントサイズやCustom Character List の文字数によって要調整|
|Charactor Set|対象文字列の指定方法|Custom Characters|今回は漢字は使わないので、直接文字列リストで指定|
|Select Font Asset|今回は利用しない|||
|Custom Character List|生成する文字列一覧| ※次項記載 |使いたい文字を記入|
|Render Mode|Font Atlasの生成モード|RASTER|にじみを発生させないために。 ちなみに、RASTERの場合フォントサイズがずれてると画像が乱れます。|

一通り設定が完了したら、 `Generate Font Atlas` で `Font Atlas` が生成され、 `Save` で `Font Asset` として、保存ができます。

以上で前準備が整いました。
次は、実際Scene内に作成した `Font Asset` を利用していきます。

### Custom Character List
今回、ファミコンっぽいゲームを作りたくてこの手続を進めているため、漢字が不要なので、以下のようなリストで `Font Atlas` を作成しました。
記号はなんかあると便利そうなので一応入れてます。

```
 !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё‐―‘’“”†‡‥…‰′″※‾℃Å←↑→↓⇒⇔∀∂∃∇∈∋√∝∞∠∥∧∨∩∪∫∬∴∵∽≒≠≡≦≧≪≫⊂⊃⊆⊇⊥⌒─━│┃┌┏┐┓└┗┘┛├┝┠┣┤┥┨┫┬┯┰┳┴┷┸┻┼┿╂╋■□▲△▼▽◆◇○◎●★☆♀♂♪♭♯　、。〃々〆〇〈〉《》「」『』【】〒〓〔〕ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん゛゜ゝゞァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ・ーヽヾ仝！＃＄％＆（）＊＋，－．／０１２３４５６７８９：；＜＝＞？＠ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［＼］＾＿｀ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ￠￡￢￣￥
```

日本語全体を利用されたい場合は [kgsi](https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4)さんが作成されている、 `japanese_full.txt` を利用させていただくのが良いかと。

# 利用手順

## `Scene` に `Text - TextMeshPro` を追加

`Hierarchy` メニューから `UI > Text - TextMeshPro` を選択。
`TextMeshPro` のコンポーネントがついた `Text` が作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/be5aad70-b85c-c422-8452-d79a42446df3.png)

## `TextMeshPro` コンポーネントの設定

`TextMeshPro` のコンポーネント配下のようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/d6740b37-bd57-2d69-d709-9f5e1dfca421.png)

今回はそれぞれ以下のようにせっていしました。
記載してない部分はデフォルト値のままです。

|項目|概要|今回設定する内容|設定根拠|
|:--|:--|:--|:--|
|Text Input|表示させたい文字|||
|Font Asset|Font Asset Creater で作成した `Font Asset`|||
|Font Size|フォントサイズ|10|ピクセルサイズを合わせます。 大きくしたい場合は10の倍数で上げていかないと、ドットの太さなどが揃いません|
|Spacing Options (em)|フォント間のスペース等|Character:10<br>Line:10|この辺は特に根拠もないので、自身の感覚で適宜幅を決めてください|

## 表示確認

こんな感じになりました。
ドットが綺麗に表示できています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/142886/43bec197-bc45-3cc4-585b-a7875b29c9cb.png)
ちなみに、 解像度設定を `free Aspect` にしていると、若干ドットがずれたりする場合があります。