Personal tools
You are here: Home Resources XNA Tutorials Sprite Effects Sample

Sprite Effects Sample

DOWNLOAD WHOLE TUTORIAL
 

This sample shows how shaders can be used to implement special effects when drawing 2D graphics with SpriteBatch. It uses two custom content pipeline processors to prepare the sprite textures in special ways.

Sample Overview

The sample includes five different rendering techniques. To switch to the next technique, press the A button on your gamepad, or SPACEBAR on your keyboard.

The first custom content pipeline processor merges color and alpha information from two separate source files into a single texture. This allows the alpha data to be drawn as a simple grayscale image, which can be convenient if you are using a paint program that does not properly support images with embedded alpha channels.

The second custom processor converts an image containing grayscale height values into a normal-map texture.

Minimum Shader Profile

Vertex Shader Model 1.1
Pixel Shader Model 2.0

How the Sample Works

To use a custom effect with SpriteBatch, the effect must specify a custom pixel shader, but not set any vertex shader. SpriteBatch internally relies on using its own vertex shader, so the sprites will not render correctly if you attempt to override that.

The steps needed to render sprites with a custom effect are:

You must specify SpriteSortMode.Immediate; otherwise, the SpriteBatch will hold off setting up any device state until you call SpriteBatch.End, in which case it would overwrite whatever custom shader your effect had specified.

The rendering techniques demonstrated by this sample are:

  • Desaturate. Uses a pixel shader to modify the saturation of the texture being drawn.
  • Disappear. Uses two textures, one containing the main sprite image, and another containing a random plasma style pattern. This second texture is scrolled over the first, and is used to control the speed of a fade-out so that some parts of the sprite will disappear before others.
  • Refract Cat. Uses two textures, one containing the main sprite image, and another containing a random plasma style pattern. This second texture is scrolled over the first, and the colors from its red and blue channels are used to offset the position of the main sprite texture. This gives a rippling, swirling effect.
  • Refract Glacier. Uses the same shaders as the Refract Cat technique, but applied to the background image.
  • Normal Map. Uses two textures, one containing the main sprite image, and another containing normal vectors indicating which way each pixel of that sprite is supposed to be pointing. While rendering, this technique uses an effect that applies real-time lighting to the sprite, producing a fake 3D effect. The normal-map texture is created from a grayscale depth image using the custom NormalMapProcessor.

If you look at the source texture files, you will notice that cat.jpg does not include any alpha information, yet the cat is drawn correctly using an alpha channel! This is thanks to the custom TexturePlusAlphaProcessor, which, when processing cat.jpg, uses a naming convention to locate the grayscale cat_alpha.jpg, and merges data from these two source images into a single run-time texture.

by Ashey Reid last modified 2008-06-01 14:46
« February 2012 »
Su Mo Tu We Th Fr Sa
1234
567891011
12131415161718
19202122232425
26272829
 

Powered by Plone CMS, the Open Source Content Management System

This site conforms to the following standards: