TexeMeshProでドット風のフォント(8bitのビットマップ風フォント)をきれいに表示する方法まとめてみました。
いわゆるドット風のフォントは有名なのが以下の3種類あります。これらは（個人的には）長らくゲーム中で使った時に、なかなか綺麗にに表示されないなと思ってたのですが、設定を色々試していい感じの設定が見つかったのでまとめておこうと思います。
- 美咲フォント
- PixelMplus10
- PixelMplus12
通常の TextMeshPro 向けのフォントアセット作るときの設定の意味とかは以下で簡単にまとめています。
Font Asset Creatorの設定
使用するフォント事に設定が少し違います。
赤枠の個所を注意して入力します。以下、各設定項目の説明です。
Source Font File
作成するドット風フォントを指定する。
Sampling Point Size
Cuctom Size を指定します。ドット風フォントの場合 Auto Sizing は NGです。
Charactor Set と Atlas Resolution にもよりますがなるべく大きい値を指定します。40前後がよさそうです。
フォントがドットバイドットで表示されるポイント数の倍数になるように指定します。少なくとも2倍以上を指定します。3～4倍であれば大抵問題ないと思います。本当はべき乗の方がよいさそう？
- 美咲フォント、8 → 16 → 24 → 32...
- PixelMplus10、10 → 20 → 30 → 40...
- PixelMPlus12、12 → 24 → 36 → 48...
以下美咲フォントで7, 8, 9, 16, 24, 32, 40 を指定した場合のサンプルです。
7, 9 は倍数でないため少し滲んでいます。8pt は 等倍ですが一部の文字の baseline の高さがおかしくなっています。また、Sampling Size によってはアウトラインの付き方がかなり違います。40は綺麗に表示されない設定ですが今回は問題なさそうです。
1文字ごとの大きさが小さすぎると TextMeshPro の Outline > Thickness を調整しても細い指定が反映されない場合があります（まぁただドット風フォントにTextMeshProでアウトライン付けるのはおまけみたいなものなのでこれで満足できなければ自分でフォントを打ったほうがいいですが…）
Packaging Method
Fast, 文字数が少ない場合は Optimum でもよい。
Padding
そのまま= 5 大きいアウトラインを利用する場合は5より大きい値を指定する。フォントのエッジを出してくっきり表示したい時は 2などより小さい値を指定する。
Atlas Resolution
使用する文字数による。
フォントの倍数で最低でも Sampling Point Size が 40 で文字が全部入りきる大きさを指定する。
Charactor Set
Character from file で使用する文字をファイルで指定する。
Character File
自作のフォントセットを使用。
ローカルにUTF-8で保存して Unity に取り込む。作り終わったらもう使わないのでプロジェクト内になくても良い。
Render Mode
SDFAA
ドット風フォントの場合 SDFAA も SDF32 などで視認できる差が出ない。RASTER は TextMeshPro の各種装飾機能が使えなくなるので指定NG。
上記の設定で「Generate Font Atlas」を押して作成が完了したら「Save」して保存する。
アトラスとマテリアルの設定
作成したフォントを Project からツリー展開してアトラスをインスペクターに表示する。
Filter Mode を Biliner → Point に変更する【重要】
これをしないとフォントがものすごい滲む。ドット風フォントの場合設定必須。（逆に通常のフォントは指定しないほうがいい）
次にマテリアルを選択してインスペクターに表示する。
下の方にスクロールして Debug Settings の Sharpness を 1 に変更する。
アウトラインを付ける場合
どんなに頑張ってもそこそこ見れるくらいにしかならないので、おすすめではないですが、アウトラインを付ける方法です。
TextMeshPro のインスペクターから「Thickness」と「Dilate」を変更します。
アウトラインが滲む場合「Gradient Scale」を既定値の6より少し高くします。
Thickness がアウト欄の太さで、Dilate がフォントの太さです。両方とも同じ値に設定すると割と悪くない感じになります。
以下両方とも 0.1 に指定した場合です（Sampling Point Size = 40の場合で）
Thickness を増やすとフォントがアウトラインで内側に塗りつぶされていくので Dilate で大きさを広げるイメージです。両方同じ値だと内側に塗りつぶされた分外側に大きくする = 元のフォントにアウトラインが付くようなイメージです。
ちなみに「Thickness, Dilate」を 0.25、「Gradient Scale」を 7 にする以下のようになります。
見てわかると思いますが、角が丸くなっています。この動作は変えられない（シェーダー書けば変えられそうですが）、また、ピクセルフィット感が全然でないのでこれが気になる場合は自分でアウトライン付きのフォントを作成したほうが良いと思います。
これくらいの表示で問題なければ製作工数が軽減するので良いのではないでしょうか？
動作例
クリックして等倍表示すれば割と見れる感じになってると思います。
最後に
ドット絵系の絵作りだとテキストのドットの大きさとほかの画像素材のドットの大きさが違うとかなり気になるのでそこだけは合わせるように調整した方がいいと思います。
既存の Text でドット風のフォント使うと環境によってはなんか滲んだりぼやけたりする事があるので TextMeshPro でドット風フォントを使用するのは結構おすすめだったりします。細かい調整は実際に見ながらするしかないですが、Text よりパフォーマンスがいい & 特殊効果も色々つけられるため乗り換えてるのもよさそうです。
