Unityでピクセルフォントをぼやけさせずに表示したい!
Pixel Art Park 6 お疲れさまでした!
デジゲー博に引き続き、『エイプリルルーム』というゲームの展示をさせていただきました。
私がプログラムとサウンドを担当しています。
【こやまBOX お知らせ】
— こやまなつみ (@doteduke) November 23, 2019
お待たせしました、 #PixelArtParkお品書き です!
いよいよ明日が #PixelArtPark !
私こやまは、こやまBOXというサークルでお待ちしてます!
新作アドベンチャー「 #エイプリルルーム 」、気合入れて作ってますので、ぜひ遊びに来てくださいね!
スペース:2階体育館 C-35 pic.twitter.com/Zn9cMGabUT
これはドット絵のゲームですので、テキストもドット絵に合うよう描画させたいところですが、
ふつうにフォントを使うとこのようになってしまいます。
なんだかボケていますね。
この記事の手順を踏むと、以下のようにきれいに描画されます。
この記事は 『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』 を元に書いています。
また、フォントは PixelMplus12 を用いて説明していきます。(再配布OKなのがありがたいですね!)
1. フォントの設定をする
Unity にインポートしている PixelMplus12 を見ると、最初はこのような設定になっています。
これを以下のように変更しました。
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』を選択します。
これを押すと、フォントを元に画像ファイルを作り出します。
処理にはけっこう時間がかかりますので、気を長くしてお待ち下さい。
辛抱強く待つと、元のフォントファイルとは別にファイルが3つ作られます。
下3つがそうです。
わかりにくいので名前を変更します。
この中の下から2番目、黒い長方形みたいなやつを編集します。
(フォントデータを元に作られたスプライトセットです)
初期はこのようになっています。
こう変えました。
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. の工程で作られたフォントファイルを反映します。
これで、最初にご紹介した通りの、ぼやけていない文字が出来上がったかと思います。
4. おまけ:フォントサイズを変えたい
ゲームの都合上、異なるフォントサイズを用いたいとしましょう。例えば 16px。
Font Size を 16 に変更するとこのようになります。
当然ぼやけてはいないのですが、
ピクセルパーフェクトでない(背景素材とピクセルがずれている)ことがわかると思います。
整数倍(12px, 24px, 36px, 48px, ...)以外のフォントサイズを指定すると、このようなことが起きてしまいます。
これを避けるには、再び 1. , 2. の工程を踏む必要があります。
1-1. で Font Size を 12 にして作りましたが、今度は 16 にしてもうひとつ作り直すのです。
結果、このようにピクセルパーフェクトになりました。
……が、フォントの形としてはやや崩れてしまいました。
どちらが良いかは、フォントのきれいさを取るか、ピクセルパーフェクトにこだわるかで変わってくると思います。
幸い、 PixelMplus12 にはサイズ違いの PixelMplus10 もいますので、両方使えば、
それぞれの整数倍の 10, 12, 20, 24, 30, 36, 40, ... のフォントサイズであれば
フォントの形もピクセルパーフェクトも保ったままテキストを描くことが出来ます。(上記例の 16 は無理ですね)
おわり
改めて、この記事のもととなった『Fix Blurry Pixel Art Style Fonts in Unity | Ryan Nielson』に感謝をお伝えします。ありがとうございます。
日本語情報が少ないためか、同じ問題にあたっている方がいらしたので、本記事を書いてみました。
説明に使った Unity プロジェクトファイルは、以下からダウンロードできますので、
もう少し詳細を見てみたい! という方はご活用ください。