🖋️

[GMS2]ピクセルフォント(ドットフォント)を正確にレンダリングする

2021/10/11に公開

はじめに(余談)

GameMaker Studio2は一応3Dも扱えるらしいですが、殆ど2Dのゲーム制作に特化したゲームエンジンです。様々なユーザの作例を見ていると、やはり、ファミコンやスーパーファミコン時代の解像度にある種の美意識を感じているような層がけっこう多い気がしています。

そうした層の中には、ドット絵風、ピクセルアートスタイルのゲームを作る際に、「ピクセルパーフェクト」であることにこだわる人もいます。

それは例えば、あのプラットフォーマーの金字塔「Celeste」のように、ゲーム画面は低解像度ドット絵スタイルなのに、UIは高解像度で表示されて、画面全体での解像度が統一されていないようなスタイルのアートが絶対に許せないような人です。(Celesteは違いますが)キャラクターが(見かけ上の)1ドット単位で動かずに、0.5ドットずれたりすることに耐えられないような美意識です。

(Celesteは素晴らしい作品で、本作においてピクセルパーフェクトがどうとか私は気になりませんでした)

ピクセルパーフェクトを目指したい場合は、UIの文字表示も、もちろん周囲に調和するピクセルフォントで表現する必要があります。


日本語ピクセルフォントを正確にレンダリングする

  • アンチエイリアスはOFF
  • PixelサイズをPointサイズに変換し、フォントファイルの想定ピクセルサイズに合わせる

あまりにも簡単なTipsすぎて、書く必要もないかもくらいなのですが、、
GMS2のFont生成ウィンドウでのサイズ指定は、PixelサイズでなくPointサイズになっているので、ピクセルフォントをドットのズレなくレンダリングするためには、PixelサイズをPointサイズに変換し、フォントファイルの想定ピクセルサイズに合わせる必要があります。

たとえばLittleLimitさんの「k8x12」フォントは、ヨコ8ピクセル、タテ12ピクセルを想定してデザインされています。(このフォントの場合、右と下に1ピクセルずつの余白も含めての8x12です。)

タテ12ピクセル想定なのだからと、GMS2のFont生成ウィンドウの「size」のところに12を入れてしまうと、下記のようにピクセルがずれて表示されてしまいます。これはもちろん、12point→16pixelでレンダリングされてしまっており、想定ピクセルサイズからズレてしまっているからです。

タテを12pixelでレンダリングするためには、サイズには「9(point)」を入れる必要があります。
そうすれば、タテがきちんと12pixelでレンダリングされ、デザインの想定ピクセルサイズと一致するので、正確に文字形状が表示されます。


私自身、当初はなぜか、GMS2のFont生成ウィンドウのサイズはPixelサイズ指定だと思いこんでしまっていて、k8x12フォント使用でサイズ12を入れているのになぜ表示が崩れるのか分からず、フォントヒンティングの問題を疑ってもろもろ試行錯誤する無駄な時間を過ごしてしまいました。
画面のピクセルを数えれば、タテ16ピクセルでレンダリングされていることから、PixelサイズでなくPointサイズになっていることは火を見るより明らかだったのですが… 思い込みは恐ろしいもので、しばらく全く気づきませんでした。
私と同じように勘違いしてしまう方がいるかもしれませんので、このメモを記しました。

Discussion