web-dev-qa-db-ja.com

スプライトをゆっくり動かすと「ギラギラ」エフェクトが発生する

スプライトをゆっくり動かしているときに、この「ギラギラした」エフェクトを削除するにはどうすればよいですか?

UnityエディターでQualitySettingsのアンチエイリアス値とImportSettingsのフィルターモードを調整してみましたが、何も変更されません。

enter image description here

理想的には、フィルターモードをPoint (no filter)に維持し、アンチエイリアスを2xにしたい

enter image description here

Spriteは、GameObjectのSprite Rendererコンポーネント内にあります。

Unityプロジェクトをここにアップロードしました: http://www.filedropper.com/Sprite

私は問題を解決する方法を本当に知りません...誰かが私の個人的なプロジェクトを手伝ってくれる?

41
user5655032

ここで何が起こっているのかを示すために、簡単なアニメーションを作成しました。

Animation demonstrating source of ripple

グリッドは、ディスプレイの出力ピクセルを表します。無制限のサブピクセル解像度でレンダリングできる場合は、サンプリングしたいスライドスプライトの上にオーバーレイしました。

各グリッドセルの中央のドットは、それらのサンプリングポイントを表します。ニアレストニーブール/ポイントフィルタリングを使用しているため、テクスチャ内で注目するのはこのポイントだけです。新しい色のエッジがそのサンプリングポイントと交差すると、ピクセル全体が一度に色を変更します。

ソーステクセルグリッドが出力ピクセルと一致しない場合に問題が発生します。上記の例では、スプライトは16x16テクセルですが、ディスプレイ上で17x17ピクセルを占めるようにスケーリングしています。つまり、すべてのフレームのどこかで、いくつかのテクセルを繰り返す必要があります。スプライトを移動すると、これが発生する場所が変わります。

各テクセルはピクセルよりわずかに大きくレンダリングされるため、2つの隣接するピクセルのサンプリングポイントを完全にブリッジする瞬間があります。両方のサンプリングポイントは同じ拡大されたテクセル内に配置されるため、両方のピクセルは、テクセルが最も近いサンプリング元であることを認識し、テクセルは2か所で画面に出力されます。

この場合、1/16のスケールの違いしかないため、各テクセルは1フレームまたは2フレームの間だけこの奇妙な状況にあり、次に隣接するピクセルにシフトして、画像全体をスライドするように見える2倍のピクセルの波紋を作成します。

これを一種のモアレパターンと見なすことができます 異なる場合のテクセルグリッドとサンプリンググリッドの相互作用による結果)

修正はピクセルアートをスケーリングして、各テクセルがピクセルの整数倍のサイズで表示されるようにすることです

1:1

Animation showing ripple-free rendering at 1:1 scale

または2:1、3:1 ...

Animation showing ripple-free rendering at 3:1 scale

より高い倍数を使用すると、アートの意図した外観に影響を与える局所的なストレッチを行わずに、スプライトを自身のテクセルサイズよりも短い増分で移動できます。

そのため、出力の解像度とアセットに適用されたスケーリングに細心の注意を払い、アセット間の整数倍の関係を維持するようにしてください。 CAD97がリンクしているブログ投稿には、これを実現するために実行できる実用的な手順があります。

編集:アップロードしたUnityプロジェクトでこれを実証するために、ピクセルの単位に合わせてカメラの設定を変更し、次のテストをレイアウトしました。上部のマリオはわずかに非整数のテクセルとピクセルの比率(1.01:1)ですが、下部のマリオは1:1です。トップのマリオだけが波打つアーティファクトを示しています。

Two Marios, one exhibiting artifacts

60
DMGregory

Unityで「ピクセルパーフェクト」な2Dゲームを作成することについて このブログ投稿 に興味があるかもしれません。

いくつかの関連する抜粋:

Unityのすべてのデフォルト設定でピクセルゲームを開始すると、ひどく見えるでしょう!

ピクセル化されたゲームをニースに見せるための秘訣は、スプライトがニースのピクセル境界に確実にレンダリングされるようにすることです。つまり、スプライトの各ピクセルが1つの画面ピクセルにレンダリングされるようにします。

これらの他の設定は、物事を可能な限り鮮明にするために不可欠です。

スプライトで:

  • スプライトがロスレス圧縮を使用していることを確認してください。天然色
  • ミップマッピングをオフにする
  • ポイントサンプリングを使用

レンダリング品質設定:

  • 異方性フィルタリングをオフにする
  • アンチエイリアシングをオフにする

Sprite/Defaultシェーダーを使用するカスタムマテリアルを作成し、それをSpriteRendererにアタッチすることにより、Spriteシェーダーでピクセルスナップをオンにします。

また、物理学を適用している場合を除き、NeverUseFixedUpdate。また、SpriteにColliderがあり、動いている場合は、物理を使用するつもりがない場合でも、Kinematic RigidBodyをアタッチして、エンジンにColliderが動いていることを伝える必要があります。

9
CAD97

ここでも同じ問題。波打つ問題を修正するには、カメラの設定とスケールもかなり重要であることに気付きました。

0
silkentrance