Free Game Tool

Pixel Perfect Cameraとは

Pixel Perfect Cameraは、Unityで2Dのドット絵ゲームを作るときに、ピクセルアートをさまざまな解像度で鮮明に保ち、動きも安定させるためのカメラ用コンポーネントです。UnityのURP(Universal Render Pipeline)の公式ドキュメントでは「2D Pixel Perfect」として紹介されています。シーンのMain Cameraにアタッチして使います。

ドット絵は、1ドットの大きさが画面上ですべて同じであってこそ綺麗に見えます。ところがカメラの設定や画面サイズによっては、ドットの幅が不揃いになったり、輪郭がぼやけたりします。Pixel Perfect Cameraは、この崩れを防ぐように画面の拡大のしかたを自動で調整してくれます。

なぜドット絵は崩れるのか

たとえば、320×180ピクセルで作ったドット絵を、1920×1080の画面に表示するとします。画面の大きさは縦横ともちょうど6倍なので、1ドットがきれいに6×6ピクセルになり、崩れません。

一方、画面が1366×768だった場合は、6倍には届かず、約4.27倍になります。このように拡大率が整数でないと、1ドットが4ピクセルで描かれる部分と5ピクセルで描かれる部分が混ざってしまい、ドットの幅が不揃いに見えます。これが、ドット絵が崩れる主な原因です。

Pixel Perfect Cameraは、画面に収まる最大の整数倍で描画することで、この問題を避けます。上の例では4倍で描画し、余った部分は黒帯にするなどして処理します。

PPU(Pixels Per Unit)とは

Unityの世界(ワールド)では、長さの単位として「ユニット」を使います。PPUは、1ユニットが何ピクセルにあたるかを表す値です。Pixel Perfect Cameraのインスペクターでは「Assets Pixels Per Unit」という名前で表示されます。

たとえば32×32ピクセルのスプライトの場合は、次のようになります。

スプライトごとにPPUがバラバラだと、ワールド上での大きさの基準がそろわず、扱いにくくなります。そのため、プロジェクト内ではPPUを統一するのが一般的です。ドット絵のタイルが16×16なら16、32×32なら32というように、いちばん基本になるタイルの大きさに合わせることが多いです。

PPUはカメラ側とスプライト側の2か所にある

PPUには、Pixel Perfect Cameraに設定する値と、各スプライトのインポート設定(Pixels Per Unit)の2つがあります。この2つが同じなら、スプライトは意図した大きさで表示されます。違う値にすると画面上の大きさが変わり、拡大率が整数にならない場合はドットの幅が不揃いになります。基本的には、両方を同じ値にしておくのが安全です。

Reference Resolution(基準解像度)とは

Reference Resolution(基準解像度)は、アセットが本来想定している解像度、つまりゲームを「何×何ピクセルの画面」として作るかを表す値です。たとえば320×180と設定すると、画面には常に横320ピクセル・縦180ピクセル分のドット絵が映る前提で、ゲームが表示されます。

実際のモニターがこれより大きい場合は、Pixel Perfect Cameraが整数倍(2倍、3倍…)に拡大して表示します。ドットがにじまず、くっきり見えるのはこのためです。

大きい値と小さい値の違い

• 大きい値(例:480×270、640×360):画面に映せるドットの数が増え、細かい絵や多くの情報を表現できます。
• 小さい値(例:256×144、320×180):ドットが大きく見え、昔ながらのレトロな雰囲気になります。

16:9のモニターで使う場合は、Reference Resolutionも16:9にそろえると、黒帯が出にくくなります。320×180(6倍)、480×270(4倍)、640×360(3倍)、960×540(2倍)は、1920×1080をちょうど整数倍で埋められる代表的な値です。

PPUとReference Resolutionの関係

この2つの値から、カメラに映るゲーム世界の範囲が決まります。

たとえばReference Resolutionが320×180、PPUが16の場合は次のようになります。

• 映る範囲:横 20ユニット × 縦 11.25ユニット(320÷16、180÷16)
• Orthographic Sizeに相当する値:5.625(180÷(2×16))

解像度の変更に応じたビューポートのスケーリングに必要な計算は、Pixel Perfect Cameraコンポーネントがすべて行います。上の計算は、「いまどのくらいの範囲が映るのか」を理解するための目安として読んでください。

モニターの解像度と拡大倍率

Reference Resolutionが320×180のとき、モニターの解像度ごとの拡大倍率は次のようになります。

余りが出る場合、Pixel Perfect Cameraは次のどちらかで処理します。

• 余りの部分を黒帯にして、Reference Resolutionの範囲だけを映す
• 黒帯を出さず、整数倍のまま映る範囲を広げて画面全体を埋める

どちらを選ぶかは、次の「主な設定項目」で説明するCrop Frameで決めます。

主な設定項目

Pixel Perfect Cameraのインスペクターには、次の項目があります。名前や表示は、お使いのUnityのバージョンによって多少異なる場合があります。

Crop Frame

選んだオプションに基づいてビューポートを切り抜き、Reference Resolutionに合わせて黒いバーを追加します。黒いバーは、ゲームビューがフルスクリーン解像度に収まるように追加されます。当サイトのツールの「フレームの扱い」では、「黒帯を出す」がこれに近い表示です。

Grid Snapping

スナップの処理方法を決める項目で、次の2つの方式があります。

Pixel Snapping:有効にすると、レンダリング時にスプライトレンダラーがワールド空間のグリッドにスナップします。グリッドの大きさはAssets Pixels Per Unitの値に基づきます。サブピクセル単位の移動を防ぎ、スプライトがピクセル単位で動いているように見せることができます。ゲームオブジェクトのTransformの位置には影響しません。

Upscale Render Texture:デフォルトでは、シーンはフルスクリーン解像度に最も近いピクセルパーフェクトな解像度でレンダリングされます。このオプションを有効にすると、フルスクリーンのアスペクト比を保ったまま、Reference Resolutionにできるだけ近い解像度の一時的なテクスチャにシーンを描き、それを画面全体に合わせて拡大します。結果のピクセルは、エイリアスがなく、回転していない状態になります。プロジェクトによっては、このような見た目が望ましい場合もあります。

Current Pixel Ratio

元のサイズと比べて、スプライトが何倍の大きさでレンダリングされているかを示します。モニターの解像度やReference Resolutionを変えたときに、拡大の状態を確かめるのに使えます。

スプライトの準備

Pixel Perfect Cameraを使う前に、スプライトを次のように準備しておくと、最適な結果が得られます。

1. スプライトをインポートしたら、すべてのスプライトの Pixels Per Unit を同じ値にします。
2. スプライトのインスペクターで、Filter Mode を「Point」にします。
3. Compression を「None」にします。
4. スプライトエディターで、Pivot を「Custom」、Pivot Unit Mode を「Pixels」にします。ピボットをピクセル単位で設定でき、ドラッグしてもピクセルの角に自動でスナップします。Sprite Modeが「Multiple」で複数のスプライトがある場合は、要素ごとに設定します。

Unityのスナップ設定

スプライトのピクセル単位の動きをそろえるため、プロジェクトのスナップ設定も合わせておきます。

1. メニューの Edit > Snap Settings を開きます。
2. Move X/Y/Z を、「1 ÷ PPU」の値にします。たとえばPPUが100なら0.01です。
3. スナップ設定は、すでにシーンにあるゲームオブジェクトには自動で適用されません。それぞれを選んで Snap All Axes を実行します。

設定の進め方

1. PPUを決める:基本になるタイルのピクセル数に合わせ、スプライトのPPUも同じ値にそろえます。
2. スプライトを準備する:Filter Modeを「Point」、Compressionを「None」にします。
3. Reference Resolutionを決める:表現したい細かさと、遊ばせたい画面の比率(多くは16:9)から選びます。
4. 代表的なモニターで確認する:1920×1080などで整数倍になるか、余りがどのくらい出るかを見ます。
5. 余りの扱いを決める:Crop Frameで、黒いバーを足して切り抜くかどうかを決めます。

数値を決めたあとにやり直すと、絵の描き直しや画面レイアウトの調整が必要になることがあります。制作の早い段階で決めておくのがおすすめです。

当サイトのツールで確認する

当サイトの「Pixel Perfect Camera 確認」では、PPUとReference Resolutionを入力しながら、スプライトや地形がどう見えるかを画面上で確かめられます。モニター解像度ごとの拡大倍率や、黒帯の幅、スプライトのサイズがピクセルグリッドに合っているかどうかも確認できます。数値を決める前の試し見にお使いください。