Part 2 – Sprite sheets

In Part 1 we saw how to create a physics simulation and how to render some objects to screen. Today we’ll go into more detail on rendering. Here’s a recap of our Draw method as it currently stands:

spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, null, null,null, null, transformationMatrix);
foreach (var body in _bodies)
{
	spriteBatch.Draw(_box, body.Position * Scale, null, Color.White, body.Rotation, origin, 1f, SpriteEffects.None, 0f);
}
spriteBatch.End();

The SpriteBatch object is a core XNA object that allows us to draw 2D textures on the screen. As its name implies it does so in batches. The nature of graphics cards is that they perform really well when given tasks in large batches.
Imagine a typical game screen: a multitude of different textures. SpriteBatch will have a hard time coping with this.

In order to speed up rendering we will combine all our textures (from now on referenced to as sprites) into one huge texture, called a sprite sheet.

Bing the term ‘spritesheet’ and you’ll find thousands of examples: www.bing.com/images/search?q=spritesheet&FORM=BIFD

Luckily we don’t have to create such a sprite sheet manually. On the App Hub site we can find a sample project which contains a content processor that does just this job.

What is a content processor? A content processor takes as input an asset (= a list of all our individual sprites) and performs some operations on it to transform the original asset into a more desirable asset (a sprite sheet containing all individual sprites combined).
It goes without saying this transformation happens at compile time, not at run-time, since we want run-time to be as fast as possible.

Let’s dive into code again:

Go to http://create.msdn.com/en-US/education/catalog/sample/sprite_sheet to download the sample code containing the sprite sheet content processor.

The sample code contains a solution where 2 projects are important for us:
– SpriteSheetPipeline, containing the content processor.
– SpriteSheetRuntime (Phone), containing a SpriteSheet class which is a wrapper to access our combined sprite sheet.

Add both projects to our own solution.

Add a reference from PigsFly to SpriteSheetRuntime. Add a reference from PigsFlyContent to SpriteSheetPipeline (Phone).

Upgrading our artwork from a simple red box, we now have 2 textures:

 

Save these images in the root of the PigsFlyContent project, but do not add them to the project. If you were to add them, they would become part of our game, which we don’t want. We only want the generated sprite sheet to be part of it.

Next add a new item to the PigsFlyContent project: Add | New Item -> XML File. Give it the name PigsFlySpriteSheet.xml

Edit the content of the new file to make it look like this:

<XnaContent>
	<Asset Type="System.String[]">
		<Item>box1.png</Item>
		<Item>box2.png</Item>
	</Asset>
</XnaContent>

Finally, take a look at the properties of the xml file and set the Content Processor to SpriteSheetProcessor:

Given this preparation, we are now ready to use our brand new spritesheet.

We will revisit the LoadContent and Draw methods.

In LoadContent, load the sprite sheet as following:

SpriteSheet _sheet = Content.Load<SpriteSheet>("PigsFlySpriteSheet");

The SpriteSheet class has a Texture property, which returns the generated sprite sheet. We also have the following method at our disposal: Rectangle SourceRectangle(string spriteName).
Each sprite is defined by a Rectangle which contains the location on the sprite sheet where the sprite is located. Given the original sprite’sname, this method gives us that source rectangle. We will use this when rendering our bodies on screen.

Another change in LoadContent is that we will instruct each Body object which sprite it should use to render itself.

Farseer provides us with a UserData property on the Body class which can be used for any purpose we like. For now, we will store the original sprite name:

//Create 2 boxes
Body box1 = BodyFactory.CreateRectangle(_world, 0.4f, 0.4f, 1f);
box1.Position = new Vector2(4, 0.75f);
box1.BodyType = BodyType.Dynamic;
box1.UserData = "box1"; // <-- the name of the texture as it was called originally
_bodies.Add(box1);
Body box2 = BodyFactory.CreateRectangle(_world, 0.4f, 0.4f, 1f);
box2.Position = new Vector2(4.2f, 0.0f);
box2.BodyType = BodyType.Dynamic;
box2.UserData = "box2"; // <-- the name of the texture as it was called originally
_bodies.Add(box2);

We will now change our existing Draw method so it will render our two boxes with distinctive representations.
Because we use the same texture (= our sprite sheet) there will be no performance penalty for doing so.

spriteBatch.Begin();

foreach (var body in _bodies)
{
	spriteBatch.Draw(
			_sheet.Texture, // Spritesheet Texture
			body.Position * Scale, // Position
			_sheet.SourceRectangle((string) body.UserData), // Source rectangle, defines which subset of the spritesheet we will render
			Color.White,
			body.Rotation,
			origin,	// Origin, relative to source rectangle size
			1f, // Scale
			SpriteEffects.None,// No effects
			0f); // Z-layer
}

spriteBatch.End();

Here is the result:

Stalk me on twitter? Sure, why not? http://twitter.com/jodegreef