💻

Unity6.1でピクセルパーフェクトなUIとテキストの設定方法

に公開
Unity
tech

はじめに

皆さんはドット絵（ピクセルアート）が好きですか？
私は好きです。

Unityでドット絵のゲームを作ろうとすると、3Dゲームも制作可能なエンジンであることもあり、少し難しいように思います。

そこで、「果ての宇宙探査計画」というドット絵ゲームの制作にエンジニアとして参加した経験から、ピクセルパーフェクトなUI（具体的には、ImageとTextMeshPro）を設定する方法を解説していきます。動作確認環境は"Unity 6000.1.12f1"です。

※なお、「果ての宇宙探査計画」内ではImageの回転などピクセルパーフェクトではない部分があることに注意してください。逆に言うと一応柔軟なこともできる設定の仕方をこれから解説します。

「Unity公式機能である"PixelPerfectCamera"はワールド空間上をピクセルパーフェクト化するツールであって、Canvas上のUIをピクセルパーフェクト化するものではないはず」

……と思って制作していましたが、以下のスレッドのように、Canvasコンポーネントの"RenderMode"を"Screen Space - Overlay"以外に設定すれば、PixelPerfectCameraの設定が適用されるようです。そのため、この記事の方法はあまり行儀良いやり方ではないかもしれませんが、問題が発生した場合にでも参照していただければと思います。
https://discussions.unity.com/t/canvas-with-pixel-perfect-camera/763520

Canvasの設定

シーン上のキャンバスには以下のように設定します。

  • "Canvas＞RenderMode"は"ScreenSpace-Overlay"にします。
  • "Canvas＞PixelPerfect"にチェックを入れます。別にこれでピクセルパーフェクトになるわけではないですが、Unity公式によると鮮明に表示されるようになるらしいです。
  • "CanvasScaler＞UIScaleMode"を"ScreenWithScreenSize"にします。解像度を設定できるようになります。
  • "CanvasScaler＞ReferenceResolution"の"X"と"Y"をお好みの解像度に設定します。画面全体のピクセル解像度です。「果ての宇宙探査計画」では320x180に設定しています。6倍すると1920×1080のフルHDになるのでオススメの解像度です。
  • "CanvasScaler＞ReferencePixelPerUnit"を"1"に設定します。ここは必ずしも1である必要はないですが、スプライトの"PixelPerUnit"に合わせる必要があります。PixelPerUnitはUnityの1(m)単位を何ピクセルにするかという設定なので、レトロゲーム風のUIにするなら8や16でも良いと思いますが、一番当たり障りないのは1だと思います。

Spriteの設定

アセットとして読み込んだスプライトには基本的に以下のように設定します。

  • "SpriteMode"は"Single"にします。
  • "PixelPerUnit"は"1"にします。先述の通り、Unityの単位とピクセル数を合わせる設定なので、"CanvasScaler"の設定に応じて他の数にしても大丈夫です。
  • "FilterMode"を"Point(no filter)"、さらに"Compression"を"None"にします。ピクセルを鮮明にするための設定です。
  • その他、必要に応じて9slice向けの設定などをしてください。

こうして設定したスプライトをCanvas以下のImageに反映します。

  • "Image＞SourceImage"にスプライトを設定します。
  • "Image＞SetNativeSize"をクリックします。

フォントの設定

例として患者長ひっくさん制作のx12y12pxMaruMinyaを使わせていただきます。非常に使いやすくありがたいフォントです。
https://hicchicc.github.io/00ff/

インポートしたフォントに以下のように設定します。

  • "RenderingMode"を"HintedRaster"にします。これによりきっちりドット感が出ます。

FontAsset生成時の設定

FontAssetCreatorで以下のように設定します。（説明するパラメータ以外は状況に応じて設定してください）

  • "SamplingPointSize"をフォントの「縦」幅ピクセル数にします。ここでは"12"にします。
  • "RenderMode"を"RASTER"に設定します。くっきりドット感を出すための設定です。

TextMeshProUGUIの設定

TextMeshProUGUIコンポーネントで以下のように設定します。

  • "FontSize"をフォントの「縦」幅ピクセル数にします。ここでは"12"にします。

【追記・うまくいかない場合】アトラスの設定

以上の設定でピクセルフォントがうまく表示できない場合、以下の設定を確認してみてください。

  • FontAssetCreatorで生成したフォントアセットの右矢印をクリックし展開します。
  • 左側の"[フォント名]Atlas"を選択します。

  • "FilterMode"が"Point"になっているか確認します。そうなっていない場合は"Point"に更新します。

参考サイト

https://qiita.com/kowato/items/267dbeb45ed18eaaf6f4
https://nekonenene.hatenablog.com/entry/unity-pixel-font-rendering

Discussion