Lost? View the previous section: How to Rotate Sprites in XNA Game Studio Express

Theory and Prerequisites to Animating a Sprite Sheet in XNA Game Studio Express

So what is a sprite sheet, anyways? Sprite sheets are images that consist of multiple images. This single image is used to animate all sorts of things in games. In our example, we will be using one single image to animate 15 different frames of animation.

The image in question can be seen (and downloaded) below.

You might have noticed that each image is evenly spaced from one image to the next. If we were to measure each individual image, we would find that each image is 50 pixels in width. If we know how many pixels each frame is, we can make a loop to scroll through each image- one at a time!

What is going to happen, specifically, is we will be moving a rectangle along the entire image. Only the part of the image that appears in the rectangle will be drawn on the screen. This allows us to scroll through a bunch of images for animation in a nifty little way.

How to Animate Sprites with Sprite Sheets in XNA Game Studio Express

If you don’t have the latest source code, you can get it here. Be sure you also have the SpriteSheet.jpg image shown above, and upload it to the XNA Content Pipeline like we have done with our sprites in previous sections.

Directly below the Game1 class, we need to add a variable for our sprite sheet. The code below will do just that.

Declaring The Texture Variable for The Sprite Sheet

        //Load Character Texture      *XNAGameDev.com
        protected Texture2D texture_mcharacter = null;
        protected Texture2D texture_shuriken = null;
        protected Texture2D texture_spritesheet = null;

With our new variable, texture_spritesheet, in place we can load the sprite into memory in our LoadGraphicsContent method.

Loading a Sprite Sheet into Memory with XNA Game Studio Express

                // load our textures
                texture_mcharacter = content.Load<Texture2D>(”sprite1_transp”);
                texture_shuriken = content.Load<Texture2D>(”sprite_shuriken”);
                texture_spritesheet  = content.Load<Texture2D>(“SpriteSheet”);

Now the real fun begins! We’ll have to go through our Update method and ensure that the proper logic is created to scroll through our SpriteSheet.jpg image. Before we do so, we have eight new variables to declare just above the Update method.

Necessary Variables for Sprite Sheet Animation in XNA Game Studio Express

        float Timer = 0f;
        float Interval = 1000f / 10f;
        int FrameCount = 15;
        int CurrentFrame = 0;
        int SpriteWidth = 50;
        int SpriteHeight = 93;
        Rectangle SourceRect;
        Rectangle DestRect;
        private float RotationAngle = 0f;
        private Vector2 rotation_point;
        protected Rectangle ScaleSprite;
        protected double ScaleValueX = 161;
        protected double ScaleValueY = 266;
        protected bool ScaleIncrement = true;

Our new timer variable will be keeping time in milliseconds, so we can’t use the timer from the last section. The interval, which is the time in between frame changes, is set at 10 frames per second. Our FrameCount holds the number of frames we have, and the next to variables hold the size of each image within the sprite sheet. Lastly, we have the SourceRect and DestRect, which are used to keep track of one rectangle to another.

As for the actual logic, we can see how to animate a sprite sheet with the below code in the Update method.

IF Logic for Sprite Sheet Animation in XNA Game Studio Express

            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();
 
            // TODO: Add your update logic here
 
            // Sprite sheet logic
            Timer += (float)gameTime.ElapsedGameTime.TotalMilliseconds;
            if (Timer > Interval)
            {
             CurrentFrame++;
            if (CurrentFrame > FrameCount - 1)
             {
               CurrentFrame = 0;
             }
             Timer = 0f;
            }
            SourceRect = new Rectangle(CurrentFrame * SpriteWidth, 0, SpriteWidth, SpriteHeight);
            DestRect = new Rectangle(400, 400, 50, 93);

It’s a lot to take in at first, but rest assured, the logic is easy to understand. The first IF statement simply checks to see if the Timer is greater than the Interval- if it is, then it’s time for a new frame! The next IF statement checks to see if the CurrentFrame is larger than 15- if it is, than we reached the end of the image and need to restart! Finally, we set the Timer to 0 when this does indeed happen.

We update our SourceRect and DestRect immediately following this code. The SourceRect has a variable X value, meaning it changes based on time. The DestRect is actually static- meaning it doesn’t ever change. (This is where we draw the sprite on the screen.)

All that we need to do now is draw the sprite to screen! In our Draw method, let’s add a new item for our Sprite Batch to create.

Using The Draw Method to Animate Sprite Sheets in XNA Game Studio Express

            s_batch.Draw(texture_mcharacter, loc3, OpacityValue);
            s_batch.Draw(texture_mcharacter, loc4, tint);
            s_batch.Draw(texture_shuriken, loc5,null, Color.White, RotationAngle, rotation_point, SpriteEffects.None, 0);
            s_batch.Draw(texture_spritesheet, DestRect, SourceRect, Color.White);
            
            s_batch.End();

We should be familiar with how to draw a sprite to screen by now, but we are including a new variable we haven’t worked with before: the DestRect. This value is responsible for sectioning off the image into one rectangle. In this instance, we use this feature to section off a series of rectangles to make the illusion of animation.

If all went well, you should have a very energetic Ryu throwing a heavy hit in a very smooth animation.

More Fun with Sprite Sheets and XNA Game Studio Express

As for a little fun, we can play with the timer and size options for a little amusement. Try out the following code found just above the Update method. (The 10f is changed to a 100f)

Increasing Interval for Sprite Sheets in XNA Game Studio Express

        float Interval = 1000f / 100f;

Instead of Ryu the amazing fighter, we now have a DDR master. Now revert your changes and try the following code.

Increasing Sprite Width for the Sprite Sheet in XNA Game Studio Express

        float Interval = 1000f / 10f;
        int FrameCount = 15;
        int CurrentFrame = 0;
        int SpriteWidth = 60;
        int SpriteHeight = 93;

All we changed was the SpriteWidth. Notice how Ryu actually has an appearance of moving now! Since our width doesn’t fit the image rectangle right, it shows part of the next image. This gives the illusion of Ryu moving.

In the next section we will be taking a look at depth. When you select a character in some fighting games, there are nifty little animations present. But we’ll take it a step further and implement what we’ve learned so far to create a rather impressive character select screen! (And we’ll be using a new project next section- so you can keep the finished code thus far in a safe place for future reference)

Lost? View the previous section: How to Set Opacity and Scale Sprites in XNA Game Studio Express

How to Rotate a Sprite in XNA Game Studio Express

If a ninja throws a shuriken, the shuriken should rotate in flight for realistic effect. (And if you are somehow fortunate to enough to have a shuriken implant for a hand- it should be rotating at all times for best use.) Below is a shuriken sprite in the PNG format, which allows for transparency. Go ahead and download it now.

Add the above image, named shuriken_sprite, to the content pipeline in XNA Game Studio Express. Before we get any further, make sure you have the latest update to our source code, which can be found here.

We’ll start out by declaring our new sprite right after the Game1 class in our XNA code. Look at the following code to see what we added.

Declaring The Texture Variable in XNA Game Studio Express

    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        ContentManager content;
 
        //Make Our Sprite Batch      *XNAGameDev.com
        protected SpriteBatch s_batch = null;
 
        //Load Character Texture      *XNAGameDev.com
        protected Texture2D texture_mcharacter = null;
        protected Texture2D texture_shuriken = null;

The texture_shuriken texture will be used to assign the sprite we just uploaded to our XNA Content Pipeline to a variable. Since we already uploaded the sprite to the Content Pipeline, we can continue to make a reference to it within the LoadGraphicsContent method as seen below.

Loading a Sprite into Memory with XNA Game Studio Express

        protected override void LoadGraphicsContent(bool loadAllContent)
        {
            if (loadAllContent)
            {
                // TODO: Load any ResourceManagementMode.Automatic content
                // initialize our sprite batch
                s_batch = new SpriteBatch(graphics.GraphicsDevice);
 
                // load our textures
                texture_mcharacter = content.Load<Texture2D>(”sprite1_transp”);
                texture_shuriken = content.Load<Texture2D>(“sprite_shuriken”);

You’ll notice that all we added was a reference to the sprite_shuriken sprite- nothing else. Now we need to work with the XNA Update method to actually move the sprite. To accomplish this, we will move the sprite based on a timer that ticks every time the Update method is called. Before we get started, however, we need to declare two new variables above our Update method to help us out.

Rotation Variables in XNA Game Studio Express

private float RotationAngle = 0f;
private Vector2 rotation_point;
protected Rectangle ScaleSprite;
protected double ScaleValueX = 161;
protected double ScaleValueY = 266;

Next, let’s put in our code to calculate the angle and rotation. We placed it in front of our previous tinting code for easier reading.

Rotation Logic Code in XNA Game Studio Express

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
 
            // elapsed time
            float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;
 
            //rotation
            RotationAngle += elapsed;
            float circle = MathHelper.Pi * 2;
            RotationAngle = RotationAngle % circle;
            rotation_point.X = texture_shuriken.Width / 2;
            rotation_point.Y = texture_shuriken.Height / 2;

The elapsed variable obtains the necessary assignment to count the amount of seconds that have elapsed in our game. In our //rotation code, we increment the RotationAngle by the elapsed time each tick. We then use a little geometry math to put the number into a corresponding angle. Finally, the roation_point variable stores the center point of the sprite- which will be our point of rotation.

Lastly, we need to actually draw our sprite to the screen. We achieve this by declaring a new rectangle and then using our Sprite Batch to output the results to the screen.

Drawing The Rotating Sprite to The Screen in XNA Game Studio Express

// TODO: Add your drawing code here
            s_batch.Begin();
            Vector2 loc = new Vector2(50, 50);
            Vector2 loc2 = new Vector2(200, 50);
            Vector2 loc3 = new Vector2(350, 50);
            Vector2 loc4 = new Vector2(500, 50);
            Rectangle loc5 = new Rectangle(195, 133, 50,49);
            s_batch.Draw(texture_mcharacter, loc, Color.White);
            s_batch.Draw(texture_mcharacter, ScaleSprite, null, Color.White, 0, rot, SpriteEffects.None,0);
            s_batch.Draw(texture_mcharacter, loc3, OpacityValue);
            s_batch.Draw(texture_mcharacter, loc4, tint);
            s_batch.Draw(texture_shuriken, loc5,null, Color.White, RotationAngle, rotation_point, SpriteEffects.None, 0);
            s_batch.End();

The rectangle, loc5, is put at the location of (195, 133)- which just so happens to be Ryu’s hand. The actual size of the sprite is the following numbers, (50, 49). Further down we use our Sprite Batch to draw the texture, specify the location, and then pass the RotationAngle and rotation_point variables. We now have a working rotated sprite- which coincidentally serves as Ryu’s frightening shuriken hand.

Ok, so it isn’t exactly frightening. But you have to admit, the smooth rotation the shuriken follows is mesmerizing. Beautiful, in fact!

If we were deadset on creating a killer buzzsaw for an arm, we could definitely do so. But we can focus on specifics down the road- in the next section we will be learning how to animate a sprite using what is called a sprite sheet. This uses a frame-by-frame animation that is actually only one image file! Specifically, we will be using a sprite sheet to create a fully animated (and devastating) attack for Ryu. (As if a shuriken hand wasn’t enough!)

Lost? View the previous section: How to Tint Sprites in XNA Game Studio Express

How to Set Opacity with Sprites in XNA Game Studio Express

First, make sure you have the latest version of our code that can be found here. You’ll find that we have already dabbled with tint, which is actually related to opacity settings. If you remember correctly, the opacity setting can be set within the Color value we created. (The last number in the example below; found in the Update method)

The Alpha (Opacity) Value in XNA Game Studio Express

tint = new Color(255, Convert.ToByte(GreenBlueValue), Convert.ToByte(GreenBlueValue), 100);
 
 
base.Update(gameTime);
}

In the above example we are setting the tint of the sprite that we used in the last section with the GreenBlueValue variable. Take note that our last number, 100, is our opacity value (actually called alpha). We’ll be making the third sprite in our example oscillate from opaque to transparent- all without adding more logic code!

Let’s add another declaration to the mix, called OpacityValue, directly above the Update method. We will also add a new line below the tint assignment statement- where we will configure our opacity values.

Implementing Dynamic Opacity Values in XNA Game Studio Express

protected Color OpacityValue;
protected Color tint;
protected int GreenBlueValue = 255;
protected bool IncrementCount = false;
protected override void Update(GameTime gameTime)
{
   // Allows the game to exit
Now for the opacity configuration, near the bottom of the Update method:
            tint = new Color(255, Convert.ToByte(GreenBlueValue), Convert.ToByte(GreenBlueValue), 100);
            OpacityValue = new Color(255, 255, 255, Convert.ToByte(GreenBlueValue));
 
 
            base.Update(gameTime);
        }

Notice that we set the RGB color values back to 255- this means there will be no tinting. Instead we only control the alpha value via our GreenBlueValue variable. Note that we are only reusing this variable- if we weren’t so lazy we could implement a counter for the opacity. For now, let’s continue reusing the GreenBlueValue for the sake of less work.

Lastly, we need to do one more thing: pass a reference to the OpacityValue in our Draw method. You can see our changes in the code below.

Passing The Opacity Value to the Draw Method

            s_batch.Draw(texture_mcharacter, loc3, OpacityValue);
            s_batch.Draw(texture_mcharacter, loc4, tint);
            s_batch.End();
 
            base.Draw(gameTime);
        }

Now we can run the project- go ahead and try it! If all went well, you should have an XNA project similar to the one below.

The third sprite now oscillates in opacity, and the fourth sprite oscillates in tint. Now we only have one more thing to cover: sizing the second sprite to make it appear as if he is breathing!

How to Scale a Sprite in XNA Game Studio Express

This time around we’ll be working with the second sprite. We will scale the X and Y coordinates of the image to make it appear as if our sprite Ryu is breathing (or at least has a bad case of ADD). To start out, let’s declare our variables before the Update method.

Declaring Variables for Scaling Our Sprite in XNA Game Studio Express

protected Rectangle ScaleSprite;
protected double ScaleValueX = 161;
protected double ScaleValueY = 266;
protected bool ScaleIncrement = true;
protected Color OpacityValue;
protected Color tint;
protected int GreenBlueValue = 255;
protected bool IncrementCount = false;
protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit

We have four new variables to work with. The first variable, ScaleSprite, is our rectangle that will replace loc2 as our location. Instead of just a location, this rectangle will define both X and Y values yet also width and height. (We will be using this in the Draw method later)

The ScaleValueX and ScaleValueY variables will be used to alter the height and width of the image. Notice that we predefine both variables as the image’s default width and height. We also have the ScaleIncrement variable that will let us switch between scaling up and scaling down. Look at the following logic code to get a better idea of how we’ll achieve the sprite scaling. (Place this code after the tint logic code)

Scaling Logic Assembled in IF Statements

//Logic to scale
            if (ScaleIncrement == true)
            {
                ScaleValueX += 0.04;
                ScaleValueY += 0.01;
            }
            else
            {
                ScaleValueX -= 0.04;
                ScaleValueY -= 0.01;
            }
            if (ScaleValueX > 162)
            {
                ScaleIncrement = false;
            }
            else if (ScaleValueX < 161)
            {
                ScaleIncrement = true;
            }

This setup is extremely similar to the tinting IF logic that we placed this code after. Only this time we are incrementing and decrementing two values at different paces. Since characters don’t usually gain height when they breathe, we leave the Y value less affected than the X value.

Now we can get back to the rectangle we mentioned earlier. We will be passing values to it below. Also notice that we tidied up the code before it so as to create a sense of organization.

Implementing Our Rectangle (And Organizing our Code!)

// Tint & Opacity Assignments
            tint = new Color(255, Convert.ToByte(GreenBlueValue), Convert.ToByte(GreenBlueValue), 100);
            OpacityValue = new Color(255, 255, 255, Convert.ToByte(GreenBlueValue));
 
// Scaling assignment
            ScaleSprite  = new Rectangle(200, 50, Convert.ToInt32(ScaleValueX) , Convert.ToInt32(ScaleValueY));

The rectangle works via (X value, Y value, Width, Height). Note that the width and height values have to be integers- so we use the conversion function to prevent errors while going from a double to an int. With our new location and size aspects in hand, we can go to the Draw method and get this beast started!

We need to add one declaration before the Draw method before we begin.

Setting The Point of Rotation in XNA Game Studio Express

Vector2 rot = new Vector2(0, 0);
        protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.White);

This new declaration is short for rotation. Right now, we haven’t dealt with rotating sprites, so don’t worry about it just yet. We only declare it now so that the compiler knows where the rotation should take place if we do intend on rotating the sprite (which we don’t- yet).

The following is what you should be part of your Draw method thus far.

The Completed Draw Method

s_batch.Draw(texture_mcharacter, loc, Color.White);
s_batch.Draw(texture_mcharacter, ScaleSprite , null, Color.White, 0, rot, SpriteEffects.None,0);
s_batch.Draw(texture_mcharacter, loc3, OpacityValue);
s_batch.Draw(texture_mcharacter, loc4, tint);

Take a particular note on the second line- this is the sprite we are affecting. It accepts values via “Sprite name, Rectangle (the one we created earlier!), an attribute that allows us to section our rectangle into pieces (leave it null to keep the full sprite), tint, rotation angle, point of rotation, sprite effects, and depth.”

Don’t worry if the arguments these functions take confuses you- we’ll get into this more in later sections. For now, just make sure that you understand the role of ScaleSprite in the operation. After you feel you are comfortable with the logic, run the game! You should be greeted by a living, breathing, game sprite aptly named Ryu.

If you can’t see much of a difference- it’s because we only scaled our sprite enough to see subtle breathing. For fun, try quickening the addition and subtraction rate. Also try taking out the maximum size aspect- and watch Ryu grow into Godzilla!

We aren’t exactly to the point where professional standards are met- but we’re getting close! We’ve already created a breathing sprite with just a few lines of code: Imagine what we can create in the coming sections!

By now we have four sprites that exhibit different traits. The plain Ryu, breathing Ryu, invisible Ryu, and heated Ryu. Next up: rotating a weapon sprite for Ryu to use!

Lost? View the previous section: How to Add a Sprite in XNA Game Studio Express

Prerequisites to Our XNA Tinting Tutorial

What if Ryu got bashed in the face with a baseball bat? Not just a tap- but a full on knockout! Our character is bound to get a little red in the face. We can tint Ryu with a little blush to show his pain (or anger) from the blow rather easily in XNA.

First you will need the source code from the previous section, which can be found here. Next, you will need to delete the sprite we used in the previous section. Remember how we said the sprite wasn’t transparent? Well if we tinted the sprite, whitespace would show! To counter this we need a transparent sprite- commonly saved in the PNG format as seen below. (Go ahead and download the following image!)

Once you have uploaded the new sprite to XNA via the Content Pipeline, we will need to change a reference to the old texture in our previous code. Find and replace the code below located in the LoadGraphicsContent method.

Syntax for Loading a Sprite in the XNA LoadGraphicsContent Method

// *Old Code!*      *XNAGameDev.com
texture_mcharacter = content.Load<Texture2D>(“sprite1″);

Simply replace sprite1 with the new filename, which should be sprite1_transp.

Now that we have our new transparent sprite, we need to draw more sprites onto the screen for testing. We will eventually be adding several effects to separate sprites- for now, let’s draw three more sprites with the following code. Look for additions to the following code found in the Draw method.

Drawing Multiple Sprites with Vector2 and Sprite Batch

// EDIT “loc” to have a location of (50,50)      *XNAGameDev.com
// ADD loc2, loc3, and loc4 declarations, add correct locations!
// ADD references to draw texture_mcharacter multiple times with s_batch.Draw
// TODO: Add your drawing code here
            s_batch.Begin();
 
            Vector2 loc = new Vector2(50, 50);
            Vector2 loc2 = new Vector2(200, 50);
            Vector2 loc3 = new Vector2(350, 50);
            Vector2 loc4 = new Vector2(500, 50);
 
            s_batch.Draw(texture_mcharacter, loc, Color.White);
            s_batch.Draw(texture_mcharacter, loc2, Color.White);
            s_batch.Draw(texture_mcharacter, loc3, Color.White);
            s_batch.Draw(texture_mcharacter, loc4, Color.White);
 
            s_batch.End();

When you run the new project, you will see multiple sprites drawn onto the screen as seen in the example below.

So far, it’s been rather easy. Just a few edits here and there. Now let’s look at an example of dynamically tinting a sprite in XNA!

How to Tint a Sprite in XNA Game Studio Express

Believe it or not, you already have experience with tinting sprites- you just didn’t know it! Remember when we viewed the following code in the Draw method:

An Example of Tint in XNA’s Draw Method

// OLD code- just an example!    *XNAGameDev.com
s_batch.Begin();

Vector2 loc = new Vector2(100, 100);

s_batch.Draw(texture_mcharacter, loc, Color.White);
s_batch.End();

The Color.White attribute is our tint! All we have to do is modify it to get the tint we need. Before we do anything, however, let’s modify our Update method so we can update the tint dynamically. The following declarations should be added above the Update method, as seen in the first three lines in the below example.

Necessary Declarations for Tinting in XNA Game Studio Express

protected Color tint;
protected int GreenBlueValue = 255;
protected bool IncrementCount = false;

 
protected override void Update(GameTime gameTime)

{

    // Allows the game to exit
     if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

         this.Exit();

The protected Color tint; is what we will be using to pass the tint value to our Draw method. For now, we can forget about it.

The protected int GreenBlueValue = 255; line is what we will use to decrement the hexadecimal value of green and blue colors. (If you aren’t familiar with the RGB color system, it’s simple- three numbers ranged from 0 to 255 make up red, green, and blue colors.If we have 255 in every slot, we have the color white- which means no tint at all. So if we start out with white and decrement the blue and green numbers, we can fade to a red tint!)

Lastly, we have the protected bool IncrementCount = false; line. This line will act for our IF statement. If our tint gets too red, we will fade back to white. If we reach white again, we need to start the red tint again! This boolean value will allow us to do just that with an IF statement.

Below we show the rest of our Update method code; take a look!

IF Statement Logic for Program Flow in XNA Game Studio Express

// TODO: Add your update logic here
//logic to tint      *XNAGameDev.com
            if (IncrementCount == true)

            {
                GreenBlueValue += 2;
            }

            else
            {
                GreenBlueValue -= 2;
            }

            if (GreenBlueValue == 255)
            {
                IncrementCount = false;
            }
            else if (GreenBlueValue == 101)
            {
                IncrementCount = true;
            }

 
            tint = new Color(255, Convert.ToByte(GreenBlueValue), Convert.ToByte(GreenBlueValue), 100);

 
            base.Update(gameTime);

First, we’ll start with the IF statement. The logic is fairly simplistic- if IncrementCount is true, then we need to start adding green and blue values to the tint. Otherwise, we need to add a redder tint by decrementing the green and blue values.

Following the first IF statement is another IF statement that acts as a switch. If our values reach a certain maximum or minimum, we switch the direction of our color change. (If we reach the fully white tint of 255, we decrement. If we reach the fully red tint of 101, we switch the variable to increment)

tint = new Color(255, Convert.ToByte(BlueGreenValue), Convert.ToByte(BlueGreenValue), 100); is what we use to store our tint value. Note that in its original form, the tint would be in the format of an RGB color such as new Color(255, 255, 255, 100); - whereas the first three values are our red, green, and blue colors respectively. The last number, 100, is our transparency value. Obviously, we should keep this at 100 since we only want to tint. The Convert.ToByte(BlueGreenValue) line is what we call a type conversion. Our BlueGreenValue is an integer- not a byte. But the Color function accepts the byte, not the integer! To do this, we simply use the Convert.ToByte function, and pass our BlueGreenValue to it.

We only need to do one more thing: pass our new tint value to the Draw method. This can be done with the following modification to our Draw method (be sure to edit the last texture_mcharacter):

Using Our Tint Variable in the Draw Method of XNA Game Studio Express

s_batch.Draw(texture_mcharacter, loc4, tint);

Notice that instead of a color, we simply pass the tint variable. Now run your program- you should have a very pissed Ryu fading in and out of anger! (Note that the following image is an example of the tint. Only the fourth Ryu should be showing a tint as of now.The other three sprites will be used in the next section!)

Although sprites commonly appear 3D, they are actually 2D images- which have led some of them to be cleverly referred to as 2.5D. Sprites are essentially the basis of all 2D games; and make up particle systems, text, and heads-up displays in 3D games. Since the sprite is the building block of most games, what better place is there to start learning XNA Game Studio Express?

Lost? View the previous section: Getting Started with Making Games in XNA Game Studio Express

How Sprites Function within XNA Game Studio Express

There are three basic terms associated with sprites XNA: textures, the sprite itself, and the Sprite Batch.

A texture and sprite are very similar in definition. A texture is a digital image that remains in-memory, and is represented by an array of colored pixels. This is just a lot of fancy wording for something as simple as a wood texture you may use to make a rectangle look like a board.

Sprites are two-dimensional images that can act as textures, but normally have a certain purpose in the game. You will see sprites commonly used for characters, objects (such as trees), enemies, or even tools such as weapons.

The Sprite Batch is a class that draws ours sprites onto the screen. This class can work with groups of sprites while applying the same settings to all of them. This class is necessary to get the sprite onto the screen- so we’ll review this in more detail further on.

Before we get any further into creating and animating our own sprite, let’s do a little review on the XNAGame Studio Express interface and syntax.

Finding Your Way around XNA Game Studio Express

Now that we have the theory (hopefully) in memory, we can move onto opening XNA Game Studio Express. You will want to start a new Windows Game project by selecting File and then New Project. You should see a screen similar to the one below.

You can name the project whatever you would like, but make sure that you select Windows Game. Also make note of where you store the project. By default, this will be the Projects folder in Visual Studio 2005.

You’ll see a code template filled with vibrant green and blue colors. This template is necessary for game operation, so do not erase anything unless you know what you are doing. While we won’t dwell on the specifics of what each code block does at this point, a few things should be noted.

First, the green text is what is called a comment. Comments are not parsed by the game engine- they are only for the developer to make references and reminders in the code. Comments in XNA Game Studio Express are created with two backslashes (“//”). Multi-line comments can be made starting with /* and ending with */.

Comment Syntax in XNA Game Studio Express

        // This is my very own comment!
 
        /* this is
         * a longer
         * comment! */

Also note that XNA Game Studio Express uses blue and other colored texts for certain commands. This is merely to help organize data- there is no other significance of this color coding. You will notice that classes, for instance, are dark blue- while other structures are lighter blue.

An Example of Code Highlighting

public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            content = new ContentManager(Services);
        }

Before we get to the sprite aspects of XNA, we need to learn one more thing: how the four basic methods that XNA created for us actually work!

How Do The Methods in XNA Game Studio Express Work?

There are four methods that were created for us: LoadGraphicsContent, Update, Draw, and UnloadGraphicsContent. These four methods act as the heartbeat of an XNA game- so be prepared to memorize what they do and how.

LoadGraphicsContent is a method that is somewhat explanatory. Any images or other media files that you upload via the Content Pipeline will be called to here. This will load the media into memory, making it ready for use in the game you have created. Below is an example of calling to a media file (something we will actually learn further on).

An Example of The XNA LoadGraphicsContent Method

protected override void LoadGraphicsContent(bool loadAllContent)
        {
            if (loadAllContent)
            {
                // TODO: Load any ResourceManagementMode.Automatic content
 
                //Load Sprite Batch    *XNAGameDev.com
                spriteBatch = new SpriteBatch(this.graphics.GraphicsDevice);
 
                //Load The Image      *XNAGameDev.com
                MainCharacter = contentLoader.Load<Texture2D>(“Sprites\\Main_Character”) as Texture2D;
            }
 
            // TODO: Load any ResourceManagementMode.Manual content

Note the above example will not work until we learn more about sprites- but you get the general idea how sprites and textures are loaded via the LoadGraphicsContent method! Simply replace the Sprites\\Main_character with the image filename you have, and voila; you have successfully referenced your sprite!

The Update method is where most of the action takes place. This is where the “game loop” as it is called operates. If you have an objects that need to be updated (check to see if a key was pressed, for instance) they will have to be referenced here. This method updates once every frame- before the graphics are drawn to the screen. Below is an example of how we find out if a key was pressed or not (something we will not cover until later- but it’s good to see the power of XNA!).

An Example of The XNA Update Method

        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
            //If the UP key is pressed, move the player up!      *XNAGameDev.com
            if (ksKeyboardState.IsKeyDown(Keys.Up))
            {
                Move_Player_Up = true;
            }

The Draw method is for the process of drawing the graphics onto the screen. With every single frame, the screen is redrawn from the bottom up. In the below example, we see how we might call to several different functions to draw multiple sprites with the same Sprite Batch.

An Example of The XNA Draw Method

protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
 
            // TODO: Add your drawing code here
            spriteBatch.Begin()
            DrawPlayer(spriteBatch);
            DrawBackground(spriteBatch);
            DrawEnemies(spriteBatch);
            spriteBatch.End()
 
            base.Draw(gameTime);
        }

Lastly, we need to unload any resources we have with UnloadGraphicsContent. This method will free up resources for us, so it’s important to unload any graphics you create. In most cases you could simply dispose of the Content Manager itself. If you manually managed resources (which we won’t be doing in our example) you will need to unload them separately. Below you can see how simple it is to unload everything by disposing of the Content Manager with content.Unload();.

An Example of The XNA UnloadGraphicsContent Method

protected override void UnloadGraphicsContent(bool unloadAllContent)
        {
            if (unloadAllContent)
            {
                // TODO: Unload any ResourceManagementMode.Automatic content
                content.Unload();
            }
 
            // TODO: Unload any ResourceManagementMode.Manual content
        }

If you’re eager to get to the sprite animation, don’t worry- it’s coming up next!

How to Add a Sprite in XNA Game Studio Express

First you will want to create a new project- we called ours WindowsGame3. The first thing we should do is declare our Sprite Batch and texture. Look at the following code; we place the new lines directly after the class declaration for WindowsGame3.

Declaring Sprite Batch and The Texture Variable

//Make Our Sprite Batch      *XNAGameDev.com
        protected SpriteBatch s_batch = null;
 
        //Load Character Texture      *XNAGameDev.com
        protected Texture2D texture_mcharacter = null;

It’s usually a good idea to assign objects to the state of null, since we want to make sure we know what the object is holding. (In some cases, the absence of null may fill a variable with garbage that could crash our game.) And in case you are wondering what our texture_mcharacter is, we are using a certain JPG image that you may remember form videogame past. You may download the image pictured below and use it in your own project.

To add the handsomely ripped Ryu to your project, simply go to Project and choose Add Existing Item.

In the screen that comes up, find the image you want to use for the sprite animation. Be sure to select “All Files,” “Content Pipeline Files,” or “Image Files” for the file type, or you may not see the image in the file view. To avoid complications, make sure that your sprite file is named Sprite1- this is the name we use in our example.

Now that we have our declarations and image files in place, we need to reference the image files within the LoadGraphicsContent method.

Loading The Sprite Into The XNA Content Pipeline

protected override void LoadGraphicsContent(bool loadAllContent)
        {
            if (loadAllContent)
            {
                //Initialize Sprite Batch     *XNAGameDev.com
                m_batch = new SpriteBatch(graphics.GraphicsDevice);
 
                //Load Textures      *XNAGameDev.com
                texture_mcharacter = content.Load<Texture2D>(@”sprite1″);
            }
 
            // TODO: Load any ResourceManagementMode.Manual content

}

The above method is rather simple. Just replace sprite1 with the media you uploaded via the Content Pipeline, and it’ll be loaded for further use! Next we should draw the sprite to the screen with the Draw method. The following code will do just that.

Using The XNA Draw Method to Output The Sprite To The Screen

protected override void Draw(GameTime gameTime)
        {
            graphics.GraphicsDevice.Clear(Color.White);
 
            // TODO: Add your drawing code here
            s_batch.Begin();
            Vector2 loc = new Vector2(100, 100);
            s_batch.Draw(texture_mcharacter, loc, Color.White);
            s_batch.End();
 
            base.Draw(gameTime);
        }

The above code is rather simple once you get the hang of things. We have to begin the Sprite Batch, define the location, draw the sprite, and then end the Sprite Batch. In our example we drew the sprite at the location (100, 100)- you can use anything you’d like. Be sure to call the s_batch.end(); - try running the program without it and see what happens. (The error is confusing at first, but easily explained. Since each frame forces the Draw method to be called, the s_batch would begin more than once without an end- and that will result in an error!)

Notice that the graphics.GraphicsDevice.Clear(Color.White); line was changed from the default blue color. If we had kept the blue color, the whitespace in our image would show (and it isn’t pretty). In the future, we could use transparency to make the image look great on all backgrounds- but we will save that for a later day!

If all has gone well at this point, you should see something like the window below.

It couldn’t be more boring could it? Our rugged little fighter Ryu can’t punch, move, talk, or even blink! There is no environment, physics, lighting, or anything at all. But what we did accomplish is grasp the concept of a sprite.

So where do we go from here? We can add tint, transparency, animate, scale, and add all sorts of effects to the sprite. We could give the player the ability to move the character- and even make it jump!

All this (and more!) will be forthcoming in future sections.

But Microsoft tore the wall down with the release of XNA Game Studio Express- simply referred to as XNA. This framework allows hopeful game developers to create video games in a simple environment, which requires much less time or effort as compared to conventional means.

Although Microsoft graced the game development community with XNA, there is still a learning curve present. Don’t expect to create the next Half Life 2 in a few days. Do, however, expect to get on the right track to releasing the next killer game for the PC or Xbox with a little determination and hard work.

What Is XNA Game Studio Express?

In case you were wondering, XNA doesn’t stand for anything cool. In fact, it doesn’t stand for anything at all! So what kind of power can a tool that doesn’t have any substance to its name have, anyway?

XNA Game Studio Express is a combination of tools that allows developers, students, and hobbyists to create games with relative ease. Although you won’t need to know the specifics about each tool, it’ll help aid in the development process and your general knowledge of how things work. The basic tools and components that XNA is composed of or interacts with are listed below. (Don’t worry if these seem intimidating- we’ll focus on some components more in future sections!)

Basic Tools and Components XNA is Composed of or Interacts With

• XNA Framework – The XNA framework is a bundle of libraries used for development. It functions via an application program interface- or API. This API allows games to be ported to and from Windows machines and the Xbox 360 console. The API also handles DirectX and the .NET platform- two tools used for general programming and multimedia programming.
• XNA Framework Content Pipeline – The “Content Pipeline,” as it is commonly called, is a set of tools that helps reduce the learning curve associated with game development programming. It streamlines many actions related to getting the content into the actual game. (For instance- you can add an image file to a game with a simple upload and code reference. Then the Content Pipeline automatically converts the file into a usable entity!)
• Microsoft Visual C# Express – Microsoft Visual C# Express is a toolset that allows programmers to create and manage programs with relative ease. In many aspects, this is just like XNA Game Studio Express, with the emphasis on general programming rather than game development. XNA Game Studio Express actually uses this program to operate- so be sure to brush up on your C# skills!
• DirectX – DirectX is a set of APIs that were created to work with multimedia development. The reason why XNA Game Studio Express is preferred by beginners is because DirectX can be very tough- it has a very steep learning curve. Thankfully, we won’t have to work directly with DirectX to make a game- which makes the development process much speedier.

What Kind of Games Can I Create With XNA Game Studio Express?

This is the million dollar question: how far can you take the XNA Game Studio Express? You wouldn’t want to waste your time learning a language and development scheme, just to realize you can’t make the game you had in mind- would you?

As you can see from the above example, there isn’t much limit with XNA. We can create 2D, 2.5D, and some very stunning 3D environments. Given, it would probably be impractical to create Halo 3 with XNA Game Studio- but don’t let that discourage you in the least bit.

We are only seeing the very beginning of what’s to come. XNA Game Studio Express is still fairly new to the game development community- we’re still eagerly awaiting those “No way you made that with XNA!” games that converts every last developer to the XNA cause. (Not that those games don’t already exist- we just want more of them!)

Software Requirements for Developing XNA Game Studio Games

Sadly, you won’t be up and running with a simple download. Instead, Microsoft thought it’d be fun to make developers go through several separate download and installation processes. But first thing is first: let’s make sure your computer can run the software before downloading anything!

Minimum Requirements for Creating XNA Game Studio Games

• Windows XP (With Service Pack 2) or Windows Vista
• 1 GHz CPU or higher is recommended
• 256MB RAM is recommended
• At least 500MB free space- over 1GB is recommended

Requirements for Playing XNA Game Studio Games

• Graphics card that supports DirectX 9.0c Shader model (Model 2.0 recommended)
• Sound card that supports DirectX 9.0c
• If you would like to develop games for the Xbox, a control is necessary

Installing the Necessary Software for XNA

Before continuing, be sure that any previous versions or betas of the software you are about to download are removed from your computer. Otherwise, the versions may conflict with each other and you’ll have a mess on your hands. The download process can be followed as seen below.

1. Download Visual C# 2005 Express Edition – (Be sure to select C#, not C++)