0.12 Xna0122-frame animation using a sprite sheet  (Page 2/12)

Listings

• Listing 1 . Beginning of the class named Game1.
• Listing 2 . The constructor for the Game1 class.
• Listing 3 . The overridden LoadContent method.
• Listing 4 . Beginning of the Update method.
• Listing 5 . Compute the location of the sprite to draw.
• Listing 6 . Adjust column and row counters.
• Listing 7 . Execute the pause sequence if it is time for it.
• Listing 8 . Adjust sprite position and frame rate.
• Listing 9 . Move the sprite image back and forth across the game window.
• Listing 10 . Beginning of the overridden Draw method.
• Listing 11 . Begin the drawing process.
• Listing 12 . Call the SpriteBatch.Draw method.
• Listing 13 . The end of the program.
• Listing 14 . Class Game1 from the project named XNA0122Proj.

General background information

Frame animation typically involves displaying a series of images one at a time in quick succession where each image is similar to but different from theone before it. For example, Figure 1 shows a series of images of a small dog running, jumping, stopping to answer nature's call, and then scratching theground as dogs are prone to do.

Figure 1 . Sprite sheet used to animate a dog.

A sprite sheet

The format that you see in Figure 1 is a small scale version of a format that is commonly known as a sprite sheet. If you Google "animation sprite sheet", youwill find hundreds and possibly thousands of examples of animation sprite sheets on the web.

Hundreds of sprite images

Many of the sprite sheets that you will find on the web will contain hundreds of individual images usually arranged is several groups. One group may haveseveral images that can be animated to create the illusion of a character running. Another group may have several images that can be animated to createthe illusion of the character engaging in a martial arts battle. Other groups can be animated to create the illusion of other activities.

There are two groups of sprite images in Figure 1 . The images in the top row can be animated to show the dog running, jumping, playing and generally havingfun.

The images in the bottom row can be animated to show the dog answering nature's call.

Frame animation

By displaying the individual images from a group sequentially with an appropriate time delay between images, you can create the illusion that thecharacter is engaging in some particular activity. When displayed in this manner, each image is often referred to as a frame. The overall process is oftenreferred to as frame animation.

Downloading the sprite sheet

If you would like to replicate my program using the same sprite sheet, you should be able to right-click on Figure 1 and save the image on your disk. Be sure to save it as an image file of type JPEG.

Preview

I will explain a program in this module that causes the dog to run back and forth across a small game window always facing in the correct direction asshown in Figure 2 . Figure 2 through Figure 5 show four random screen shots taken while the program was running.