locked
Silverlight Map Tiling using Pixel Shader RRS feed

  • Question

  • Hi, I'm working on a game which requires a tile based 2d surface. This 'map' currently contains 3 layers: 1) Base Layer(Grass) 2) Upper Layer(Dirt, water, etc) 3) Opactity Masks The opacity mask defines the the blending between the lower 2 layers and you get a nice layered tiled map. Problem, as most of you have guessed is that it is extremely slow. I believe if you have 50 tiles, silverlight loads 3 images each tile in my case, which is huge! And so the scrolling of my map in full screen is about 25fps which is bad! I am looking at tutorials on how to use pixel shader with silverlight. The blending between the 2 images should be taken care in the shader. Do any of you know of an example application which does something like this? Any tips on how I can aocompolish this task? My guess is using a pixel shader for this task should be faster than writable bitmaps, but I'm not sure as this is the first silverlight app i'm working on and everything is new to me. Any guidance would be very helpful. Thanks
    Saturday, September 12, 2009 3:36 AM

Answers

  • Are you doing any scaling? If so you need to specify RenderAtScale in your BitmapCache element with a scale that matches the the actual rendering scale of the element.

    Sunday, September 13, 2009 7:54 PM

All replies

  • Unfortunately, Pixel Shaders in Silverlight 3 are done in software - not using the GPU - so I'm not sure of the performance improvements you'll see by going to a shader.

    However, have you tried GPU Acceleration? Blending of the layers with different Opacity should be done in hardware if you enable GPU Acceleration. I have a blog post here on GPU Acceleration (or do a quick search and you'll find lots of good info) - http://www.andybeaulieu.com/Home/tabid/67/EntryID/144/Default.aspx

     

     

    Saturday, September 12, 2009 11:30 AM
  • Hi Andy, Thanks for the reply. I've been looking at some of your tutorials and they have been very helpful. I've already tried enabling GPU acceleration, the performance and the scrolling seems faster(ii'm getting a 65fps), but my image tiles look blurred for some reason. I see the tile and the blend between the two layers, but everything is completely blurred. I have defined a TileBase.xaml file which is a canvas for each tile. I applied the BitmapCaching on this canvas.Finally these tiles are rendered onto another MainCanvas(which has other UI elements in it).

     

    Here is the code for the Xaml file:

     <Canvas x:Name="ParentCanvas" Background="Blue" >
    <Canvas x:Name="ObjectCanvas" Background="Blue" >
    <Canvas.Clip>
    <RectangleGeometry x:Name="ObjClip" Rect="0,0,512,512"/>
    </Canvas.Clip>
    <Canvas.CacheMode>
    <BitmapCache/>
    </Canvas.CacheMode>
    </Canvas>
    </Canvas>

    Is it possible that this is being applied on the wrong UI element in the visual tree?

    Thanks.

     

    PS: These forums don't work so well on Google Chrome! Lame. I didn't get any of the edit options I'm seeing now in Firefox. 

     

    Saturday, September 12, 2009 4:59 PM
  • Are you doing any scaling? If so you need to specify RenderAtScale in your BitmapCache element with a scale that matches the the actual rendering scale of the element.

    Sunday, September 13, 2009 7:54 PM