波紋効果?


9

タワーディフェンスゲームに取り組んでいますが、これまでのところ、結果に本当に満足しています。ただし、追加したいことが1つあります。

Windows Phone 7のGeoDefenseのビデオをここで見ました:http : //www.youtube.com/watch? v=YhPr4A4LRPQ

(ユニットが殺されるか、発射体がユニットに当たったとき)背景がなんらかの波効果で波打つ様子に注目してください。

どうすれば同等のものを作ることができますか?多くの頂点で構成されるクワッドを使用して、頂点シェーダーで何とかする必要があると思います。

あなたの電話は何ですか?

編集 XNAゲームはWindows Phone用ではなく、Windows PC用に作成されていることに注意してください。

回答:


8

問題は、Windows PhoneのXNAがカスタムシェーダーをサポートしていないため、頂点シェーダーまたはピクセルシェーダーを作成できないことです。ただし、Catalin Zimaによって説明されている、頂点グリッドを変形させるトリックを使用して、同じ効果を得ることができます。

Windows Phone 7をターゲットにしていない場合は、ブログで説明したトリックを使用できます。以下の関連ビットをコピーします。

これらの歪みには2つの画像が必要です。最初に、シーン全体がレンダーターゲット(つまり、Texture2D)と歪みレンダーターゲットとして必要です。通常、パーティクルシステムを使用して、歪みレンダーターゲットを塗りつぶします。特別なディストーションスプライトを使用します(以下の例)。

ディストーションターゲット(およびディストーションスプライト)の各カラーコンポーネントは、以下を表します。

  • R:dx:Xオフセット– f(x)= 2x-1マッピング([0.0f、1.0f]から[-1.0f、1.0f])。
  • G:dy:Yオフセット– f(x)= 2x-1マッピング。
  • B:m:Z強度– f(x)= xマッピング。

リップルに使用されるスプライトの良い例は次のとおりです。

リップルスプライト

波紋の結果の決定は、波を一緒に追加するのと同じくらい簡単です(最初に実行する必要がある[-1.0f、1.0f]へのマッピングを覚えておいてください)。実際の波も加法的であるので、これはうまくいきます-実際の波の非常に良い近似を得るでしょう。

2つのレンダーターゲットを取得したら、次のシェーダーを使用できます。

Texture InputTexture; // The distortion map.
Texture LastTexture; // The actual rendered scene.

sampler inputTexture = sampler_state
{
    texture = <InputTexture>;
    magFilter = POINT;
    minFilter = POINT;
    mipFilter = POINT;
};

sampler lastTexture = sampler_state
{
    texture = <LastTexture>;
    magFilter = LINEAR;
    minFilter = LINEAR;
    mipFilter = LINEAR;
    addressU = CLAMP;
    addressV = CLAMP;
};

struct VS_OUTPUT
{
    float4 Position : POSITION;
    float2 TexCoords : TEXCOORD0;
};

float4 Distort (VS_OUTPUT Input)
{
    float4 color1;
    float4 color2;
    float2 coords;
    float mul;

    coords = Input.TexCoords;
    color1 = tex2D(inputTexture, coords);

    // 0.1 seems to work nicely.
    mul = (color1.b * 0.1);

    coords.x += (color1.r * mul) - mul / 2;
    coords.y += (color1.g * mul) - mul / 2;

    color2 = tex2D(lastTexture, coords);

    return color2;
}

float4 RunEffects (VS_OUTPUT Input) : COLOR0
{
    float4 color;

    color = Distort(Input);

    return color;
}

technique Main
{
    pass P0
    {
        PixelShader = compile ps_2_0 RunEffects();
    }
}

これが最終的な効果です。

波及効果

この手法は3Dゲームでも機能します。ただし、パーティクルシェーダーとディストーションシェーダーにもっと配慮する必要があるかもしれません。


私はWindows Phone用のゲームを作成していません。質問を更新しました。
Mathias Lykkegaard Lorenzen

@MathiasLykkegaardLorenzen私は自分のブログからいくつかのコンテンツを持ち上げて回答に入れました。うまくいけば、それがあなたに良い出発点を与えるでしょう。
ジョナサンディキンソン

電話の例は素晴らしく、まさに私がやろうとしていることです。残念ながら、私はエフェクトが世界とともに動くことを望んでおり、スクリーン座標に基づいているのではありません。それは可能ですか?
Mathias Lykkegaard Lorenzen、2011

@MathiasLykkegaardLorenzenそれは確かに可能ですが、それは信じられないほど高価になるでしょう-その場合、私は私の解決策に行くことをお勧めします。コードが見つかったら、メールで送ります。あなたが私のアートワークのどれも使用しないことを約束する限り:)。
ジョナサンディキンソン

@Jonathan Dickinson更新されたXNA 4コードを提供していただけませんか。
アミールRezaei
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.