ピクセルの忠実度を維持する変換された2Dスプライト用の「レトロ」ピクセルシェーダーを作成する方法


10

以下の画像は、背景の上にポイントサンプリングを使用してレンダリングされた2つのスプライトを示しています。

ここに画像の説明を入力してください

  • 左の頭蓋骨には回転/スケーリングが適用されていないため、すべてのピクセルが背景と完全に一致しています。
  • 右の頭蓋骨が回転/スケーリングされ、これにより軸が揃えられなくなった大きなピクセルが生成されます。

変換されたスプライトを右側にレンダリングし、残りのシーンと同じサイズのピクセルを軸に揃えたピクセルシェーダーを開発するにはどうすればよいですか?

これは、モンキーアイランドなどの古いゲームでスプライトスケーリングがどのように実装されたかに関連している可能性があります。これは、私が達成しようとしている効果ですが、回転が追加されているためです。


編集する

kaoDの提案に従って、私は問題を後処理として対処しようとしました。最も簡単な方法は、最初に別のレンダーターゲットにレンダーし(目的のピクセルサイズに一致するようにダウンサンプリングし)、2回目にレンダーするときにそれをアップスケールすることでした。上記の私の要件に対処しました。

最初に私はそれLinear -> Pointをやってみました、そして結果はこれでした:

ここに画像の説明を入力してください

歪みはありませんが、結果はぼやけて見え、ハイライトカラーのほ​​とんどが失われます。私の意見では、それは私が必要としたレトロな外観を壊します。

2回目に試したところPoint -> Point、結果は次のようになりました。

ここに画像の説明を入力してください

歪みはあるものの、私のニーズにはそれで十分かもしれませんが、静止画としては動きよりも見た目は良くなります。

実例として、これは効果のビデオですが、YouTubeはピクセルを除外しています。

http://youtu.be/hqokk58KFmI

ただし、移動中の歪みの量を減らしながら、くっきりした外観を維持できる優れたサンプリングソリューションを誰かが思いついた場合は、質問を数日間開いたままにしておきます。


それは頭蓋骨になるはずなのに...?
DeadMG

@DeadMG牛の頭蓋骨だと思いますか?
David Gouveia

素晴らしい効果、見た目よりも見栄えが良い(私は非常に低い解像度とパレット、40x30 EGAで試してみた。)これは、独自のpostfxシェーダーを作成するのとほぼ同じ外観です。ところで、あなたが意図したとおりの効果を維持するより良いサンプリングソリューションがあるとは思えません。NNはかなりそのさわやかな外観を与えるもの、最終的な画像をぼかしますその他のサンプリングが(ちょうどとにかく推測。)される
kaoD

@kaoDしかし、私は2つのパスを適用していることを思い出してください。画像をアップサンプリングする2番目のパスは、レトロな雰囲気を維持するために、まだ最も近いものになります。しかし、最初のパスでさまざまなサンプリング手法を試すことにはいくつかの利点があると思います。私は現在、Scale2xを調査しています!
David Gouveia 2012

@kaoDいや、あきらめます。SpriteBatchを使用して各スプライト呼び出し間でシェーダーパラメーターを変更するには、イミディエイトモードを使用する必要があるため、問題はありません。私はこれで行きます:)
David Gouveia

回答:


3

スプライトが回転した後でシェーダーを適用する必要があります。

シーン全体がまだシェーディングされておらず、スプライトが実際にピクセル化されている場合、必要なのは、シーン全体のある種のポストFXフィルターです。ピクセルの領域の平均化は問題なく機能します。それはあなたが意図しているものとは正確には異なります(移動/回転すると多少ディザリングに見えるでしょう)が、うまくいくかもしれません。

そのレトロな外観を希望どおりに保つ唯一の方法は、実際にスプライトの回転を自分で描くことです。それはスケーリングがどのように実装されたかとは関係ありません:解像度は実際には貧弱でした、といえば、非常に低い解像度で試してみましたか?それはまたトリックをするかもしれません、そして、まあ、それが実際にあなたが気にかけている効果を引き起こしたものだからです。そしてそれは安いです!とても安い!実際、既存のものよりも安価になります(フラグメントシェーダーの実行が少なくなります)。

スプライトに比べて解像度が高いため、サンプル画像では効果が台無しになり、シーンの実際のピクセルを確認できます。


はい、まだシェーダーを使用していません。これは、非常に低解像度のテクスチャを持つ通常のスプライトでありSpriteBatch、ポイントサンプリングがオンになっているXNAのデフォルトでレンダリングされます。しかし、ポストFXは本当にうまくいくかもしれません。まず、レンダーターゲットにリニアサンプリングを使用してレンダリングしてから、ポイントサンプリングを使用してレンダーターゲット全体をバックバッファーにレンダリングします。
David Gouveia

@DavidGouveiaは、あなたの解決策を低学位にする機会をお見逃しなく。本当に元の効果を出したいなら、それがあなたのベストショットです。高解像度が必要な場合(GFXの一部が高解像度である場合、またはネイティブ解像度と一致させたい場合)、低解像度のオフスクリーンバッファーにレンダリングして、高解像度フレームバッファーにフルとしてペイントすることができます-フィルタリングがオフの画面クワッド。もちろん、長方形のピクセルを避けるために、アスペクト比を一致させる必要があることに注意してください。
kaoD

私の編集を確認してください:)これで問題のほとんどが解決されたと思いますが、この問題に最も近い近傍より良いサンプリングソリューションがあるかどうかはまだ知りません。質問をもう少し長くしましょう。
David Gouveia
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.