How to implement SpriteSheet (Atlas) with Windows Mobile 7?

How to implement SpriteSheet (Atlas) 开发者_运维知识库with Windows Mobile 7?

One of the challenges with mobile devices, is how to load many images and still get good performance from the mobile device during the life time of the application. Here is a short explanation on how to use Sprite Sheet with windows mobile 7. What is Sprite Sheet and why do we need it?

When we create application or a game usually we need to present many images. Calling each image separately in the code create for us huge overhead performance during the life time of the application. When it comes to mobile devices with limited hardware resources it is very important to use these sprites(images) efficiently to get good performance. So how the spritesheet help us? Sprite Sheet is big image file that contain many small sprites (images), So instead of using many many images we use only one image file only! Our code call it once, and because the images are stored orderly on that image file it also save unnecessary unused space resulting less memory when loading it. Here is the explanation on how to do it with Windows Mobile 7. I made some modification to the original KB that Microsoft published.

1. Download the code from http://create.msdn.com/en-US/education/catalog/sample/sprite_sheet
2. Extract it.
3. To reuse this code in your own game, add the SpriteSheetPipeline and SpriteSheetRuntime projects to your solution.

A. To make the pipeline project available for building your content

1. Right-click the Content | References item in your content project.
2. Click Add Reference.
3. Click the Projects tab, and then select the SpriteSheetPipeline project.

B. To make the SpriteSheet class available to your game

1. Right-click the References item in your main game project.
2. Click Add Reference.
3. Click the Projects tab, and select the SpriteSheetRuntime project

Now to actually use the Code which we imported we first will create new xml file and put in the content directory, the format of the XML should be like this:

<?xml version="1.0" encoding="utf-8" ?>
<XnaContent>
  <Asset Type ="System.String[]">
         <Item>L01_480_0.png</Item>
         <Item>L01_480_1.png</Item>
         <Item>L01_480_2.png</Item>
         <Item>L01_480_3.png</Item>
         <Item>L01_480_4.png</Item>
         <Item>L01_480_5.png</Item>
         <Item>L01_480_6.png</Item>
         <Item>L01_480_7.png</Item>
         <Item>L01_480_8.png</Item>
         <Item>L01_480_9.png</Item>
         <Item>L01_480_10.png</Item>
         <Item>L01_480_11.png</Item>
         <Item>L01_480_12.png</Item>
  </Asset>
</XnaContent>

As you can see this xml contain the names of the images that we will create SpriteSheet(atlas) from, there is NO need to add these sprites images to your project via visual studio just copy the images to the physical content directory, and of course it is require that you will add the XML file via visual studio to the Content folder Project (This is not the main project so be aware of it) Now to actually use the XML file you need to do few things. We need to set the property of the xml file. Content Importer will be XML Content - XNA Framework Content Processor will be SpriteSheetProcessor After we set the proprty we can actually call the file. First we will tell our code to use the SpriteSheetRuntime

So we will add

using SpriteSheetRuntime;

We will declare new spritebatch and spritesheet object

namespace SpriteSheetGame
    {

      /// This is the main type for your game

      public class Game: Microsoft.Xna.Framework.Game
      {
       /* Handles the configuration and management of the graphics device.*/

        GraphicsDeviceManager graphics;

     /* Enables a group of sprites to be
        drawn using the same settings */

        SpriteBatch spriteBatch;

     /* A sprite sheet contains many individual sprite images, packed into different
        areas of a single larger texture, along with information describing where in
        that texture each sprite is located */

         SpriteSheet spriteSheet;
       }

In the load content we will do the following:

       protected override void LoadContent()
        {
          spriteBatch = new SpriteBatch(GraphicsDevice);
          spriteSheet = Content.Load<SpriteSheet>("SpriteSheet");
        }

The XML file in this case will be SpriteSheet.xml like the exaple above. Now we need to display the sprites either by animated them or show all of them at once.. So we will use the following spriteBatch.Draw, but before that we will start the spriteBatch

protected override void Draw(GameTime gameTime)
{
    spriteBatch.Begin();

if you will look at the class (SpriteBatch) you will find few options to draw on to the screen, you can choose the most suitable for you:

public void Draw(Texture2D texture, Vector2 position, Color color);

public void Draw(Texture2D texture, Rectangle destinationRectangle, Rectangle? sourceRectangle, Color color);

public void Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color);

public void Draw(Texture2D texture, Rectangle destinationRectangle, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, SpriteEffects effects, float layerDepth);

public void Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth);

public void Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, Vector2 scale, SpriteEffects effects, float layerDepth);

So eventually we can write something like that:

protected override void Draw(GameTime gameTime)
{
    spriteBatch.Begin();




// Draw an animating effect, by rapidly cycling
      // through 13 slightly different sprite images.

      const int animationFramesPerSecond = 2;
      const int animationFrameCount = 13;

      // Look up the index of the first sprite.

      int index = spriteSheet.GetIndex("L01_480_0");

      // Modify the index to select the current frame of the animation.

      index += (int)(time * animationFramesPerSecond) % animationFrameCount;

      // Draw the current sprite.

       spriteBatch.Draw(spriteSheet.Texture, new Rectangle(0, 0, 100, 100),
                       spriteSheet.SourceRectangle(index), Color.White);

      spriteBatch.End();
            base.Draw(gameTime);
}