SpriteBatch Basics


In this tutorial, we will take a look at the core feature of 2D drawing: the SpriteBatch class. The SpriteBatch class can do lots of things. This tutorial will not cover everything that the SpriteBatch class can do, but just get us going with it. During this tutorial, we will learn how to draw sprites on the screen.

For this tutorial, we will assume that you are starting with a brand new project, but it is pretty easy to add this code into an existing project that you are already working on.

Preparing the Content

The first thing we will need to do to is make sure we have some sprites to draw. We are going to add some images to our project in the same way that we've done in other tutorials. So for starters, let's get some images. You can get your own images from anywhere you want. I've posted a few images on this website, located at http://rbwhitaker.wikidot.com/spritebatch-basics-resources which I will use in this tutorial, and you are free to use as well. Take the images you want and add them to your project like we've done before. (Right click on your content project in the Solution Explorer and click on Add > Existing Item, and then browse and choose your files.) Try to have a couple of different images so that we can play around with them.

Create a Place to Store the Images In Game

Now we need to load the images in to Texture2D objects. Let's create a few Texture2D objects to store our images. Add the following three lines of code as instance variables to our game's main class:

private Texture2D background;
private Texture2D shuttle;
private Texture2D earth;

Loading the Images

Now let's actually load the images into our texture objects. In the LoadContent() method, add the following lines of code:

background = Content.Load<Texture2D>("stars"); // change these names to the names of your images
shuttle = Content.Load<Texture2D>("shuttle");  // if you are using your own images.
earth = Content.Load<Texture2D>("earth");

Now our images are loaded into our game and are ready to be drawn.


SpriteBatches are the most important (arguably the only important) component of 2D drawing. A SpriteBatch contains methods for drawing groups of sprites onto the screen.

We will first need a SpriteBatch object to do drawing. The standard template already has added a SpriteBatch object to our game for us to use, and the Microsoft people were nice enough to get it set up for us. If you look just inside your game's class at the instance variables, you will see one that looks like the line below:

SpriteBatch spriteBatch;

You will also see a reference to this SpriteBatch class in the LoadContent() method, where the SpriteBatch object is assigned a value.

protected override void LoadContent()
    // Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);
    // TODO: use this.Content to load your game content here

Drawing with SpriteBatches

All that is left for us to do is the actual drawing of our sprites.

As a first step to drawing, let's draw the background. A SpriteBatch is used to draw a whole bunch of sprites all at one time. It is much more efficient this way, rather than drawing each sprite individually. To draw with a SpriteBatch, we will first indicate that we want to begin using our SpriteBatch to draw a "batch" or group of sprites. We will then draw our sprites, and when we're done, we will indicate that we are done drawing our batch of sprites. Go down to the Draw() method and add the following three lines of code:

spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);

We already mentioned what spriteBatch.Begin() and spriteBatch.End() do. Let's take another look at the spriteBatch.Draw() call. The first argument says what texture we want to use. We are using our background texture. The second argument is a Rectangle that indicates where the sprite should be drawn. The first two parameters of the Rectangle constructor are the x and y-coordinates respectively, and the third and fourth are the width and height. This will fill up the entire window, since it is 800 x 480 by default. (This is the resolution of most Windows 7 Phones, by the way.) The last parameter for the Draw() command is a tint color. We don't want our image tinted at all, so we use Color.White.

You can try playing around with different tint colors to see what it does.

At this point we can run our game and see what it looks like. If you are using the same images as me, it should look like the screen shot below:


A Few More Sprites

We've essentially done the basics of SpriteBatches. But before we stop, let's draw a couple more sprites with a couple of other methods. Let's add the following two lines of code to the Draw() method, just after our previous spriteBatch.Draw() call, and before the spriteBatch.End() call.

            spriteBatch.Draw(earth, new Vector2(400, 240), Color.White);
            spriteBatch.Draw(shuttle, new Vector2(450, 240), Color.White);

This will make our Draw() method look like this:

protected override void Draw(GameTime gameTime)
    spriteBatch.Draw(background, new Rectangle(0, 0, 800, 480), Color.White);
    spriteBatch.Draw(earth, new Vector2(400, 240), Color.White);
    spriteBatch.Draw(shuttle, new Vector2(450, 240), Color.White);

These two lines of code that we added use a slightly different version of the SpriteBatch.Draw() method. With this version, the first parameter is the texture, like before, and the last parameter is the tint color like before, but the middle parameter is a Vector2 instead of a Rectangle. This is the location that the sprite will be drawn on the screen. We've put the earth sprite at (400, 240), which is the center of the screen (at least, the upper left corner of the Earth texture is) and the shuttle texture just a little bit more to the right of that.

The order that you draw sprites is important. Whatever you draw first will be drawn below the later things. It is kind of like stacking them up. We can now run our game and see the new textures.


What's Next?

In this tutorial, we looked at how to draw sprites using the SpriteBatch class. Now that we know this, there are a number of things that we might want to do next. We might want to animate our sprites, draw text, or include our sprites in a 3D game. Each of these are discussed in separate tutorials.

Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!