【Unity】【TextMeshPro】Unicodeでスプライトに置き換える

**_Unity 2020.3.11f1_**
***

**Text Mesh Pro** の **Sprite Asset** の設定項目に **Unicode** があり、それの利用方法がイマイチ見つからなかったので
ここにまとめてみました。
![0_0_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/c17e9f64-2e41-6117-9fd1-c3b8a8f2f282.jpeg)

# やりたいこと
**自分で用意した数字やハイフンのテクスチャ**を **Text Mesh Pro** で表示したい。

 **Sprite Asset** を使用すればいけそうだということは分かったが、それを使うのにいちいち**タグを入れなければいけない**のが気になった。
そして、何やら設定に **Unicode** があるぞ…ということから、そのあたりを調査してみた。

:::note info
<img width="500" alt="0_0_1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/81c8a71e-1f2d-18c6-fd36-e1b9fe47586c.jpeg">
を表示するのに
<img width="500" alt="0_0_2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/e6f66188-00c7-bb8c-1b81-3de0ece6969d.jpeg">
のような入力をするのが、ちょっと嫌だ。
:::

# 先にちょっと仕組みを解説
入力された文字が **Font Asset** に登録した文字の中に無かった場合は
次に **Sprite Asset** から **Unicode** が一致するスプライトを引っ張ってきます。
<font color="firebrick">※ Unity 2018.4.36f1 のソースコードにより。</color>
<img width="500" alt="shikumi.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/88452291-bbcf-193b-d537-0e0a61111496.jpeg">

# 手順

### テクスチャ(スプライト)を用意
テクスチャを用意しUnityにインポートします。
今回は↓の画像を使用します。
<img width="15" alt="num.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/d9a426dd-a2c0-3c6c-92e5-1c25fe143458.gif">
ファイル名は **num.png** とします。
<font color="firebrick">※ Qiita上ではpngだとでなんかうまく表示してくれなかったので上に貼ってある画像はgifになっています。</font>

スプライトの **Inspector** で **Sprite Mode** を **Multiple** にして **Sprite Editor** で分割しておきます。
1つのサイズは下記画像のように **64x64** とします。
<img width="330" alt="sprite_slice.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/c0a6fbd5-11e9-97fe-aef6-155eceb3c1df.jpeg">

### Sprite Asset を作成
先ほど用意したテクスチャ(下画像)を **右クリック** → **Create** → **TextMeshPro** → **Sprite Asset** を選択。
![1_2_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/f2c37a50-3fe9-8d0a-c02e-71bb754e76fc.jpeg)
これでテクスチャと同名の **Sprite Asset** (下画像)が作成されるはずです。
![1_2_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/da5abb61-cf6d-207a-2f96-595842a738d0.jpeg)

### スプライトとUnicodeを紐づける
 **Sprite Asset** の **Inspector** から **Sprite Character Table** の各スプライトに **Unicode** を設定します。
今回で言うと **1 = 31, 2 = 32 ... 8 = 38, 9 = 39, 0 = 30, -(ハイフン) = 2D** という感じです。 
<img width="330" alt="1_3_0.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/aa7f7863-1c28-cadd-8225-c12754776f35.jpeg">

:::note warn
**詰まったこと**

**Unicode欄に入力してもデフォルトの値(FFFE)に戻されてしまう**
入力後、Enterキーを押したり、別のスプライトを選択したりしても入力した内容が保存されず、リセットされて FFFE になってしまう。
_解決_ 　入力後、他の項目、例えば Name などをアクティブ(マウスカーソルを合わせてクリック)にすると入力した値が反映される。
　　　以降、決定操作とする。

**ハイフンのUnicodeの入力を受け付けてくれない**
 Sprite Character Table にハイフンを設定する時に Unicode 欄に 2D を入力するが受け付けてくれない。
入力して決定操作をした時に FFFE に戻されてしまう。
_解決_ 　Unityをいったん閉じ、プロジェクトを開く直すと受け付けてくれるようになった。
　　　ハイフンでのみ、この現象が起きたが、もしかしたら他の文字でも起きる可能性はある。
　　　なんでこんなことになるのかは謎。
:::

### Font Asset の作成
任意のフォントから **Font Asset** を作成します。
今回は **ReplaceSpriteAsset** という名前の **Font Asset** になっております。
(あとで気付いたが名前に SpriteAsset がついててややこしい。このデータは **Sprite Asset** ではなくて **Font Asset** です。)
**Font Asset Creator** で登録する文字の指定は **_(アンダーバー) のみ**にします。(理由は後述)
<img width="330" alt="1_4_0.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/fd554362-5b25-a7b1-f9b5-33506c9c96f7.jpeg">
<font color="firebrick">※ ReplaceSpriteAsset というのは、TextMeshPro付属のフォント LiberationSans から作ったフォントアセットです。</font>

### Text Mesh Pro を配置して画面に表示させる
 **Hierarchy** に **Text Mesh Pro** を配置します。
 **Inspector** の **Main Settings** の **Font Asset** には先ほど作成した **Font Asset** を設定します。
<img width="330" alt="1_5_0.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/f5e7d068-545a-d3da-7e8c-e8d7855e2e54.jpeg">

 **Extra Settings** の **Sprite Asset** には先ほど作成した **Sprite Asset** を設定します。
<img width="330" alt="1_5_0.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/8362314b-1c5b-3afe-7a62-b378df7dcd1d.jpeg">

# 結果
 **Text Mesh Pro** のテキストに **01234567890-** と入力すると、 **Sprite Asset** に設定したスプライトが表示されるはずです。
spriteタグは必要ありません。
![1_6_0.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/617a7b40-4632-0a35-ebc1-f726356e607f.jpeg)

枠からちょっとはみ出してるのは **Extra Settings** の **Margins** で調整すればよさそう。
![1_6_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/285f197f-afe4-7d73-3344-26edf97a39c4.jpeg)
上の数字は **Text Mesh Pro のデフォルト**、下の数字は**今回対応したもの**。



:::note warn
**詰まったこと**

**警告 Unable to add the requested character to font asset (略)**
_解決_ 　Font Asset 内にある _(Font Asset名) Atlas_ (下画像参考)というものの設定 Is Readable にチェックを入れる。
![1_6_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2649407/bead9297-77e7-e48e-809a-0af2d101569a.jpeg)
　　　詳しくは警告メッセージを検索したら出てくるので割愛。

**ハイフンだけ自分が用意したテクスチャに置き換わってくれない**
Font Asset でアンダーバーのみ登録した理由にもなります。
_解決_ 　Font Asset を作る際に文字を全く登録しないで作った場合
　　　 Is Readable にチェックを入れて保存した時に勝手にハイフンが作られる。
　　　適当に使わない文字を1つだけ登録することでこのようなことは起きなかったので
　　　とりあえずこれで解決とした。


**NULLアクセスのエラーが発生する**
エディタ上でテキストを入力すると、TextMeshProの処理内でNULLアクセスのエラーが発生する。
_解決_ 　　Unityを再起動したら発生しなくなり、SpriteAssetのテクスチャがちゃんと表示されるようになった。謎。
:::

:::note warn
**怪しい…**

**Sprite AssetのSprite Character Tableの順番を入れ替えたら表示の順番も変わってしまう**
今回を例えで言うと[1][2][3][4][5][6][7][8][9][0][-]と登録しているのを、[0]を一番前にして[0][1][2][3][4][5][6][7][8][9][-]とする。
 Text Mesh Pro のテキストには 01234567890- と入力してこの通りに表示されていたのが
並び替え後は 9012345678- と表示されてしまう。
 Unicode をもとにスプライトが決定されてるハズで表示に影響する気はしないのだが…
:::

# 所感
 **Text Mesh Pro** の最大の利点であろう<font color="firebrick">アウトラインやその他もろもろの効果が**反映されない**</font>どころか<font color="firebrick">色も**変えられません**</font>ので注意。

この記事のトップの **やりたいこと** に書いたもの自体は達成できたのですが
マイナスなら<font color="firebrick">赤文字</font>にしようとか思っていて、そういった事はできなさそうで…
<font color="firebrick">※ もしかしたらマテリアルをどうにか操作できたらいけるのかな？</font>

**Text Mesh Pro** ではなく、ただの **Text** なら **Custom Font** で同じことができて色変えもできるので
自分のような使い方をしたいなら単純に **Text** + **Custom Font** でよさそうかも。
 **Text Mesh Pro** の機能を使いたいならフォント(.ttf)を用意する感じですかね。

 **Custom Font** が **Text Mesh Pro** で使えないみたいで残念。
これができれば今回のようなことはやらなかったな。

以上