How to Rotate Sprites in XNA Game Studio Express

We’ve finally gotten to the stage where we can create a fully animated sprite in XNA Game Studio Express. But before we get into the specifics of frame-by-frame animation (which we cover in the next section), we will be taking a look at how to rotate our very own shuriken for weapon animation. (And more importantly- we will be genetically altering our Ryu sprite to have a blood stained shuriken for a hand- just because we can!)

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!)