How to Tint Sprites in XNA Game Studio Express

In the previous section we learned about how sprites are added and drawn in XNA Game Studio Express. Ryu (the name of the sprite in the previous section) couldn’t move, blink, talk, or anything more than stand perfectly still! And while just looking at the handsome Ryu can hold one’s attention span for a good 10 seconds, beyond that we will need to add effects to Ryu. (If we are to conform to today’s attention deficit disorder standards)

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