Effetto ondulazione dell'onda?


9

Ho lavorato su un gioco di difesa della torre per un po 'di tempo, e finora sono davvero soddisfatto dei risultati. Tuttavia, c'è una cosa che vorrei aggiungere.

Ho visto un video di GeoDefense per Windows Phone 7 qui: http://www.youtube.com/watch?v=YhPr4A4LRPQ

Nota come (quando un'unità viene uccisa o un proiettile colpisce un'unità), lo sfondo si increspa in una sorta di effetto onda.

Come posso fare un equivalente? Sto pensando che in qualche modo ho bisogno di farlo nel vertex shader, con un quad composto da molti vertici.

Qual è la tua chiamata?

Modifica È importante notare che il mio gioco XNA non è fatto per Windows Phone, ma per PC Windows.

Risposte:


8

Il problema è che XNA su Windows Phone non ha il supporto shader personalizzato, quindi non è possibile scrivere uno shader di vertice o pixel shader. Tuttavia, puoi usare un trucco descritto da Catalin Zima che deforma una griglia di vertici per ottenere lo stesso effetto.

Se non stai prendendo di mira Windows Phone 7, puoi usare un trucco che ho descritto sul mio blog . Copia dei bit rilevanti in:

Queste distorsioni richiedono 2 immagini. Innanzitutto è necessario l'intera scena come obiettivo di rendering (ad esempio Texture2D) e l'obiettivo di rendering della distorsione. In genere si utilizza un sistema di particelle per riempire il target di rendering della distorsione; usando speciali sprite di distorsione (esempio sotto).

Ogni componente di colore nel target di distorsione (e sprite di distorsione) rappresenta quanto segue:

  • R : dx: offset X - f (x) = mappatura 2x-1 (da [0.0f, 1.0f] a [-1.0f, 1.0f]).
  • sol : dy: offset Y - f (x) = mappatura 2x-1.
  • B : m: forza Z - f (x) = x mappatura.

Un buon esempio di uno sprite che sarebbe usato per un'ondulazione sarebbe:

Ripple Sprite

Determinare il risultato di un'ondulazione è semplice come sommare le onde (tenendo presente la mappatura che è necessario eseguire prima su [-1.0f, 1.0f]); perché le onde in realtà sono anche questo additivo funziona e otterrai ottime approssimazioni delle onde reali.

Una volta che hai i due target di rendering puoi usare il seguente shader:

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();
    }
}

Questo è l'effetto finale:

Effetto a catena

Questa tecnica dovrebbe funzionare anche per i giochi 3D; anche se potresti dover dedicare più pensiero allo shader di particelle e allo shader di distorsione.


Non sto realizzando il gioco per Windows Phone. Ho aggiornato la mia domanda.
Mathias Lykkegaard Lorenzen,

@MathiasLykkegaardLorenzen Ho rimosso alcuni contenuti dal mio blog e li ho inseriti nella risposta, speriamo che ti dia un buon punto di partenza.
Jonathan Dickinson,

L'esempio del telefono è carino ed è esattamente quello che sto cercando di fare. Sfortunatamente, voglio che l'effetto si sposti con il mondo e non si basi sulle coordinate dello schermo. È possibile?
Mathias Lykkegaard Lorenzen,

@MathiasLykkegaardLorenzen È sicuramente possibile, ma sarà incredibilmente costoso - nel qual caso ti consiglio di scegliere la mia soluzione. Ti invierò il codice se posso trovarlo; fintanto che prometti di non usare nessuna delle mie opere d'arte :).
Jonathan Dickinson,

@Jonathan Dickinson Potresti fornirci il codice XNA 4 aggiornato?
Amir Rezaei,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.