Introduction
Microsoft Expression Blend 3 has brought us two built-in Effect components, BlurEffect and DropdownEffect. Since descriptions of these two effects can be easily found in the Internet, we will not go into them. However, to achieve other more magic effects in your Silverlight game app, you will often fall back upon a third party to provide custom effects into the project, and then apply, in the same way as the method provided by Expression Blend 3, these effects to the objects in the artboard.
In fact, as developers, we can create our own custom effects in tools such as Microsoft Visual Studio. This article will teach you how to, by creating a custom effect and apply it to a static image to show the typical programming process.
Write a Custom Effect Component
A great feature of Silverlight 3 is to support the creation of custom effect components based on HLSL (High Level Shader Language). HLSL is a script language created by Microsoft, introduced since DirectX 8, with the aim to create advanced effects to use in DirectX-based game applications. Currently from the Internet you can easily find a lot of samples about HLSL language programming, therefore, we are not going to repeat them here.
In general, the typical steps to develop and apply a custom effect component can be summarized as below:
1. Write your HLSL program.
2. Test the HLSL program.
3. Create a Silverlight application framework.
4. Develop the Silverlight application.
5. Apply (test) your HLSL effect components in the Silverlight application.
Starting from the next section, we are going to give detailed descriptions of each step above in developing the custom effect component in this article.
Write HLSL script
In order to create a custom effect, you need first to install the latest version of DirectX SDK (whose url is listed at the beginning of this article), because you need the effect compiler fxc.exe inside the SDK, to be able to compile a custom effect.
Then, you must use Microsoft's High Level Shader Language (HLSL) to write your own effects. This language provides a simple way to handle digital images and widely used in developing DirectX-based game applications.
In this case, our HLSL program called WaveEffect.fx, whose code is as follows:
Listing 1: The HLSL program to define the wave effect
In this case, we need to retrieve the color information on the screen (picture) to be used in our custom shader effect component. First, create a sampler2D typed global variable called input; this variable will use the value from inside the register s0.
Next, we created an entry point function main. Note the name is not mandatory; the entry point function name can be any valid function name. It uses a two-dimensioned vector float2 type parameter uv, the two components of which corresponds to the x and y coordinates of a pixel, respectively. In addition, the entry point function contains a vector containing four floating-point typed numbers, which correspond to the four components of a pixel color, i.e. (red, green, blue, alpha).
Next, we used in the main function a simple algorithm in order to change the entire x and y coordinates in any given image, resulting in a wave type of image distortion effect.
Now, we want to use the effect compiler along with DirectX to compile the source code above. So, open a command prompt and enter the following command, which will compile the above file and output a .ps file.
in the next sub-section, you will learn to use a free rendering editor named Shazzam which will greatly simplify the above process.
Use Shazzam to assist editing and testing your HLSL scripts
Shazzam is a small but very good tool written by Walt Ritscher, prepared to help you quickly create and test HLSL script. And also, it can produce the .fs file that you need to write Silverlight effect components. (It also leverages the HLSL compiler tool fxc.exe shipped with DirextX). The current version of Shazzam is 1.2.
Specifically, this tool provides the following features:
- Contains a HLSL editor.
- Able to open and edit existing HLSL files.
- Automatically generates the sample code for a class derived from ShaderEffect (including VB and C# versions).
- Automatically generates the input control to facilitate the manipulation of registers used by the rendering process.
- Provides some ready-to-use sample images for real-time observation of the final rendering.
- Imports your own images.
- Provides a friendly syntax highlighting support for C# and VB source code.
Below, we give a brief description of using Shazzam to edit, compile and test our HLSL script above.
Now, start Shazzam, select the menu "File" - "New Shader File ...". Select a directory and specify the file name WaveEffect.fx. Then, copy the code above into the lower right corner of Shazzam, i.e. the Script Editor.
Next, 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.
Next, it's time to test the effect of our script. Select a picture (using the menu "File" - "Open Image File ..." to select an external picture or Shazzam built-in picture), and then select the menu "Tools" - "Apply Shader" or press the F5 key to test your script. Figure 1 shows one of the run-time snapshots, where we use Shazzam's built-in picture to test the above script.
Figure 1: Use the Shazzam’s built-in image to test the scripts written in HLSL
Also, please note two points; one is the generated file that is produced after Shazzam compiles the above script WaveEffect.fs. You can use the menu "Tools" - "Explorer Compiled Shaders ..." to observe the WaveEffect.fs file under a specific directory.
The second point is, as soon as Shazzam ends up the compiling it will automatically generate for us the C# custom outline code with which to create the appropriate effect components, as follows:
Listing 2: Shazzam generated outline C# code
The above code provides great convenience for us to develop our effect component subsequently.
Use the .ps file to write Silverlight custom effect library
In order to write a Silverlight-based HLSL effect, you must set up a proxy class derived from the base class ShaderEffect (defined in the System.Windows.Media.Effects namespace). Then, in the derived class load pre-compiled HLSL bytecode, and define some attributes in order to control from your class the HLSL effect.
To do so, you are suggested to follow the listed steps below.
1. Start Visual Studio 2008, and create a basic Silverlight 3 project, named SL3WaveEffectDemo.
2. In the existing solution add a Silverlight class library, named SL3WaveEffectLib.
3. Copy the previously-generated file WaveEffect.fs to the library project folder and in its Properties dialog box, set the type from "Build action" to "Resource".
4. Renamed the class file WaveEffectEffect.cs, and create the following code (mainly copy the code above):
Listing 3: The C# code for our customized effect library
The name SL3WaveEffectLib in the above code corresponds to the class library (i.e. the effect library) name. As mentioned earlier, we copy the file WaveEffect.ps to the root directory of the library.
5. Save the file. Right-click the library and select "Build" to generate the class library assembly SL3WaveEffectLib.DLL.
Because this sample code does not introduce more complex programming, we are not going to explain the above code. Thus, the effect class library building work comes to an end.
Use the custom effect in the Silverlight application
To use the above class library in the Silverlight app is very simple: just add a reference to the library related assembly, then refer to the appropriate namespace, and last in the XAML (or background) code use the effect.
Now, open the main page file MainPage.xaml in the Silverlight project SL3WaveEffectDemo, create the following simple XAML markup code:
Listing 4: Use our customized effect in the declarative mode
Note that at the very start, we add reference to the XML namespace of our custom effect class library:
As is seen, to emphasize the contrast, we've introduced two Image controls, but only imposed custom effect upon the second Image control:
Of course, you can also select the code-behind way to use the above custom effect class WaveEffectEffect, not to be discussed here.
Also, if you switch to Microsoft Expression Blend 3 to edit the file MainPage.xaml, you can easily from the Assets panel under the Effects tab to drag our customized effect WaveEffectEffect onto the second image control, leaving other details to the Microsoft Expression Blend 3 itself.
Figure 2 shows one of the running-time snapshots for the above sample program.
Figure 2: This sample program is running with the right image used the wave effect
In Figure 2, the left is the original image; the right is the image after the wave effect has been imposed upon.
Summary
Today, Silverlight 3 HLSL support provides for you to develop a new Silverlight program in unlimited possibilities. It is noteworthy that the ideal situation is the pixel shader should use the hardware-supported GPU (video card), but in Silverlight 3 the pixel shader rendering is still limited to software-based algorithms. Nevertheless, we should firmly believe that in the future versions of Silverlight this will be improved.
A last word is this article has only given you a simple example to use the customized effect with static images; more complex animations to apply the customized effect in each frame wait you to realize.
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.
|
You might also be interested in the following related blog posts
Designer Support for One-Way navigations in Entity Framework 4
read more
How To: Silverlight grid hierarchy load on demand using MVVM and RIA services
read more
Telerik Releases New Controls for Silverlight 3 and WPF
read more
Why VBA Still Makes Sense
read more
Customizing the SharePoint ECB with Javascript, Part 1
read more
Mixing Silverlight and MS ASP.NET AJAX 3.5 in the same web application.
read more
Ruminations on Multi-Tenant Data Architectures
read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development
read more
Silverlight Twitter Client with authentication
read more
Telerik Announces Support for Microsoft Silverlight 3
read more
|
|
Please login to rate or to leave a comment.