Shockwave of Fury

Tonights coding efforts have born much fruit, I managed to finally generate a decent texture to use for base of the shockwave effect and roughly impliment the effect in game.

The in game result is as good as I’d hope, it still needs a thumping sound effect to give it real punch but I think I’m on to a winner.

The first trick to the effect is trying to get your head around the base texture (to the right), I’ve used a the same technique they use for bump and nornal mapping, where the texture map doesn’t hold colour information it stores offsets for the sampling co-ordinates of the background texture.

Red from 0 to 255 stores the X axis offset and Green the Y, the baby poo tan/green in the middle and the outside on the texture is Colour R128 G128 B0 A255 right in the middle, in other words no offset.

First up I tried using photoshop to generate the texture with overlapping gradients, but I couldn’t get the results I was after so I ended up using XNA to generate the texture on screen and saved it out with the handy Save() method of Texture2D.

Here’s the shader I use to apply the offset texture to the back ground texture:

uniform extern float4x4 World : WORLD;
uniform extern float4x4 ViewProj : VIEWPROJECTION;
uniform extern texture backGroundTexture;
uniform extern texture offsetTexture;
uniform extern float textureOffset;


struct VS_OUTPUT
{
    float4 position : POSITION0;
    float4 textureCoordinate : TEXCOORD0;
    float4 P : TEXCOORD1;
};

sampler backGroundSampler = sampler_state
{
    Texture = ;
    MIPFILTER = LINEAR;
    MINFILTER = LINEAR;
    MAGFILTER = LINEAR;    
};

sampler offsetSampler = sampler_state
{
    Texture = ;
    mipfilter = LINEAR;      
};

VS_OUTPUT Transform(
    float4 Pos  : POSITION, 
    float4 Col : COLOR,
    float4 TextureCoordinate : TEXCOORD0
    )
{
    VS_OUTPUT Out = (VS_OUTPUT)0;

    Out.position = mul(Pos, mul(World, ViewProj));
	Out.textureCoordinate = TextureCoordinate; 
	Out.P = Col;

    return Out;
}

float4 ApplyTexture(float2 textureCoordinate : TEXCOORD0, float4 p : TEXCOORD1) : COLOR
{
	float4 bump = tex2D(offsetSampler, textureCoordinate);
	
	float2 perturbation = 0.5f - bump.rg;

	float2 perturbatedTexCoords = textureCoordinate + perturbation / 25.0; // modify this division value for more or less effect

	float4 c = tex2D(backGroundSampler, perturbatedTexCoords);

    return c;
}

technique TransformTechnique
{
    pass P0
    {
        vertexShader = compile vs_1_1 Transform();
        pixelShader  = compile ps_2_0 ApplyTexture();

    }
}