Introduction

As is well known, Shader Effect is a great thing supported with the release of WPF 3.0/ Silverlight 3.0. However, WPF only comes with five kinds of bitmap effects and two kinds of rendering effects while Silverlight only supports two kinds of rendering effects: BlurEffect (fuzzy rendering) and DropShadowEffect (projection rendering). Currently, because WPF/Silverlight is merely used by most developers to develop applications in a rare range of fields they are just looked upon as Winform/Webform alternatives. For this, the above types of ready-made rendering effects may be sufficient to meet the needs of the majority of occasions. But if you intend to use WPF/Silverlight in high-end development, such as animation and game design, then these cases requires dozens of custom rendering effects library to meet the needs of rendering colorful pictures.

In my previous article titled Write Your Custom Effect Components in Silverlight 3 published at dotnetslackers I introduced what's Microsoft's High Level Shader Language (HLSL) and how to use it to create custom effect component to enhance static images. In this article, we will research into a higher interesting topic - how to use custom effect to create Silverlight 4 animations.

Explained by the previous article, you have already gained a better understanding with HLSL. In fact, HLSL rendering is not limited to static rendering, there also bears the other greater energy in it.

In the previous article you've known that a typical HLSL program generally contains several global variables of the type register. From another point of view, these global variables right corresponds to the changeable dependency properties of the Effect component. Readers familiar with Silverlight Storyboard are easy to realize that by updating the value of each global variable in the HLSL code according to certain rules we can also get cool animated form of rendering effect, so that another kind of animation is generated. This is just what really interests us.

In the subsequent sections in this article I will show you how to achieve HLSL based advanced animation effects on Silverlight platform.

Create a Silverlight 4 Sample Project

First of all, let's follow the listed steps below to set up the demo project sketch.

1. Start Visual Studio 2010 to create a basic Silverlight 4 project and name it SL4CustomEffectAnimation.

2. Right click the solution SL4CustomEffectAnimation, select "Add|New Project...", and add a Silverlight 4 class library, naming it SL4CustomEffectLib.

As implied above and in the previous article, with the help of Shazzam, a good tool to help you quickly create and test HLSL script, we can more easily start HLSL script programming and also obtain semi-finished C# code.

Hence, we can create our interested HLSL shader effect using Shazzam and compile the related scripts into .ps files and finally encapsulate these files and associated C# classes into the above class library SL4CustomEffectLib to be used later on in the Silverlight sample application.

Use Shazzam to Help to Create the .ps Files

As is known, there are more than forty ready-to-use sample shader effects (refer to Figure 1) shipped with Shazzam. For simplicity, in this case we are going to use some of these built-in shader effects to create our custom shader effects library.

Figure 1: Shazzam provides more than forty excellent and ready-to-use sample shader effects

Since we will use the ready-to-use effects and code provided by Shazzam things become easier. Take the Ripple effect (which is one of our interested effects to be used in the sample application) for example. Just follow the steps below:

1. Start Shazzam and select the tab "Shader Loader".

2. Click the sub tab "Sample Shaders". From the preinstalled sample list box click the file 'Ripple.fx'. In this way, we can obtain the following HLSL scripts:

Listing 1: The ripple effect related HLSL scripts

Since we've dissected the similar scripts in the previous article and there are already enough comments in the code, we do not need to give further explanations.

3. Click the tab "Generated Shader – C#" at the lower right corner in Shazzam, and you will see the following ready-to-use C# code:

Listing 2: Shazzam generated ripple effect related C# shader code

Here, I still do not want to give further explanations about the above C# code since it's nearly all the same for you to create other Shader effects related C# code. However, all the above public static read-only typed dependency properties should cause your extreme attention. In fact, as you've guessed, these properties are just the ones we will change to create later animations. So, we cannot clone the right form of C# code in building our above effect library.

4. Select the menu "Tools" - "Compile Shader" or press the F7 key to compile your script. If all goes well, the system will give appropriate hints.

5. The current task is to find the related .ps file and copy the C# code. In my machine the path seems a bit peculiar - C:\Documents and Settings\Administrator\Local Settings\Application Data\Shazzam\GeneratedShaders. Anyway, copy the file Ripple.ps to the root path of the project SL4CustomEffectLib.

In the next section, we will use the above Shazzam generated files to set up our custom effecs library - SL4CustomEffectLib.

Build the Silverlight 4 Custom Effect Library

To facilitate the management of all the .ps files we put the above file Ripple.ps to a newly-created sub folder ShaderSource in the project SL4CustomEffectLib. Then, in the Properties dialog box of this file, do remember to change the type from "Build Action" to "Resource".

Afterwards, you can follow the below steps to create the ripple effect related class:

1. Right click the project SL4CustomEffectLib, select "Add|New Item...", and add a common C# class file, naming it Ripple.cs.

2. Copy the previously-generated file C# class file in Shazzam into the file Ripple.cs. And then, make a little modification with it, as follows:

Listing 3: The final C# class corresponding to the ripple effect

In the above code, compared with the Shazzam version, we mainly made modification at three points: get rid of the readonly constraint of all the dependency properties; change the .ps file related Uri path; set all the public properties to virtual. That's all.

OK, according to the process creating the ripple effect class, we can easily create other interesting effect classes and related .ps files.

Still, go to the path C:\Documents and Settings\Administrator\Local Settings\Application Data\Shazzam\GeneratedShaders. Then, copy the rest files BandedSwirl.ps, GrowablePoissonDisk.ps, Magnify.ps, Pinch.ps, and ZoomBlur.ps to the sub folder ShaderSource. And also, in their Properties dialog box, change the type from "Build Action" to "Resource".

Next, inside the project SL4CustomEffectLib create other related classes files corresponding to the .ps files, i.e. BandedSwirl.cs, GrowablePoissonDisk.cs, Magnify.cs, Pinch.cs, and ZoomBlur.cs. Obviously, these classes related C# codes are nearly the same as their Shazzam versions except for a little modification like that done in the class Ripple. For details, you can refer to the source code yourselves. Here we are to neglect them.

Finally, build the library SL4CustomEffectLib. With nothing wrong, you will have gotten a custom effect library ready to be used in the subsequent Silverlight game application.

Use the Custom Effect Library in Silverlight Game

To use the above class library in the Silverlight application is very simple: just add a reference to the library related assembly, then refer to the appropriate namespace, and last in the behind codes (in the simple case you can also use in the XAML markups) use the effect components.

Please follow the below steps.

1. Add reference to the above generated assembly SL4CustomEffectLib.dll and add related using sentences:

Listing 4: Add related using sentences

2. Declare global variables:

Listing 5: The only two global variables in the sample game

3. Initialize the application:

Listing 6: Set up the background image and initialize the sprite

Herein, the method changeEquip takes the responsibility of initializing the sprite. This method is a great thing. However, to save space, we are not to delve into it; you can study it by downloading the source code.

4. Achieve the animation effect. This functionality is achieved in the method BeginShaderAnimation.

Listing 7: the total source code for the method BeginShaderAnimation

To fully comprehend the above code, you should first have a better understanding with the Storyboard class. Then by digging further, you can easily find that the crucial code lies in the following one sentence:

By invoking the method SetTarget of the story board, the animation is bound to the target - the specified shader effect component. Then, the animation begins.

5. Change the animation effect. This functionality is achieved in the event handler ComboBox_SelectionChanged.

Listing 8: The source code for the event handler ComboBox_SelectionChanged

In the running time, by clicking the ComboBox that contains various kinds of custom effect names we can change the custom animation effects that are applied to the sprite. Up to now, we've accomplished our final target – dynamically altering the effect by changing their properties and then playing related animations.

Enjoy the Running-time Snapshots

There is so much for the theory. Let's take a rest to enjoy the final snapshots.

Figure 2 illustrates the initial state of the sample game. In there, no shader animation has been applied upon the sprite. Note here you can move the sprite by clicking any place at the scene.

Figure 2: The initial state of the sample game

Figure 3 gives the ripple animation effect that is applied upon the sprite.

Figure 3: Ripple animation effect upon the sprite

Figure 4 gives the magnify animation effect that is applied upon the sprite.

Figure 4: Magnify animation effect is in effect

Figure 5 gives the banded swirl animation effect that is applied upon the sprite.

Figure 5: Banded swirl animation upon the sprite

OK, for the rest animation effect, you can try them yourselves.

Summary

In this article, we've finally achieved our initial target of using custom effect to create splendid Silverlight 4 animations. In fact, because the Effect concept has been introduced since Silverlight 3 you can of course implement them in Silverlight 3 (you need to copy all the related code into your Silverlight 3 environment). Anyway, a true conclusion is the Effect component provides another miraculous kind of animation to enhance your Silverlight based game applications!

It is noteworthy that even the newest Silverlight 4.0 version supports only pixel rendering that is still limited to software-based algorithms rather than the hardware-supported GPU (video card) based ones. What's more, for the time being it can not achieve the HLSL render on vertices. Though, these capacities have been largely able to meet our current needs. We can implement HLSL-based animation rendering effects by simply coding. With these and together with the proper imaging we can easily achieve the results of commonly-seen environmental effects, such as halo, rain and snow, clouds, lightning, ice and other magic effects such as explosions, laser, crystal using no more than tens of KB of storage space. Till now, we should have enough reasons to say that the future of Silverlight will become better and better.

About Xianzhong Zhu

I'm a college teacher and also a freelance developer and writer from WeiFang China, with more than fourteen years of experience in design, and development of various kinds of products and applications on Windows platform. My expertise is in Visual C++/Basic/C#, SQL Server 2000/2005/2008, PHP+MyS... This author has published 81 articles on DotNetSlackers. View other articles or the complete profile here.