After you have downloaded all the software (for XNA) and have a killer idea, it is time to actually learn how to draw something on the screen–right? How do you expect to make a real game without drawing anything? This tutorial shows you how to use the SpriteBatch object to efficiently draw 2D items on the screen. In the end you will be experienced with rotations, scaling, sprites and sprite sheets. So let’s get started!
The first thing to do is get a clean XNA project started. If you do not know how to do this, please read the first tutorial on creating your First Game. I have decided to call this game EfficientBatching. With a newly opened Windows Game project, we need to get some stuff to draw. The XNA Framework comes with something called the Content Pipeline which it uses for managing, building and loading content. In the most basic light, the Content Pipeline provides a place for us to store and load items. You can get access to this project through the Solution Explorer. Go ahead and save the following image in “($ProjectDir)/Content/Textures”* I have saved it as “Ball.png” since it sort of resembles a ball.
Now that we have a wonderful image, we have to get it in our project and rendering. To get it into the Content Pipeline, click on the Content project’s node in the Solution Explorer and then select Show All Files in the toolbar. Open the Textures folder, right click on the image and select Include In Project. And that’s it! The image will now build via the Content Pipeline and automatically be copied to your game’s output folder.
The next step is to start rendering the image, so open up Game1.cs and add a Texture2D object to the top like so:
public class Game1 : Game {
SpriteBatch spriteBatch;
Texture2D spriteSheet;
}
Then in LoadContent, add the following code which loads the item into memory using the Content Pipeline. Remember this line of code right here because all content is loaded in a similar way. Adding the @ symbol before a string allows us to use escape characters without them actually escaping. This isn’t always necessary, but can be a good habit to get into.
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
spriteSheet = Content.Load(@"Textures/Ball");
}
The last item on our list for now is to draw the item! In the Draw method, go ahead and add the following. When using a SpriteBatch, it is extremely important and necessary that you always call Begin before drawing and End after drawing.
protected override void Draw(GameTime gameTime)
{
graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
// TODO: Add your drawing code here
spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
spriteBatch.Draw(spriteSheet, Vector2.Zero, Color.White);
spriteBatch.End();
base.Draw(gameTime);
}
On the next page we are going to discuss how the SpriteBatch.Draw method works and how we can make it so it draws only a portion of our original image.
* ($ProjectDir) provides quick access to your project directory in Pre-Build and Post-Build commands. These can be found in the Project Properties and are useful when you need to copy files after building your game.