Graphics cards are slow to get going, but then extremely fast after they start. If you ask the graphics card to draw one single triangle, it will take a relatively long time for it to wake up and notice your request, but then it will draw the triangle in hardly any time at all. If you ask it to draw 100 triangles, it will take exactly the same amount of time to get going, and then draw all 100 triangles in not much longer time than it took for just one. To get the best performance, you want to give the graphics card large batches of triangles rather than feeding them to it one at a time.

The SpriteBatch class in the XNA Framework does exactly this. If you draw more than one sprite in a row using the same texture, it will batch them up, then give them all to the graphics card in one event. This works only when the sprites use the same texture, however. If you draw two sprites using texture A, then two using texture B, SpriteBatch will say, "Hey graphics card, here are two sprites. Now stop, change your texture. OK, now here are two more sprites." It would be faster if it could give all four sprites to the graphics card in a single batch, but it cannot do this because the texture is not the same.

What if you made a single bigger texture that contained the image from texture A and also the image from texture B, arranged next to each other? You could then use the overload of SpriteBatch.Draw that lets you specify a source rectangle parameter, telling the card which part of this bigger texture to display on the screen. The results will look the same as before, but now all four sprites use the same texture, so SpriteBatch can render them more efficiently.

Manually combining sprite images into larger sheets works well if you have just a few sprites, but it quickly becomes a burden as your game grows larger. When you have hundreds of sprites, it can be laborious having to manually pack them all into a single sprite sheet texture, and then remember where you put each image so you know what source rectangle to pass to SpriteBatch.Draw in your game code.

This sample automates the process of creating sprite sheets by using a custom content processor. You provide an XML file listing any number of individual bitmap files, one per sprite. The processor reads all these bitmaps, packs them into a single larger texture, and saves this new texture along with information recording what source rectangle should be used for each sprite. You can then look up your sprites by name rather than having to remember the specific coordinates for each image.

Sample Controls

Sprite sheets are created from XML files that list any number of individual sprite bitmaps, for instance:

      <XnaContent>
      <Asset Type="System.String[]">
      <Item>cat.tga</Item>
      <Item>glow1.png</Item>
      <Item>glow2.png</Item>
      </Asset>
      </XnaContent>
    

To create a new sprite sheet, add an XML file in this format to your Content folder. Make sure the Content Importer property is set to XML Content - XNA Framework, and change the Content Processor setting to SpriteSheetProcessor. This will build all the sprite bitmaps listed in your XML file into a sprite sheet .xnb file, which you can load into your game by calling Content.Load<SpriteSheet>(...) .

See the SpriteSheetGame.Draw method for an example of how to use the SpriteSheet object. You can look up individual sprites either by name (as used for the cat) or by index (as used for the glow animation). You can perform math on the index values to cycle through multiframe sprite animations.

To reuse this code in your own game, add the SpriteSheetPipeline and SpriteSheetRuntime projects to your solution.

The SpriteSheetProcessor

Texture Filtering

This sample always outputs the sprite sheet in 32-bit Color format. To save space, you could change the SpriteSheetProcessor to convert the bitmap data into some other format, perhaps using DXT1 or DXT5 compression. You could even use a content processor parameter to make the compression optional for each sprite sheet.

To create a processor parameter, add the following property to the SpriteSheetProcessor class.

      [DefaultValue(false)]
      public bool Compress
      {
      get { return compress; }
      set { compress = value; }
      }

      bool compress;
    

To implement the compression, add the following code at the end of SpriteSheetProcessor.Process, immediately before the return statement.

      if (compress)
      {
      spriteSheet.Texture.ConvertBitmapType(typeof(Dxt5BitmapContent));
      }
    

DXT compression requires texture sizes to be multiples of four. We need to make sure the generated sprite sheet will always be a valid size. The packing algorithm always produces sheets with a valid width. However, the height could be anything, so we must round it up to the next larger multiple of four. Add this line to SpritePacker.PackSprites immediately before the "Sort the sprites back into index order" comment:

      outputHeight = (outputHeight + 3) & ~3;
    

After rebuilding the processor project, you can select any XML content file that is set to use the sprite sheet processor. Then open up the Visual Studio properties pane, expand the + sign next to the Content Processor property, and change the newly created Compress setting.