A Better Animated Sprite
Note: This tutorial series has been updated for XNA 4.0 In reality, the only thing that needed to be changed for 4.0 is the removal of the parameter from SpriteBatch.Begin() as alpha blending is now the default and the parameter order for the call has changed in XNA 4.0
In the Star Defense tutorial series, we created a simple AnimatedSprite class, which worked well for our purposes in that particular game, but it could be vastly improved upon to be made more useful in general. That will be the subject of this tutorial.
Lets start by looking at what the AnimatedSprite class from Star Defense allowed us to do:
- Create a sprite with a looping animation of a developer-determined number of frames on a single line in our sprite sheet
- Position the sprite on the screen and move it around
- Set timing information for the frames in the sprite
All pretty basic. In the Star Defense series we expanded upon these capabilities by adding more detail to the higher level classes that represented the player, enemies, bullets, and the like. Often, however, a lot of this work was duplicated between the different higher level classes and could have been handled by the sprite class itself. While we will do some of that generalization here, we will also be adding some additional features as well, such as:
- Multiple animations defined for a single sprite, playable by setting the animation by name
- Sprite movement towards a target point at a specified speed
- Sprite "pathing" along a list of points
- Automatic sprite rotation based on movement
I also want to credit Nick Gravelyn's Tile Engine video series for the genesis of some of the ideas here as well. The excellent series can be viewed here : http://www.nickontech.com/archive/#tileengine
Lets start with the graphic we are going to use, as the layout will be important when we start creating frame animations. Below is a .PNG file I put together using Ari Feldman's "Spritelib GPL" graphics (great for an artwork-incapable developer like me to get something up and visible quickly). The SpriteLib GPL information page is here : http://www.flyingyogi.com/fun/spritelib.html
In this case, the graphic I'm using is the tank from the "TankBrigade.bmp" file. I took the 8 upward-facing frames of the animation, rotated them all to face right, and moved them to form a horizontal line of 8 frames of animation.
Using a little Photoshop wizardry (ok, ok... did I mention I can't draw) I made 7 more copies of the tanks and colorized the tank bodies with the Hue/Saturation tool. Finally, I removed the black background for transparency reasons and saved the file as a .PNG. The result is our 8x8 tank spreadsheet with oh-so-fashionable colors of the rainbow.
Second, we will show how to use the AnimatedSprite in a different way to make a 2D character that we can walk back and forth on the screen using the arrow keys. This graphic is from Game Poetry, which provided a few RPG graphics from a cancelled project free for community use. You can find the post here : http://www.gamepoetry.com/blog/2008/06/27/free-rpg-tilesheets/
In this case, I extracted the left and right sequences from the NPCFemale1.png file and put them into a 128x128 sheet. The sprites are aligned into a grid of 32x64 tiles, four for walking left and four for walking right.
Our Testing Project
To test out the sprite engine we will be working on, we'll need an XNA Game Studio 4.0 project. In the test project, we will create three different sprites:
- A tank that will follow a course of waypoints around the screen
- A tank that will chase the mouse cursor around
- A princess character that can walk left and right based on keyboard input
Fire up a new Windows Game project called Sprite Engine (All of the sprite code will work unchanged on the XBox and the Windows Phone platforms, but you will need to updated the control schemes to account for missing mice and keyboards, and the potential of having a touch panel).
In the secondary Content project (Sprite Engine Content), Textures folder and add MulticolorTanks.png and PrincessCharacter.png (the two images above) into it.
(Continued in Part 2...)