TextMeshProでドット風フォントをいい感じに表示する

初めに

TexeMeshProでドット風のフォント(8bitのビットマップ風フォント)をきれいに表示する方法まとめてみました。

ドット風のフォントって有名なのが3種類くらいあるじゃないですか。これらって個人的には長らくゲーム中で使うとなかなかきれいに表示されないなと思ってたんですがいろいろ試していい感じの設定が見つかったのでまとめておこうと思います。

  • 美咲フォント
  • PixelMplus10
  • PixelMplus12

今回はポイントを押さえてきれいに表示したいと思います。

通常の TextMeshPro 向けのフォントアセット作るときの設定の意味とかは以下で簡単にまとめています。

takap-tech.com

Font Asset Creatorの設定

使用するフォント事に設定が少し違います。

f:id:Takachan:20210610232843p:plain

赤枠の個所を注意して入力します。以下、各設定項目の説明です。

Source Font File

作成するドット風フォントを指定する。

Sampling Point Size

Suctom Size を指定します。ドット風フォントの場合 Auto Sizing は NG。

Charactor Set と Atlas Resolution にもよりますがなるべく大きい値を指定します。アウトラインを付けない場合40~、アウトラインを付ける場合60~が良さそうです。

フォントが想定するピクセルの倍数になるように指定します。少なくとも2倍以上から。そうしないとフォントが滲みます。

  • 美咲フォント、8 → 16 → 24 → 32...
  • PixelMplus10、10 → 20 → 30 → 40...
  • PixelMPlus12、12 → 24 → 36 → 48...

以下美咲フォントで7, 8, 9, 16, 24, 32, 40 を指定した場合のサンプルです。

f:id:Takachan:20210610232929p:plain

7, 9 は倍数でないため少し滲んでいます。8pt は 1倍ですが一部の文字の baseline の高さがおかしくなっています。Sampling Size によってはアウトラインの付き方がかなり結構違います。

f:id:Takachan:20210610232939p:plain

少なくとも40程度でないと無いと Outline > Thickness を調整しても細い指定が反映されない場合があります。

まぁただドット風フォントにTextMeshProでアウトライン付けるのはおまけみたいなものなのでこれで満足できなければ自分でフォントを打ったほうがいいですが…

Packaging Method

Fast, 文字数が少ない場合は Optimum でもよい。

Padding

そのまま、4

Atlas Resolution

使用する文字数による。Sampling Point Size が 40 以上確保できて Charactor Set の文字が全部入りきる大きさを指定する。

Charactor Set

Character from file で使用する文字をファイルで指定する。

Character File

自作のフォントセットを使用。

ローカルにUTF-8で保存して Unity に取り込む。作り終わったらもう使わないのでプロジェクト内になくても良い。

Render Mode

SDF16 or SDFAA

どちらでもよい。ドット風フォントの場合SDF32と16で視認できる差が出ない。RASTER は TextMeshPro の各種装飾機能が使えなくなるので指定NG。上記の設定で「Generate Font Atlas」を押して作成が完了したら「Save」して保存する。

アトラスとマテリアルの設定

作成したフォントを Project からツリー展開してアトラスをインスペクターに表示する。

f:id:Takachan:20210610233015p:plain

Filter Mode を Biliner → Point に変更する【重要】

これをしないとフォントがものすごい滲む。ドット風フォントの場合設定必須。(逆に通常のフォントは指定しないほうがいい)

f:id:Takachan:20210610233056p:plain

次にマテリアルを選択してインスペクターに表示する。

f:id:Takachan:20210610233252p:plain

下の方にスクロールして Debug Settings の Sharpness を 1 に変更する。

f:id:Takachan:20210610233330p:plain

アウトラインを付ける場合

どんなに頑張ってもそこそこ見れるくらいにしかならないので、おすすめではないですが、アウトラインを付ける方法です。

TextMeshPro のインスペクターから「Thickness」と「Dilate」を変更します。

アウトラインが滲む場合「Gradient Scale」を既定値の6より少し高くします。

Thickness がアウト欄の太さで、Dilate がフォントの太さです。両方とも同じ値に設定すると割と悪くない感じになります。

以下両方とも 0.1 に指定した場合です(Sampling Point Size = 40の場合で)

f:id:Takachan:20210610233501p:plain

Thickness を増やすとフォントがアウトラインで内側に塗りつぶされていくので Dilate で大きさを広げるイメージです。両方同じ値だと内側に塗りつぶされた分外側に大きくする = 元のフォントにアウトラインが付くようなイメージです。

ちなみに「Thickness, Dilate」を 0.25、「Gradient Scale」を 7 にする以下のようになります。

f:id:Takachan:20210610233508p:plain

見てわかると思いますが、角が丸くなっています。この動作は変えられない(シェーダー書けば変えられそうですが)、また、ピクセルフィット感が全然でないのでこれが気になる場合は自分でアウトライン付きのフォントを作成したほうが良いと思います。

これくらいの表示で問題なければ製作工数が軽減するので良いのではないでしょうか?

動作例

f:id:Takachan:20210611000551g:plain

クリックして等倍表示すれば割と見れる感じになってると思います。

最後に

ドット絵系の絵作りだとテキストのドットの大きさとほかの画像素材のドットの大きさが違うとかなり気になるのでそこだけは合わせるように調整した方がいいと思います。

既存の Text でドット風のフォント使うと環境によってはなんか滲んだりぼやけたりする事があるので TextMeshPro でドット風フォントを使用するのは結構おすすめだったりします。細かい調整は実際に見ながらするしかないですが、Text よりパフォーマンスがいい & 特殊効果も色々つけられるため乗り換えてるのもよさそうです。

参考

https://zenn.dev/noael_lab/articles/082b6dc401780f729a20

https://qiita.com/beckyJPN/items/444939d19b1ab5e41f34