XNA Tutorial – Fading a Splash Screen from the Distance

In my last two tutorials I went through the process of displaying a logo like splash screen for your XNA Applications. The first article went through the steps to create a base application for the tutorials and also to display a simple logo in the centre of the screen. In the second article I went through the process of making that logo fade in from nothing to a solid image.

With this third Tutorial I am going to provide you with the simple steps to have the logo fade in from the distance. To do this we are going to use the information from the two previous tutorials and then utilise the scaling of a sprite to have the image move from the distance to the main foreground.

When scaling sprites you will have to use one of the full overrides for the sprite batch draw command.

SpriteBatch.Draw(Texture2D  // Sprite Texture
 , Vector2    // Screen Position
 , Nullable<Rectangle> // Source Rectangle
 , Color     // Color Tint, Sprite Color
 , Single    // Sprite Rotation
 , Vector2    // Sprite Origin
 , Vector2 or Float  // Sprite Scale
 , SpriteEffects   // Sprite Effects
 , Single)    // Sprite Sort Depth

Adds a sprite to the batch of sprites to be rendered, specifying the texture, screen position, source rectangle, colour tint, rotation, origin, scale, effects, and sort depth.

When using the scale call we have the choice of using a Vector2 or a Float. If you choose to use the Vector2 option you have the ability to scale the sprite on one or all of the axis at different values, but if you would like to scale the sprite on a uniform manor on both axis you can specify a Float value. No mater which method you choose the values range from 0 to 1.0f, 0 meaning 0% scale or not really there, through to 1.0f being 100% scaled (or the full size of the sprite). If you did increase the value of the float it will still increase the size of the sprite, for example 2.0f would change the sprites size to 200% of the normal size.

To get the logo to scale we will need to add some globals to the code, add the following lines just underneath the fading code so that it looks like this.

float logoFadeValue; // Current Value of the Fade for the Logo
float logoFadeSpeed = 60.0f; // Speed at which the Fade will happen

float logoScaleValue; // Current Scale Value for the Logo
float logoScaleSpeed = 0.2f; // Speed of the scale operation

Next we will need to add a small section of code to the update call; this will control the rate of the scale and also stop the scale when the image has reached 100% of the scale process. Add the following lines of code at the end of the Update call just before the base.update call.

// Perform the Scale on the Logo
if (this.logoScaleValue < 1.0f)
this.logoScaleValue = this.logoScaleValue + (timeDelta * this.logoScaleSpeed);
this.logoScaleValue = 1.0f;

The final change we need to do is to change the draw call for the application. Inside the Draw call change the spritebatch.draw command so that it looks like the following line.

this.spriteBatch.Draw(this.logoTexture, this.viewportCentre,
 null, FadeColor(Color.White, this.logoFadeValue), this.logoRotationAngle, this.logoCentre,
 this.logoScaleValue, SpriteEffects.None,0.0f);

All we have done there is change the call so that we now include the scale value for the image.

When you have finished you can execute the application and see the logo fade in from the distance until it is at the very centre and solid.

Ok that does it for this tutorial, hopefully in the next one I will be going through the process of including the splash screen in the Game State sample that you can download from the Creators Web Site.

Cross Post from www.virtualrealm.com.au

Leave a Reply

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