Apr 13

Much of my time creating games in Silverlight has been spent trying to find creative ways to make the graphics in the Silverlight visual tree preform well enough to make a good game. Up until this point, casual games have been decent but anything that required more horsepower was usually not an option. This all changes with Silverlight 5 and the new 3D API. You may or may not know it, but 2D sprites in XNA (using SpriteBatch) are actually rendered on a 3D surface. We can now do the same thing in Silverlight. The Silverlight 5 beta doesn’t include a SpriteBatch class, but you can roll your own. Over the next few weeks I’ll be focusing my efforts on creating a version of SilverSprite which uses the new Silverlight 5 DrawingSurface for its rendering.

SilverSprite is a Silverlight implementation of XNA’s SpriteBatch, and up until now it’s been using some clever hacks to make the Silverlight visual tree act like XNA’s immediate mode capabilities. I eventually felt like I took it as far as I could, and moved on to other projects for a few months. Now that Silverlight provides XNA-like capabilities I can make SilverSprite into something that can really do justice to XNA games that people want to port to Silverlight.

I need your help! If you have an XNA game based on SpriteBatch that you want to get working on the web, especially if it uses some of the advanced features of SpriteBatch and you’re willing to share the source code with me, I’ll port your game for you. This will help me make SilverSprite better, sometimes it’s hard to find good test cases. Contact me if interested.

Here is a sample created with the Silverlight 5 beta which uses additive blending and is rendering a lot of particles. This may not look like much, but it’s something that was impossible before Silverlight 5.

You can download the source code here.

 

Here are some things that are now possible for 2D graphics in SL5 that were problematic or impossible in Silverlight before:

  • Color tinting of visual elements. This could be done with a pixel shader before, but there was some CPU overhead and you had to set a new pixel shader on each element to be tinted. Now you can use one pixel shader for all elements and just set a register with the desired color. You could also do this in SL4 with WriteableBitmap and your own blitting, but this was slow and complicated.
  • Additional blend modes. Only alpha blending was available before. This one is huge. Think additive blending for particle effects, there are a bunch of other cases where you want other blend modes too. This could only be done in WriteableBitmap doing your own blitting by hand before.
  • Scaling without blurring. This is important for getting those crisp lines of an 8-bit retro game. The way pixel shaders were implemented in SL4 you couldn’t get this effect, was possible if you do your own blitting in WriteableBitmap. You can also scale with blurring, but now you have the choice.
  • 500+ independent sprites with <10% CPU usage (so far, I think this can get better).

I’m really excited about the potential for Silverlight 5 in the area of gaming and plan to cover many topics in the near future about how to use these powerful new features.

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

18 Responses to “Silverlight 5 Takes 2D Silverlight Game Development to the Next Level”

  1. Matt Eland Says:

    Keep at it. Your project is very interesting. I'd love to be able to run XNA or XNA-ish code inside of Silverlight. Don't have a finished XNA game to offer, sadly, but this topic is very much on my mind as I'm considering creating a cross platform game.

    Microsoft offers XNA for WP7, Windows, and XBox 360.
    Microsoft offers Silverlight for WP7, Windows, and the Interwebs.

    Wouldn't really expect the 360 to run Silverlight, but it'd be awesome if XNA could run on the interwebs – particularly with something resembling the same cross-platform portability that I enjoy while developing XNA code.

  2. Twitch Says:

    I couldn't find an email address to contact you on, but we're working on an XNA game at present, and have been looking at porting it to silverlight at the end of our dev cycle, mostly due to the difficulty involved in doing so.

    Our website is http://www.jollycorpse.com – and I'd love to work with you to both port our game, and help make more XNA API's accessible through silverlight.

  3. Thraka Says:

    Sure!! I have an XNA project that is entirely SpriteBatch rendered. It replicates ascii games from the DOS era. Here are some YouTube vids demoing it. It's not done yet and still in progress. I would love to give you the source and see this working in SL. I was just thinking about doing a SL port when I found out about SL5 and the 3D api stuff going into it!_ _http://www.youtube.com/watch?v=n8jab_MM6Mo_http://www.youtube.com/watch?v=76VR6vygptI__Please contact me through YouTube or through gmail which my email is: thraka

  4. slsuperstar Says:

    Do you know if sl5 can skip blurring when using bitmapcache on an element too?

  5. Se73314 Says:

    Link to source code is broken. Can you fix it. please?

  6. exchangerates Says:

    Hi
    I personally don't think it would be a great idea to have full integration support on XNA with everything not getting things such as a browser in the Xbox or integrated live services (even if the latter is more usefull).
    I like to get one experience in one machine and have another one with the other. This allows hardware conceptors to create the best design for what the machine is aiming.
    PC is a great box for a lot of things while the Xbox 360 is the perfect machine today for next gen games or casual games that you find in the Xbox Live Arcade.

  7. Chris Gomez Says:

    I was wondering if it might be possible to look at the Stock Effects sample for XNA 4 to get the same shader the team uses to implement SpriteBatch. Weird that they didn't include SpriteBatch or Model from XNA. I can understand SpriteBatch to avoid confusing Silverlight devs.

    In any case I've been looking at this new feature of Silverlight as well to light up 3D games on the web. Even if the portability for code isn't 100%, it's still much more than it was!

  8. Bryan Livingston Says:

    Hello Bill!

    I'd absolutely love it if you could port a tiled map renderer from http://tiledlib.codeplex.com/ or http://nerdculture.org/2009/07/14/tiled-maps-for-… over to silverlight. I think it would be a good test for you since it would look great and show any problems with edges of the sprites, since their tiled.

    I've ported the one from nerdculture.org over to use WriteableBitmapEx, but it's too slow for what I need. Blit chews up all the CPU and scrolling isn't smooth. You can see what I've done at http://smote.com One issue I ran into porting is that Silverlight doesn't have compression libs available, but it doesn't matter since .xap files are already ziped and the compression can be turned of in tiled.

    I'm using some nice sprites from here: http://www.lostgarden.com/2006/07/more-free-game-… and can send you a .tmx file with them loaded if you'd like!

    Thanks for you're efforts. Can't wait to see a working spritebatch!

    Bryan

  9. Bryan Livingston Says:

    I just remembered why I didn't port the Tiledlib version. It used a bunch of XML calls that aren't available in SL.

    I'd be happy to send you the version from nerdculture that i ported. I've still got all the xna calls commented out.

  10. Bryan Livingston Says:

    You could also port the mercury particle engine. http://mpe.codeplex.com/ That would be awesome!

  11. semasiographologist Says:

    Downloaded it and ran it OK. Thanks.

  12. Andrew Says:

    I've installed SL5 but I only see a green rectangle occupying the whole area on that page (I also recompiled the project with the same success), does it work for anyone else?

  13. Andrew Says:

    Well the reason is that MainPage.OnDraw method never gets called, but I have no idea why.

    <DrawingSurface Draw="OnDraw" SizeChanged="DrawingSurface_SizeChanged" />

  14. Andrew Says:

    Oh I'm sorry for multiple comments, but I found the problem: right-click on SL plugin area, click "Silverlight", go to "Permissions" and allow the corresponding "3D Graphics: use blocked display drivers" permission.

  15. Joseph Says:

    I have installed SL5 beta in a virtual environment (virtualbox) and the only thing that I see is a green screen. Does it need hardware acceleration?

  16. billreiss Says:

    Yes the new 3D support in Silverlight 5 requires hardware acceleration. It uses DirectX or OpenGL under the covers. You can still get some 3D capabilities in software in Silverlight 5 using the perspective transforms available in earlier versiond of Silverlight but certainly not with the same performance.

  17. Bryan Livingston Says:

    Hey Bill,

    The demo on this post is broken when the SL5 RC that was released today is installed.

  18. billreiss Says:

    Yeah they changed the 3D API a bit, will fix this weekend thanks.

preload preload preload