Getting started with XNA – Drawing 2D Textures

Now that you know how to draw primitives, it’s time that we step up to drawing 2d textures, aka images. Just start up your XNA Game Studio Express en create a new Windows Game. Add a new folder to your windows game and call it Content. In that folder, you need to add 2 images: a logo and a heads up display. These images are not treated as normal files, but are automatically detected by the content pipeline. The content pipeline is an extensible content processing framework managed in VC# Express. It’s this framework that will load all your content in your game. The content pipeline will compile your asset to a .xnb file at compile time, and load it at runtime. As we progress in the tutorials, you’ll learn more about the content pipeline, but for now, you only need to know that it imports your content in your game.

Notice that the XNA Framework Content property is set to true, en the content importer and content processor are those fit for a texture. Also notice the asset name, as it is that name we will call when we want to load our image.

Enough already, let the coding begin.
Add the following variables to your game class.
// a spritebatch which will draw our images
SpriteBatch spriteBatch;

// a Texture2D containing our Heads UP Display
Texture2D hud;
// a Texture2D containing our logo
Texture2D logo;

The spritebatch will be responsible for drawing our images. Yes, one spritebatch can draw multiple images. Then we also need 2 variables which will hold our images. Texture2D will do just fine.
Then go to our LoadGraphicsContent method, and make an instance of our spritebatch. In the constructor, we give a reference to our graphics device. The reason for this is that the spritebatch has to know what to draw on. This doesn’t necessarily have to be our graphics device, it can also be a RenderTarget2D (image in memory) for instance.
// Make an instance of our spritebatch
spriteBatch = new SpriteBatch(graphics.GraphicsDevice);

Ok, now we load our images. Put the code below under the previous code.
// Load our images using the content pipeline
logo = content.Load("Content/logodae");
hud = content.Load("Content/hud");

Notice that the content manager works with generics. If I want to load a Texture2D, I pass Texture2D, you can also pass a Model or other kinds of objects. Also notice that we don’t add extensions to our file, because the content pipeline compiles them to .xnb files at compile time.

Now that our textures are loaded, the only thing left to do is drawing them. So go to your Draw method and add the following code after the base.Draw(gameTime); call.
// tell our graphics card that we are ready to draw
// The first two parameters are default, the third one
// tells our graphics card to return to the previous state
// after drawing, so our 3d models will look nice.
spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Deferred, SaveStateMode.SaveState);

// Draw our images
spriteBatch.Draw(hud, new Rectangle(0, Window.ClientBounds.Height - hud.Height, hud.Width, hud.Height), Color.White);
spriteBatch.Draw(logo, new Rectangle((Window.ClientBounds.Width / 2) - (logo.Width / 2), (Window.ClientBounds.Height / 2) - (logo.Height / 2), logo.Width, logo.Height), Color.White);

spriteBatch.End();

First we have to tell our graphics card that we are ready to draw, and that it has to restore itself to the previous state after drawing (this is necessary for mixing 2d and 3d). Then we draw our textures using the spritebatch. Finally, we tell our graphics card that we have finished drawing. One final thing that I always do is change the background color to white from cornflower blue (I really hate that color).
graphics.GraphicsDevice.Clear(Color.White); instead of graphics.GraphicsDevice.Clear(Color.CornflowerBlue);

When you press F5, you should see the following:

As always, the complete source code is available for download.

Next tutorial: basic input.