IT tutorials
 
Mobile
 

Windows Phone 7 : Building 2D Games with the XNA Framework - AlienShooter Game Play (part 1) - Sprite Animation

5/22/2013 4:12:58 AM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
1. Sprite Animation

In this section we cover spite animation, which is the technique that brings a 2D game to life. Sprite Animation is a matter of showing frames or individual sprites at set intervals to give the illusion of motion, no different than flipping a drawing book that has pictures of a stick man running. Each picture is static, but when drawn in the correct order with the right position, the stick man appears animated when flipping through the images.

Project references to the SpriteSheetRuntime and SpriteSheetPipeline are added to the SpriteAnimation and SpriteAnimationContent projects respectively in order to take advantage of the automatic Sprite Sheet creation and easy sprite access via file name within the Sprite Sheet without having to remember coordinates or the math to track frames.

The Sprite Sheet is created from the AlienShooter textures. For the hero ship, we want to add rocket engine exhaust animations as well as for the missile. For the alien spaceship, a bit of glow is added underneath that shimmers and some tilt to the left and right is added to the ship. To create these effects I fired up Paint.NET and created 10 sprites for each object, varying, the patterns enough to make cartoonish flame for the hero ship and missile as well as the glow and tilt for the spaceship. Figure 1 shows the individually edited sprite files in the file system.

Figure 1. Individual sprite files

The files are added to the Sprite Sheet XML file as shown in Listing 1

Example 1. SpriteAnimationSpriteSheet.xml Content File
<?xml version="1.0" encoding="utf-8" ?>
<XnaContent>
  <Asset Type="System.String[]">
    <Item>Sprites/heroship0.tga</Item>
    <Item>Sprites/heroship1.tga</Item>
    <Item>Sprites/heroship2.tga</Item>
    <Item>Sprites/heroship3.tga</Item>
    <Item>Sprites/heroship4.tga</Item>
    <Item>Sprites/heroship5.tga</Item>

<Item>Sprites/heroship6.tga</Item>
    <Item>Sprites/heroship7.tga</Item>
    <Item>Sprites/heroship8.tga</Item>
    <Item>Sprites/heroship9.tga</Item>
    <Item>Sprites/spaceship0.tga</Item>
    <Item>Sprites/spaceship1.tga</Item>
    <Item>Sprites/spaceship2.tga</Item>
    <Item>Sprites/spaceship3.tga</Item>
    <Item>Sprites/spaceship4.tga</Item>
    <Item>Sprites/spaceship5.tga</Item>
    <Item>Sprites/spaceship6.tga</Item>
    <Item>Sprites/spaceship7.tga</Item>
    <Item>Sprites/spaceship8.tga</Item>
    <Item>Sprites/spaceship9.tga</Item>
    <Item>Sprites/missile0.tga</Item>
    <Item>Sprites/missile1.tga</Item>
    <Item>Sprites/missile2.tga</Item>
    <Item>Sprites/missile3.tga</Item>
    <Item>Sprites/missile4.tga</Item>
    <Item>Sprites/missile5.tga</Item>
    <Item>Sprites/missile6.tga</Item>
    <Item>Sprites/missile7.tga</Item>
    <Item>Sprites/missile8.tga</Item>
    <Item>Sprites/missile9.tga</Item>
  </Asset>
</XnaContent>

					  

The Content Processor is configured to SpriteSheetProcessor, which instructs the Content Pipeline to collect the individual files and mash them together into a single texture, as shown in Figure 2.

Figure 2. Generated textures

Personally, I would find it tedious to hand create a sprite texture, as shown in Figure 2 and prefer drawing individual images and letting the SpriteSheet sample code do the hard work for me. Once you see how easy it is to animate sprites using this method I think you will agree.

Drawing the frames so that it animates between the images is pretty straightforward. In the Game1 class for the SpriteAnimation sample, the following private fields are declared:

SpriteSheet SpriteAnimationSpriteSheet;
int spriteIndex = 0;
Rectangle screenRect;
TimeSpan timeToNextFrame = new TimeSpan();
TimeSpan frameTime = TimeSpan.FromMilliseconds(50d);

The spriteIndex variable is used to append a number from 0 to 9 to the sprite name of heroship, missile, and spaceship. Note in Figure 1 and Listing 1 how the sprite images are named. Incrementing spriteIndex steps over to the next sprite by name in Figure 2.

the timeToNextFrame field is used to sum elapsed time for the game. The frameTime field stores how often the spriteIndex should change over to the next frame. Here is the code from Game1.Update that performs this calculation:

protected override void Update(GameTime gameTime)
{
  // Allows the game to exit
  if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    this.Exit();

  // TODO: Add your update logic here
  // Add elapsed game time between calls to Update
  // Once enough time has passed, i.e. timeToNextFrame > frameTime
  //increment sprite index.
  timeToNextFrame += gameTime.ElapsedGameTime;
  if (timeToNextFrame > frameTime)
  {
    if (spriteIndex < 9)
      spriteIndex++;
    else spriteIndex = 0;
      frameElapsedTime = TimeSpan.FromMilliseconds(0d);  }
  base.Update(gameTime);
}

					  

Essentially, the frameTime variable is how long any given frame is displayed. If you want the frames to animate more slowly, increase the value of the frameTime variable, currently set to 50.

Drawing a frame is pretty straightforward as well. Here is the code to draw the center of the hero ship at the center of the screen:

spriteBatch.Draw(SpriteAnimationSpriteSheet.Texture,
  new Vector2((screenRect.Width / 3) -
          SpriteAnimationSpriteSheet.SourceRectangle("spaceship" + spriteIndex.ToString()).Width / 2,
       (screenRect.Height / 3) -
         SpriteAnimationSpriteSheet.SourceRectangle("spaceship" + spriteIndex.ToString()).Height / 2),
  SpriteAnimationSpriteSheet.SourceRectangle("spaceship" + spriteIndex.ToString()),
  Color.White);

					  

The previous code takes the entire sprite sheet and uses this parameter for the source rectangle to select which sprite to draw:

SpriteAnimationSpriteSheet.SourceRectangle("spaceship" + spriteIndex.ToString())

					  

You can only see the actual animation by running the code, but Figure 3 provides a snapshot.

Figure 3. Animated sprites

We copy over all of the heroship, alienship, and missile images and SpriteSheet XML file to the AlienShooterContent content project's Sprites folder so that we can leverage the assets we created in our primary game.

Now that you understand how to animate sprites, we can move forward and create a GameObject class that handles the animation logic, as well as other object state allowing the code to focus more on game play and let the GameObject class handle rendering and state management.

Remember from our ScreenManager coverage that the actual game functionality exists in the GameplayScreen class.

 
Others
 
- BlackBerry Bold 9700 and 9650 Series : Connect as a Tethered Modem (part 3) - Using Desktop Manager for Mac
- BlackBerry Bold 9700 and 9650 Series : Connect as a Tethered Modem (part 2) - Using Desktop Manager for Windows
- BlackBerry Bold 9700 and 9650 Series : Connect as a Tethered Modem (part 1) - Understanding the Options for Tethering
- Android 3 : Employing Basic Widgets - Fleeting Images, Fields of Green...or Other Colors
- Android 3 : Employing Basic Widgets - Assigning Labels
- Symbian OS : Security - Buckle
- Symbian OS : Security - Secure Agent
- iOS SDK : Application Settings - The Settings Bundle (part 4) - PSSliderSpecifier, PSChildPaneSpecifier
- iOS SDK : Application Settings - The Settings Bundle (part 3) - PSMultiValueSpecifier
- iOS SDK : Application Settings - The Settings Bundle (part 2) - Settings Field Types
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS