Unity 2Dを使用してピクセルアートゲームを作成できますか?


16

Unity 4.3で導入された新しい2D機能を検討していますが、何か不足している可能性があります。

私には、スプライトのスケーリングは問題ない高解像度2Dゲーム用に設計されているように見えますが、ピクセルアートゲームには適していません。

ピクセルアートスプライトは、画面上に正確に1:1ピクセルで表示されるように設計されています。スケーリングによって破壊されます(リニアアップスケーリングは例外です。つまり、2x、3x、4xなどにスケーリングできます)。

しかし、私は「そのまま表示する」方法を見つけられませんでした、明らかにUnityはそれが適切だと思う解像度にスケーリングすることを主張しています:Camera.sizeパラメータとスプライトの「pixels to units」パラメータを制御することができます、しかし、私はこの結果を得ることができませんでした。


1
私が間違っていなければ、4.3より前の「オルガントレイル」ゲームはすべてUnity3dで作成されました。
フェリー

回答:


19

この記事では、4.3が発表される前であっても、いくつかの有用な説明を提供します。

「ピクセルアート」の外観を使用する場合は、カメラの正投影サイズが非常に重要です。これは、Unityで2Dを釘付けにする最も難しい部分です。

正投影サイズは、カメラ投影の上半分に含まれるワールドユニットの数を表します。たとえば、正投影サイズを5に設定すると、ビューポートの垂直範囲には正確に10単位のワールドスペースが含まれます。(水平範囲は、ディスプレイの縦横比に依存します。)

スプライトクワッドは1ユニットにつき1ユニットです。つまり、正射投影のサイズは、ビューポートで垂直にスタックできるスプライトの数を示します(2分割)。

ピクセルアートの外観をきれいにレンダリングするには、スプライトのソーステクスチャの各ピクセルがビューポートディスプレイに1:1でマッピングされていることを確認する必要があります。ソースピクセルをスキップしたり、2倍にしたりしないでください。そうしないと、スプライトが歪んで「汚れた」ように見えます。この1:1の比率を確保するコツは、垂直スクリーン解像度をスプライトのピクセル高さで割ったものに一致する正投影サイズを設定することです。

960x640で実行していて、64x64スプライトを使用しているとしましょう。垂直画面解像度(640)をスプライトのピクセル高さ(64)で除算すると、640ピクセルで垂直にスタックできる64x64スプライトの数である10が得られます。正投影サイズは半分の高さであるため、この場合のターゲット正投影サイズは5(10の半分)になることに注意してください。次のようになります。

スプライトの垂直サイズはビューポートの垂直サイズに均等に分割されるため、正射投影サイズをターゲットの半分または2倍に設定しても、使用可能な結果が得られる可能性があります。しかし、正射投影サイズを誤って設定すると、いくつかのピクセルがスキップまたは二重化され、実際に非常に悪く見えます:

可変解像度

きれいなピクセルアートをレンダリングするために、単一の固定解像度に限定する必要はありません。可変解像度を処理する最も簡単な方法は、現在の垂直解像度と既知の(固定)スプライトサイズに従って正投影サイズを設定するカスタムスクリプトをカメラにアタッチすることです

// set the camera to the correct orthographic size
// (so scene pixels are 1:1)
s_baseOrthographicSize = Screen.height / 64.0f / 2.0f;
Camera.main.orthographicSize = s_baseOrthographicSize;

これは簡単な修正ですが、欠点があります。画面の解像度が低下するにつれて、表示される世界が少なくなり、スプライトが画面の多くを占めるようになります。これは、ソースピクセルとスクリーンピクセルの比率を1:1に保つことの結果です。64x64スプライトは、1920x1200の場合よりも640x480のほうが見かけ上のスペースを占有します。これが問題かどうかは、特定のゲームのニーズに依存します。

画面の解像度に関係なくスプライトを同じ見た目のサイズのままにしたい場合は、正投影サイズを固定値に設定し、画面の解像度に関係なくそのままにしておきます。欠点は、スプライトのソースと画面のピクセル比が1:1にならないことです。ターゲットの解像度のちょうど半分またはちょうど2倍の解像度を許可することで、その悪影響を軽減できます。

(強調が追加されました)

これは明らかに、高さの解像度がスプライトのサイズで割り切れる場合にうまく機能しますが、そうでない場合でも、まともな結果の良い近似を提供します。


TL; DRcameraSelf.orthographicSize = screenH / (float)spriteSize / 2f;


5
別の便利なことは、テクスチャフィルタリングを「ポイント」に設定することです。
フェリー

@Felipeの良い点:私はすでにそれを理解したので、それを忘れました。
o0 '。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.