Sprite Effects Sample

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

Sample Overview

The sample exhibits five different rendering techniques, displayed in sequence. To switch to the next technique, press the A button on your gamepad, or the spacebar on your keyboard.

The sequence of rendering techniques shown is:

  1. Color desaturation – Displays the "glacier" background in four panels, three with increasingly greater levels of color saturation, and the fourth cycling through from none to full saturation to exhibit a "pulsating" effect.

  2. Disappearing sprite – Exhibits a sprite that combines alpha-level fade with an overlay texture and pixel shader to display an interesting dissolve effect.

  3. Refracting sprite – Exhibits a sprite combined with a shader effect to display a randomly distorted sprite with a rippling "plasma" pattern.

  4. Refracting background – Exhibits the background image combined with the same shader effect used in the refracting sprite display.

  5. Lighting change – Exhibits a sprite combined with a texture and shader effect to apply real-time lighting to the sprite. This simulates a 3D effect with a two-dimensional sprite.

How the Sample Works

The sample uses the SpriteBatch to draw the sprite graphic in the scene, and it applies a custom effect to change how the sprite is rendered. The custom effect often works in combination with a texture bitmap to create the visual effect.

The sample also uses custom content pipeline processors to prepare some of the sprite data for rendering with the effects.

Game Program

The central functions of this sample are called from the Draw method, which invokes the currently active example effect.

DrawDesaturate

This function uses a custom pixel shader to modify the color saturation of the "glacier" texture.

The pixel shader contained in desaturate.fx uses the alpha channel information in the Color argument to SpriteBatch.Draw to limit the color saturation of all rendered pixels. If the alpha channel is set to zero, the texture renders completely in grayscale. If the alpha channel is set to 255, the texture renders with all color in the original texture.

The function divides the display area into quarters, and draws the same "glacier" texture into each with varying levels of color saturation. By drawing the fourth with a successive sequence of saturation levels, it creates an interesting "pulsing" effect.

DrawDisappear

This function uses a custom pixel shader and an overlay texture which, when combined with the sprite texture, exhibits an interesting dissolve effect. The overlay texture is scrolled over the sprite, and is used by the shader to control the speed of the fade-out so that some parts of the sprite disappear before others.

The alpha channel information passed in the Color argument to SpriteBatch.Draw controls the base level of fade. If the pixel shader and overlay texture are not applied, the sprite fades uniformly as the alpha channel information changes.

The custom pixel shader contained in disappear.fx uses the pixel information in the scrolled overlay texture to determine the fade speed for each pixel in the sprite. When applied, this creates a more interesting, non-uniform dissolve effect for the sprite.

DrawRefractCat

This function uses a custom pixel shader and an overlay texture which, when combined with the sprite texture, exhibits an rippling, swirling effect. The overlay texture is scrolled over the sprite, and the shader uses the colors from its red and blue channels to offset the position of the sprite texture.

The pixel shader contained in refraction.fx uses the pixel color information in the scrolled overlay texture to determine the offset position for each pixel in the sprite. When applied, this creates a rippling effect as the sprite moves across the scrolled texture overlay.

DrawRefractGlacier

This function uses the same custom pixel shader and overlay texture used in DrawRefractCat, but applies it to the background image instead of a sprite.

DrawNormalmap

This function uses a custom pixel shader and a companion texture to apply a real-time lighting effect to the two-dimensional sprite, giving it a 3D appearance.

The companion texture matches the sprite with each pixel in the sprite having a corresponding pixel in the companion texture. A custom content pipeline processor (NormalMapProcessor) imports the grayscale bitmap (cat_depth.jpg), and converts it into a texture that contains a vector for each pixel.

Once imported by the content pipeline processor, the color information for each pixel in the companion texture represents a normal vector that indicates which direction each corresponding pixel of the sprite is pointing.

The custom pixel shader contained in normalmap.fx uses the normal vector information in the companion texture to color the sprite's pixel according to the currently established light direction (the custom effect's LightDirection parameter).

This function sequences through different values for the light direction to demonstrate how the sprite's appearance changes as the light source moves.

Custom Content Pipeline Processors

TexturePlusAlphaProcessor

The TexturePlusAlphaProcessor custom content pipeline processor merges color and alpha information from two separate source files into a single texture. This can be useful for a source file that does not contain alpha information (such as a digital photograph or the product of a paint program that does not embed alpha channels). The alpha data can be drawn as a simple grayscale image.

TexturePlusAlphaProcessor assumes that the grayscale image to use as alpha data is contained in a file whose name begins the same as the sprite image, with the suffix "_alpha." For example, the sprite file cat.jpg is accompanied by the grayscale image file cat_alpha.jpg. If a file whose name follows this convention does not reside in the same directory, TexturePlusAlphaProcessor will fail with an error.

As used in this sample program, the TexturePlusAlphaProcessor custom content pipeline processor is used to mask off the undesired background portion of the sprite bitmap cat.jpg. The accompanying cat_alpha.jpg contains the mask. These two source images are combined by TexturePlusAlphaProcessor into a single run-time texture.

NormalMapProcessor

The NormalMapProcessor custom content pipeline processor converts an image that contains "height" values represented as grayscale pixels into a texture that contains normal vectors. This normal-map texture can be used by the custom pixel shader in normalmap.fx to shade the sprite according to the direction of a light source.

In the sample program, the file cat_depth.jpg contains grayscale information that corresponds to the sprite in cat.jpg. This grayscale value of each pixel in cat_depth.jpg indicates the relative height of the corresponding pixel in cat.jpg for the purpose of rendering a 3D effect.

The NormalMapProcessor content pipeline processor converts each grayscale pixel in cat_depth.jpg into a normal vector that can be applied to lighting.