XNA Tutorial – Fading in a Splash Screen Logo

In my previous article we put together a small base application that could be used as a splash screen in an XNA Based Application; with today’s article we are going to add a nice fade effect to the code. For this article we are going to perform a fade on the logo texture only, this will allow you to have a normal background setup and just fade the logo over the top.


To start with load up the previous example and make sure that it is running. If you have not completed the base application here is a link to the article. (XNA Tutorial – Creating a Splash Screen)


We are going to perform the fade using the alpha channel of the logo and Color of the texture. When you normally use a Color you would use the Color Name to set it up i.e. Color.White, or you could use the full RGB values. Below is a small section of code that shows some of the different ways you could set up a Color.


[code language="C#"]
Color color = Color.White;
Color color = new Color(new Vector3(255, 255, 255));
Color color = new Color(255, 255, 255);
[/code]


But you will find that the Color system also takes a forth value for the Alpha channel.


[code language="C#"]
Color color = new Color(new Vector3(255, 255, 255, 255));
Color color = new Color(255, 255, 255, 255);
[/code]


This is what we are going to use to fade the logo. When using this value of 0 means that the Texture will be 100% transparent, and a value of 255 will show the texture as 100% solid.


To fade the logos texture I want to keep a base color and only adjust the Alpha Channel of the texture for this I have put together a small function, add the following function to the bottom of the main game class.


[code language="C#"]
public Color FadeColor(Color baseColor, float FadeValue)
{
Color tempColor;
tempColor = new Color(baseColor.R, baseColor.G, baseColor.B, (byte)FadeValue);
return tempColor;
}
[/code]


Next we will need to add the following Globals just under the logoRotationAngle call.


[code language="C#"]
float       logoFadeValue;      // Current Value of the Fade for the Logo
float       logoFadeSpeed = 60.0f; // Speed at which the Fade will happen
[/code]


This will be the Current Fade Value for the logos Texture, as well as the speed at which the logo will fade. The next stage is to add some code to the Update call for the application.


Add the following code to the main Update call in the Games main class.


[code language="C#"]
float timeDelta = (float)gameTime.ElapsedGameTime.TotalSeconds;


if (this.logoFadeValue < 255)
{
this.logoFadeValue = this.logoFadeValue + (timeDelta * this.logoFadeSpeed);
}
else
this.logoFadeValue = 255;
[/code]


The code above sets up a constant time value that we can use to smoothly animate our logos fade. The next few lines actually do the fade, what I does is slowly update the fade value until it reaches 255 (Solid) once there it will stay there.


The final stage is to change the Draw call for the application so that it will utilize the fade code we have just added. Change you spriteBatch.Draw line to look like the following.


[code language="C#"]
this.spriteBatch.Draw(this.logoTexture, this.viewportCentre,
     null, FadeColor(Color.White, this.logoFadeValue), this.logoRotationAngle, this.logoCentre,
     1.0f, SpriteEffects.None,0.0f);
[/code]


You will notice that all we change was the call to the Sprites Color; here is where we add the FadeColor call so that we can change the Color value as the game animates.


When you have finished here you should be able to now run the application and see your logo fade from nothing to a solid image. If you would like to speed up or slow down the fade all you need to do is change the logoFadeSpeed value to a different value.


That’s it for this one, hope someone finds this useful.


Cross Post from www.virtualrealm.com.au

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>