Silverlight Terrain Tutorial Part 3 - Creating Smooth Tile Transitions using Opacity Masks
This tutorial will look into using the Opacity property on the tiles to create smooth, natural looking transitions between tiles. For example, blending a dirt tile into a grass tile, a grass tile into a rock tile, etc.
Run the demo here: http://silverlight.services.live.com/invoke/66033/Terrain%20Transititions/iframe.html
Below, on the left, is a screen shot of a grass and dirt tile without the use of an opacity mask. As you can see, the straight line does not make for a very real looking transition! On the right is the result with an opacity mask applied, making for a much more realistic transition.
No Opacity Mask With Opacity Mask
So how does this work? What we do is we put down a grass layer followed by a layer of dirt on the same tile location. We then apply an Opacity mask to the dirt image which tells Silverlight what level of rendering to do on each pixel within the dirt image.
Example:
Layer 1 Layer 2 Opacity Mask Result
+ 
+
=
The checker boxes in the opacity image (image #3) above represent the areas that are transparent in the PNG opacity mask. In this area, the image will not be drawn allowing any image below it show through.
Here’s how it looks in our XAML code:
<Image Source="grass.png"></Image>
<Image Source="dirt.png" >
<Image.OpacityMask >
<ImageBrush ImageSource="opacityMask.png"></ImageBrush>
</Image.OpacityMask>
</Image>
Using a PNG image file, transparency is represented by the alpha value only. All the other colors in this image have no impact. Each color is represented by “#AARRGGBB” where AA=alpha hex value, RR=red hex value, GG=green hex value and BB= blue hex value. Transparency in a pixel increases starting at #00000000 (completely non-transparent) to #FF000000 (completly transparent.
If you do not want to use an image for your opacity mask, you can also use a Brush. For example, this tile shows a transition using a LinearImageBrush:
Layer 1 Layer 2 LinearGradientBrush Result
+
+ 
=
Here is the XAML code:
<Image Source="grass.png"></Image>
<Image Source="dirt.png">
<Image.OpacityMask >
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FF000000" Offset="0.0" />
<GradientStop Color="#00000000" Offset="1.0" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
Using other brush types, such as the RadialGradientBrush, you can do a lot of other cool effects.
Example:
++
= 
XAML Code:
<Image Source="grass.png"></Image>
<Image Source="dirt.png">
<Image.OpacityMask >
<RadialGradientBrush GradientOrigin="1,0">
<GradientStop Color="#FF000000" Offset="0.0" />
<GradientStop Color="#FF000000" Offset="0.25" />
<GradientStop Color="#AE000000" Offset="0.75" />
<GradientStop Color="#00000000" Offset="1.0" />
</RadialGradientBrush>
</Image.OpacityMask>
</Image>
Thank you,
--Mike Snow
Subscribe in a reader