ハトネコエ Web がくしゅうちょう

プログラミングやサーバー関連、チームマネジメントなど得た技術のまとめ

Unityでピクセルフォントをぼやけさせずに表示したい!

Pixel Art Park 6 お疲れさまでした!
デジゲー博に引き続き、『エイプリルルーム』というゲームの展示をさせていただきました。

私がプログラムとサウンドを担当しています。

これはドット絵のゲームですので、テキストもドット絵に合うよう描画させたいところですが、
ふつうにフォントを使うとこのようになってしまいます。

f:id:nekonenene:20191124233450p:plain

なんだかボケていますね。

この記事の手順を踏むと、以下のようにきれいに描画されます。

f:id:nekonenene:20191124233605p:plain

この記事は 『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』 を元に書いています。
また、フォントは PixelMplus12 を用いて説明していきます。(再配布OKなのがありがたいですね!)

1. フォントの設定をする

Unity にインポートしている PixelMplus12 を見ると、最初はこのような設定になっています。

f:id:nekonenene:20191124234603p:plain

これを以下のように変更しました。

f:id:nekonenene:20191124234644p:plain

1-1. Font Size

まず Font Size を 12 にします。
この値は元となるフォントによって異なります
このあとでフォントの文字をまとめた画像を生成するのですが、その画像を作る際のフォントサイズがこれです。

PixelMplus12 はフォントサイズ 12 のとき一番きれいに描かれるように作られているので、今回はこの値を 12 にしています。
(なので、PixelMplus10 を元にする場合であれば、ここの値は 10 にします)

1-2. Rendering Mode

Rendering Mode は Hinted Raster にします。
アンチエイリアス処理がおこなわれなくなります。

1-3. Character

英数字のみを使うなら他のでもいいのですが、今回は日本語も表示したいので、
Character は Unicode を選びます。

2. Editable Copy の作成

1. の設定を終わらせて「Apply」を押したなら、
Editable Copy を作成します。

右上の歯車アイコンを押し、『Create Editable Copy』を選択します。

f:id:nekonenene:20191125000009p:plain

これを押すと、フォントを元に画像ファイルを作り出します。
処理にはけっこう時間がかかりますので、気を長くしてお待ち下さい。

辛抱強く待つと、元のフォントファイルとは別にファイルが3つ作られます。

f:id:nekonenene:20191125000301p:plain

下3つがそうです。
わかりにくいので名前を変更します。

f:id:nekonenene:20191125000425p:plain

この中の下から2番目、黒い長方形みたいなやつを編集します。
(フォントデータを元に作られたスプライトセットです)

初期はこのようになっています。

f:id:nekonenene:20191125000844p:plain

こう変えました。

f:id:nekonenene:20191125000916p:plain

Filter Mode を Point (no filter) に変えたのがポイントです。
ドット絵ゲームを作るときは、画像をインポートするたびに

  • Pixels Per Unit をゲームで決めてるサイズに(今作ってるゲームだと 1 に)変更
  • Pivot を Top Left に変更 *1
  • Filter Mode は Point (no filter)
  • Compression を None に

をやっていると思いますが、そのうちの一点ですね。

Pixels Per Unit も念のため変えていますが、ここにおいては特に影響ないようです。

3. Text UI に反映

あとは簡単で、 2. の工程で作られたフォントファイルを反映します。

f:id:nekonenene:20191125072954p:plain

これで、最初にご紹介した通りの、ぼやけていない文字が出来上がったかと思います。

f:id:nekonenene:20191125073208p:plain

4. おまけ:フォントサイズを変えたい

ゲームの都合上、異なるフォントサイズを用いたいとしましょう。例えば 16px。
Font Size を 16 に変更するとこのようになります。

f:id:nekonenene:20191125074342p:plain

当然ぼやけてはいないのですが、
ピクセルパーフェクトでない(背景素材とピクセルがずれている)ことがわかると思います。
整数倍(12px, 24px, 36px, 48px, ...)以外のフォントサイズを指定すると、このようなことが起きてしまいます。

これを避けるには、再び 1. , 2. の工程を踏む必要があります。
1-1. で Font Size を 12 にして作りましたが、今度は 16 にしてもうひとつ作り直すのです。

f:id:nekonenene:20191125074741p:plain

結果、このようにピクセルパーフェクトになりました。
……が、フォントの形としてはやや崩れてしまいました。

f:id:nekonenene:20191125075016p:plain

どちらが良いかは、フォントのきれいさを取るか、ピクセルパーフェクトにこだわるかで変わってくると思います。

幸い、 PixelMplus12 にはサイズ違いの PixelMplus10 もいますので、両方使えば、
それぞれの整数倍の 10, 12, 20, 24, 30, 36, 40, ... のフォントサイズであれば
フォントの形もピクセルパーフェクトも保ったままテキストを描くことが出来ます。(上記例の 16 は無理ですね)

おわり

改めて、この記事のもととなった『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』に感謝をお伝えします。ありがとうございます。
日本語情報が少ないためか、同じ問題にあたっている方がいらしたので、本記事を書いてみました。

説明に使った Unity プロジェクトファイルは、以下からダウンロードできますので、
もう少し詳細を見てみたい! という方はご活用ください。

github.com

*1:Centerのままだと、奇数ピクセルの画像素材を半ピクセルぶんずれた場所に描画されるよう置きミスしやすいため