XNA Tutorial – Creating a Splash Screen

I am currently working on a small collection of projects, what I am finding is that I want to put a splash screen onto each application. This splash screen would display my logo and any of the partner logos for the application before the application starts.
In doing this I also saw that there are not that many articles or tutorials being posted, maybe the little bit of a slump is due to the fact the everyone is busy or they are just waiting for the release of XNA 2.0. So I have decided to try and post a small series of articles that show different ways of displaying the Splash Screen and some different effects that can be applied to it. Over the period of the articles if you think of some other effects please post them and I may add them to the list.

This is the first in the series, and there for each of the following articles will be using this small application as a base. Note that the examples that I am going through will not be in the form of a component or a system that you can plug into any application. What I will be doing is creating small applications that show the effects and the methods to complete those effects. You should then be able to modify your code using these effects. But in a short period I will be going through the process of adding a splash screen or integrating this base application into the Game State Sample supplied on the Creators Site.

To start the base application create a new Windows based game, for the purpose of this article I called it Splash_01. Now that we have the main base of the application created we will need to setup some common changes to the application.
The first is to change the screen size so that it has a good wide screen look to it; you will find that this is also the same size screen that the game state sample uses. This is done by adding the following lines of code to the game applications main constructor.

// prefer a resolution suitable for both Windows and Xbox 360
graphics.PreferredBackBufferWidth = 853;
graphics.PreferredBackBufferHeight = 480;

With this example I want to be able to draw the logo for the splash screen at the centre of the screen, to do this we need to know where that centre is. This can be done by adding the following global just under the declaration for the content and GraphicsDevices Managers.

Vector2 viewportCentre;

And then adding the following just under the code to change the games screen size.

this.viewportCentre = new Vector2(this.graphics.GraphicsDevice.Viewport.Width / 2, this.graphics.GraphicsDevice.Viewport.Height / 2);

Now that the base has been setup we really need to draw the logo. With this ample and the ones moving forward, I would like to be able scale, rotate and do other things to the image. To do the basic functions I am going to need so simple global set up. Add the following globals just underneath the viewport declaration we added.

SpriteBatch spriteBatch;

Texture2D   logoTexture;        // Texture for the Logo
Vector2     logoCentre;         // The Centre of the Logo Texture
float       logoRotationAngle;  // The Rotation Angle of the Texture Image

Of course in the last step I added the SpriteBatch call, without this we would not be able to display the logo and perform the tasks going forward. With the globals set and the Device created the next stage is to setup and load the content.

The first stage in Setting up the content is to actually add the logo image, with this application add a new folder to the game using the solution explorer and call it “Content”. Next inside that folder add another folder called “Textures”. The Textures folder will be holding all of the textures that we are going to be using for the application. In future articles I will be adding other folders to the application to store different types of content files, these could include sprite fonts, audio, and effects.

Add you logo Image to the Textures Folder. This could be any logo that you want to display in the Splash Screen.

At this stage we will also be setting up the Centre of the logo that we are going to draw. Add the following code to the LoadGraphicsContent call in the application.

this.logoTexture = content.Load<Texture2D>(@”Content\Textures\Logo_01″);
this.logoCentre = new Vector2(this.logoTexture.Width / 2, this.logoTexture.Height / 2);
this.logoRotationAngle = 0.0f;
this.spriteBatch = new SpriteBatch(this.graphics.GraphicsDevice);

The above code loads the logo image into the Texture variable, and then we find the centre of that texture and set the rotation to a 0 angle.
The Final step is to add the Draw code to the application, add the following code to the Draw call for the Application.


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


The first line of code sets up the sprite batch so that we will utilize the Alpha Channel of the image (This will help us to see the background through the Image). The next line draws the actual sprite onto the screen. With this call we are passing the Texture to the call as well as the viewport centre for the position, but we are also passing the rotation angle of the sprite and the centre of the Logo’s Texture. There are some other values being passed to the call but for the moment we do not need to worry about them, just trust me they are there for a reason.

When drawing the Sprite you have the choice of several overloads, the most common is the Spritebacth.Draw(Texture, Position, Color) but with the above we are going to change the origin of the sprite so that when we pass a position to the call the sprite will be drawn so that the origin we have set up is drawn at the position we pass. This comes in handy when rotating sprites, there is more information on this in the documentation that ships with the XNA Framework System.

Ok that’s it for the first Application; this application is going to be used as a base for a series of articles so keep it safe. If you run the application now you should be presented with a wide screen application that has your logo in the centre of the screen.

Until next time Thanks and if you have any thoughts or comments please post a comment.

Cross Post from www.virtualrealm.com.au

Leave a Reply

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