Log in Page Discussion History Go to the site toolbox

XNA Tutorials/XNA Fade

From BluWiki

How to Fade a Sprite in XNA

Introduction

This tutorial demonstrates how to achieve a fade effect on a two dimensional sprite/2DTexture using XNA. It is based on the example shown in the MSDN tutorial Your First Game: Microsoft XNA Game Studio in 2D.

This tutorial was created by Ben Pschierl and Robert Montgomery as part of the COMP 475 XNA Tutorials.

Fading an Image in XNA

The alpha channel

In computer graphics, the alpha channel of a color determines its transparency. The higher the value of the alpha channel, the more opaque the color is. To draw a sprite the function Draw is used, which can take the following arguments:

  1. Image (2DTexture) to be drawn
  2. Where to draw the image
  3. The color channel modulation to use

Using the color channel modulation we can change the tint and the transparency of the sprite. To fade an image we just need to adjust its transparency by lowering/raising the value of the alpha channel. The alpha value is a 8-bit unsigned byte, so the possible values range from 0 to 255.

Cross Fading

When cross fading images it is important to remember that layered opacities are not added together, but multiplied. It is a common mistake when having two images fade into each other to make one image fade out while the other fades in. This results in background colors seeping through and muddying the colors. Instead the bottom image should remain opaque while the top image fades in.

Example

This image shows two images fading into one another: XNA Fade.png

Fading Based On Position

Fading based on position funcitons similarly to fading over time, but will require float values for the fade increment and alpha value since calculations will be done on a pixel by pixel basis.

       float mAlphaChange;
       float mAlphaChange2;
       float mFadeIncrement;

You also need a Vector2 to store the coordinates of the screens center and the sprite position.

      Vector2 screenCenter;
      Vector2 spritePosition;

Sprites will be stored in an array as in the previous example.

      const int NUM_IMAGES = 3;
      Texture2D[] mario = new Texture2D[NUM_IMAGES];
      protected float scale = 4f;

These values will be initialized in the LoadContent funciton as follows.

      screenCenter.X = graphics.GraphicsDevice.Viewport.Width / 2;
      screenCenter.Y = graphics.GraphicsDevice.Viewport.Height / 2;
      spritePosition = screenCenter;
      mFadeIncrement = 255f/((float)graphics.GraphicsDevice.Viewport.Width / 2f);

The center of the screen is calculated as being half of the height and width, the initial spritePosition is set as the screen center, and the mFadeIncrement is calculated by dividing 255 by the number of pixels in half of the screen. Remember to typecast values as floats for the fade increment.

In the Update function create keyboard controls for your sprite and use the following functions to calculate the alpha changes for movement to the left.

      mAlphaChange = (mFadeIncrement * (spritePosition.X - screenCenter.X));
      if(spritePosition.X < screenCenter.X)
         mAlphaChange2 = (mFadeIncrement * (spritePosition.X - screenCenter.X));

Then use the following code to draw the sprites in the Draw function

     spriteBatch.Draw(mario[0], spritePosition, null,
         new Color(255, 255, 255, (byte)MathHelper.Clamp(0-mAlphaChange, 0, 255)),
         0f, new Vector2(mario[0].Width / 2, mario[0].Height), scale, SpriteEffects.None, 0f);
     spriteBatch.Draw(mario[1], spritePosition, null,
         new Color(255,255,255, (byte)MathHelper.Clamp(255-(float)Math.Abs(mAlphaChange2), 0, 255)),
         0f, new Vector2(mario[1].Width / 2, mario[1].Height), scale, SpriteEffects.None, 0f);

The MathHelper.Clamp funtion forces the first value listed into a legal range established by the second and third value. Here it typcasts the alpha change values as an 8bit unsigned integer in the range of 0 to 255.

Example

This image shows two images fading as they move left across the screen: Mariofade.png

On Your Own

Try to use what you've learned to create the code for moving to the right side of the screen.


References

Site Toolbox:

Personal tools
GNU Free Documentation License 1.2
This page was last modified on 5 March 2010, at 20:46.
Disclaimers - About BluWiki