XNA Shader Programming – Tutorial 22, Transition: Fade

XNA Shader Programming
Tutorial 22 – Transition: Cross
Hi, and welcome to Tutorial 22 of my XNA Shader Programming tutorial. Today I will present to you the 2nd transition tutorial, where I will play one scene, and then fade in to another one using a simple post process shader!
The effect we will see today is a basic transition effect, where the scene transition will "cross" into another one.
The Cross transition
The cross transition will go from one scene into another one, using a "line" that is where the fade is.
In the figure below[22.1], scene B is playing, and scene A is crossing in, resulting in scene A playing.
Fig 22.1
Implementing the shader
As in tutorial 21, we need to have two textures in our shader, one for each scene you want to fade between, and then you will need to have a variable that will be used to tell how far in the fade we are.
This variable must be between 0 and 1, and when the variable is 0, Scene A will play, and when its 1, Scene B will play.

Lets start writing the cross-transition shader:

sampler ColorMapSampler : register(s0);

texture ColorMap2;
sampler ColorMapSampler2 = sampler_state
   Texture = <ColorMap2>;
   MinFilter = Linear;
   MagFilter = Linear;
   MipFilter = Linear;  
   AddressU  = Clamp;
   AddressV  = Clamp;
float fFadeAmount;

Here we define two texture samples, ColorMapSampler1 and ColorMapSampler2, and both will contain a scene that we will fade between using the variable named fFadeAmount. The texture samplers is defined in two different ways, and is explained in a previous tutorial.

Now, we are ready to implement the pixel shader.
// Transition
float4 PixelShader(float2 Tex: TEXCOORD0) : COLOR
 float4 Color = tex2D(ColorMapSampler, Tex); 
 float4 Color2 = tex2D(ColorMapSampler2, Tex); 
 float4 finalColor = lerp(Color,Color2,smoothstep(fFadeAmount,fFadeAmount+fSmoothSize,Tex.x));
 // Set our alphachannel to fAlphaAmount.
 finalColor.a = 1;
 return finalColor;
This shader is almost exactly the same as the one in tutorial 21, except from the following line:
float4 finalColor = lerp(Color,Color2,smoothstep(fFadeAmount,fFadeAmount+fSmoothSize,Tex.x));
Here we use a function named smoothstep(a,b,x) that will return a value between 0 or one based on a,b, and x. The smoothstep function returns 0 when x is below a, and 1 when x is above b, and something in between when x is between a and b.
Fig 22.2
We then use the smoothstep, using Tex.x as x, and fFadeAmount as a, and fFadeAmount (fSmoothSize is set to 0) as b, making a sharp on the transition. You can use the fSmoothSize to make the transition smoother, making b larger than a.
This function will return [0,1] based on Tex.x, and use this as the control value in the lerp function, making a nice cross transition!
Note: When fSmoothSize is > 0.0, and fFadeAmount = 0, we will still be able to see fSmoothSize part of the scene displayed when fFadeAmount = 1, because our fade starts at fFadeAmount and stops at fFadeAmount( 0 ) + fSmoothSize.
Using the shader
When we want to use the shader, we will need to render the two scenes we want to fade between in to a texture, and pass them in to the shader:
spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.SaveState);
    // Apply the post process shader
    float fadeBetweenScenes = ((float)Math.Sin(m_Timer) * 0.5f) + 0.5f;
            spriteBatch.Draw(SceneTexture, new Rectangle(0, 0, 800, 600), Color.White);
What we do here is to use the texture set when rendering the sprite as SceneA and another texture set by a parameter to the shader as SceneB, and then we have a periodical function to fade between these based on a given timer, so fFadeAmount is somewhere between 0 and 1.
This entry was posted in XNA Shader Tutorial. Bookmark the permalink.

2 Responses to XNA Shader Programming – Tutorial 22, Transition: Fade

  1. Francois says:

    Thank you very much for this series of tutorials! I find them really informative and useful.

  2. ashwini c says:

    can you please tell in which tutorial you have explained about defining texture samplers in two different ways? I am trying to figure out the difference

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s