Shazzam News

Silverlight and WPF are different beasts.  The similarities between the two is high, but there are enough differences to foul you up now and then.

Choose your platform preference

There is a new addition to the Settings pane.  The code generation engine will consider your desired platform when generating the .NET classes.

Figure 1:  Target Framework setting.

As you can see from the following code examples Shazzam creates slightly different versions of the DependencyProperty registration code depending on your framework choice.  Shazzam also ignores Point3D, Vector3D, or Point4D property types when creating Silverlight classes as Silverlight 3 doesn’t support these types yet.

// Use UIPropertyMetaData for WPF

 public static readonly DependencyProperty AspectRatioProperty 

      = DependencyProperty.Register("AspectRatio", typeof(double), 

       typeof(BandedSwirlEffect), new UIPropertyMetadata(((double)(1.5)), 

       PixelShaderConstantCallback(3)));

// Use PropertyMetaData for Silverlight

public static readonly DependencyProperty AspectRatioProperty 

   = DependencyProperty.Register("AspectRatio", typeof(double), 

   typeof(BandedSwirlEffect), new PropertyMetadata(((double)(1.5)),

   PixelShaderConstantCallback(3)));

Constructor

Shazzam now generates a parameterless constructor that automatically loads the compiled pixel shader from an assembly resource.  If the name of your assembly is different from the name of your namespace, you’ll need to hand-edit the URI in the constructor."

The resource URI can be relative, taking the form "/AssemblyName;component/ShaderName.ps" – this new syntax works in both WPF and Silverlight.

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.

Creating shaders is fun.  But it’s more thrilling to see what your new shader can do.   Shazzam has a testing screen for just that purpose, giving you a place to experiment with your effect, just choose the ‘Change Shader Settings’ tab.

Figure1 : Change Shader Settings tab.

The Edit Shader Property control

What happens when you compile your HLSL code? Each input parameter in your HLSL code is converted to a DependencyProperty in the generated C#/VB code.

/// The HLSL

/// <summary>The aspect ratio (width / height) of the input.</summary>
/// <minValue>0.5</minValue>
/// <maxValue>2</maxValue>
/// <defaultValue>1.5</defaultValue>
float AspectRatio : register(C3);

/// The C# Dependency Property

public static readonly DependencyProperty AspectRatioProperty 

   = DependencyProperty.Register("AspectRatio", typeof(double), 

   typeof(BandedSwirlEffect), new UIPropertyMetadata(((double)(1.5)), 

   PixelShaderConstantCallback(3)));
    

In turn, each DependencyProperty in your generated class is assigned an editor on the test page.  See Figure 2 for an example.

Figure 2:  AspectRatio editor.

The Min and Max textboxes on the editor set the range for the value slider.  Move the slider to set the current value for the property (AspectRatio in this example).

Animating the Property

Manually changing the slider value is useful to see what happens to the image when a particular test value is applied.  When you find a interesting version of your effect you can jot down the detail  and use it in your Silverlight/WPF application.  But sometimes you just want to play with the settings and see what happens.  That’s why there is an animation section on the edit control.  There are several buttons (exact number depends on the property type) available for controlling the animation.

Figure 3: Animation controls.

When the animation is running the value slider is replaced with a status textbox.  This way you can see the current values as the animation runs and not be distracted by the slider racing dizzily back and forth on the screen.

Figure 4:  Current animation value as text.

Multi-value Animations

Some properties like Point and 3DPoint have multiple values in each property. The editor provides more controls for editing and adds another animation button (Circular animation).

Figure 5: Multiple editors and circular animation button.

Set Default Animation Duration

The Settings pane has a number of improvements in versions 1.1.  The one you are interested in for today is the Default Animation Duration setting. This specifies the default duration for all animations.  Your default is loaded in to the test page the next time you compile the shader. You can always modify the animation duration on the test screen, the default value is only used as the initial setting.

Figure 6:  Setting pane – Default Animation Length.

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.

In HLSL code you can create input parameters of various datatypes.  Here’s one of the simplest scalar types, the float.

         float – 32-bit floating point value.

There are a number of vector types too. 

        float2 – two dimensional float vector.
        float3 – three dimensional float vector.
        float4 – four dimensional float vector.

When you need two float values stored in a type (think WPF Point and Size types) use a float2 in your HLSL.  float3 is used for types like 3DPoint and float4 is handy for storing the four color values (Alpha, Red, Green, Blue) together.

Shazzam test controls

In Shazzam 1.0 float2  and other vector values were shown in the test UI with a single textbox.

Figure 1:  Shazzam 1.0 UI

Simple but not the most intuitive interface ever to grace an application.  Plus the point values were not animatable in V1.0. In Shazzam 1.1 the test UI has been changed to support animation and updated to handle float2, float3 and float4 values in a smarter way.

Figure 2:  Shazzam 1.1 UI

There is a better use of color in the UI labeling too, which helps differentiate between labels and data.

Forcing data type

There is a new Meta Tag, the <type> tag,  available for decorating your HLSL.  This tag tells the compiler which .NET type to use for a given HLSL variable.

float can be Double or Single.

float2 can be a Point, Size or Vector.

float3 can be Point3D (not available for Silverlight).

float4 can be Point4D or Color.

Example HLSL

//--------------------------------------------------------------------------------------
// float4
//--------------------------------------------------------------------------------------

// float4 map to Color or Point4D

/// <type>Color</type>
float4 SampleColor: register(C4);

/// <type>Point4D</type>
float4 SamplePoint4D : register(C5);

Figure 3:  Shazzam 1.1 Color and Point4D

The result is that the Point4D gets four data entry controls.  You still have to enter a color value (Red, Orange, #Ff4455FF) in a textbox however.  In a future version of  Shazzam this will be replaced with a color picker.  In the meantime you can use the Color Picker in the side pane (thanks Robby).

Figure 4: Robby’s Color Picker

Summary

[Shazzam 1.1 was released on October 11, 2009]

See a list of additional help pages here.

Install your own copy of the free Shazzam Pixel Shader Utility here.