XNA Tutorial: Drawing Sprites

After looking at the basics of XNA in the last tutorial, it is time to do some coding and see something on our screen! The first thing we are going to do is to draw a sprite on our screen.  Games are made up of a bunch of moving images that interact with each other and integrate seamlessly into a background.  These images in games are called sprites.

Loading an image

Create a new project by following the steps in the first tutorial. Download the image that we are going to use as a sprite from here.  Right click on the content project and create a folder called 'images'.  I like to categorise the resources in the content project by their type to keep things tidy.  Then right click on the folder and choose Add > Existing Item.

Adding an image to the content project

Now create a global variable of type Texture2D.

Texture2D pacmanTexture;

This type is present in the XNA Framework and will hold the image that we have just added.  In order to load the image, go to the LoadContent method and add the following line of code just under the spriteBatch loading.

spriteBatch = new SpriteBatch(GraphicsDevice);
pacmanTexture = Content.Load<Texture2D>("images/pacman");

The above code loads the image in our project, now all we need to do is to draw the image to the screen using the spriteBatch variable in the Draw method.

Drawing a sprite

We want the background colour to be black as our texture's background is also black. To do this, change the first line of code in the Draw method from Color.CornflowerBlue to Color.Black.

If you run the project, you will see a black background instead of the default colour. Now all we have to do is to draw the image. Add the following lines of code under the GraphicsDevice.Clear line

GraphicsDevice.Clear(Color.Black);

//Draw pacman
spriteBatch.Begin();
spriteBatch.Draw(pacmanTexture, Vector2.Zero, Color.White);
spriteBatch.End();

What the above code does, is to first tell the spriteBatch that we are going to pass something to draw, then we tell the spriteBatch to draw the image by passing the texture variable we have created earlier in the spriteBatch's Draw method. The second parameter is the position where we are going to draw the image, Vector2.Zero is a static variable for position (x:0, y:00. Note that position in XNA is done by using x and y axis, (0,0) being the top-left point of the screen. The last parameter is used to tint the image with another colour. White is passed you do not want to tint the image.

Now run the project and you should see the following.

Drawing our sprite

Centering the sprite

In order to display the image in the middle of the screen we need to know the size of the screen.  This can be done by calling GraphicsDevice.Viewport.Width and GraphicsDevice.Viewport.Height.  Therefore we can adjust the position of the sprite to the centre of the screen by amending the position parameter we earlier set as Vector2.Zero.

spriteBatch.Draw(pacmanTexture, new Vector2(GraphicsDevice.Viewport.Width / 2 - pacmanTexture.Width / 2, GraphicsDevice.Viewport.Height / 2 - pacmanTexture.Height / 2), Color.White);

Centering an image

In the next tutorials we will cover how to draw text and animate sprites.

Please feel free to comment if you have any suggestions or queries for this tutorial, they are much appreciated :)