XNA Fading a Logo In
Monday, March 05 2007 - xna, tutorial
I was reading one of Shawn Hargreaves Blog posts the other day and got inspired…. So I thought I would put a small post together to show how to fade a logo in, this could be used to show your company logo at the beginning of your application.
To do this I have used a basic 2d Texture and Sprites, the first step is create the logo texture in Photoshop or the graphics application of your choice. One done I put together a basic application drawing the logo in the exact centre of the application screen.
From the base application add the following lines to the beginning just under the creation of the content manager.
private SpriteBatch spriteBatch;
private Texture2D logoTexture;
private byte logoOpacity;
The next stage is to set up the sprite batch and load the content, add the following lines to the load graphics content call.
// TODO: Load any ResourceManagementMode.Automatic content
this.spriteBatch = new SpriteBatch(this.graphics.GraphicsDevice);
this.logoTexture = content.Load<Texture2D>(@"Content\Logo_01");
Inside the update call add the following lines of code, this code will change the opacity of the logo texture and make it fade in.
// TODO: Add your update logic here
if (this.logoOpacity < 255)
this.logoOpacity += 1;
Now onto the drawing code, add the following code to the main draw or render code.
graphics.GraphicsDevice.Clear(Color.Black);
// TODO: Add your drawing code here
this.spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
this.spriteBatch.Draw(this.logoTexture, new Vector2(200, 100),
new Color(255,255,255,this.logoOpacity));
this.spriteBatch.End();
That's it for the coding, you should now be able to save your application and execute it, what should happen is that the screen will start blank and the logo in the centre should slowly fade in.
I will make the code available from the downloads section on this site, if you have any questions or feed back please post.
