How to Set Opacity and Scale Sprites in XNA Game Studio Express

We got our feet wet with tinting sprites in the previous section- but we still haven’t created anything too stunning. In this section we will take a look at setting the opacity, and even learn how to scale sprites! Specifically, we will focus on giving Ryu a slight oscillating size; this will give the effect of him breathing. And if things couldn’t get cooler, we’ll add some invisibility to the mix.

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!