Fast Tile Brush in Silverlight, And Easiest Way to Shader Effects

Dec 22, 2009

Here is one monster, tiled as 6 monsters down here:

This is actually 1 monster, tiled twice horizontally and 3 times vertically using a Silverlght Tile brush shader effect.

Download source code

I'm not 100% sure if this is the fastest way, but it's definitely worth it (fast). There are 2 other possible ways to do fast tiling:

  1. Do it manually or "hardcoded" - if your tile will never change, just do it in any image editor and then display the tiled result using an Image tag
  2. Display several images next to each other - relatively harder, but might end up being faster than the pixel shader (this is just a speculation on my side since I haven't tested it yet, but it is worth a try). Image-s can be rendered on the GPU, if you enable BitmapCache and GPU acceleration in Silverlight, while the pixel shaders are currently (in Silverlight 3) calculated on the CPU.

The pixel shader code:

[code:c#]

// Amount of tiling in the X and Y direction
float2 TileCount : register(C0);
sampler2D implicitInput : register(s0);

float4 main(float2 uv : TEXCOORD) : COLOR
{
 return tex2D(implicitInput, frac(uv.xy * TileCount.xy));
}
[/code]

Sample usage:

<Image Source="http://nokola.com/clientbin/images/icons/games.png">
  <Image.Effect>     
    <local:TileEffect TileCount="2,3" />   
  </Image.Effect> 
</Image>

And I also mentioned the easiest way to shader effects.

Currently I believe you can start almost immediately with Shazzam: http://shazzam-tool.com/.

It's a tool you can use to test out your shader effects, and will create the required Silverlight or WPF code-behind for you.

I know there are other Tile brushes for Silverlight out there, but I haven't found a simple pixel shader (with one instruction and frac()). The pixel shaders I found usually use 2 variables - one for x-tiling, one for y-tiling. Since Pixel shaders, even on the CPU, supposedly favour SIMD (single instruction, multiple data), less instructions should mean faster performance (depends on the shader compiler too).

What can you use it for?

In a side-scroller or many other types of games, tiling textures is crucial - e.g. brick wall, metal, and other things.