Silverlight Games 101

I get a huge kick out of other people using things that I’ve created and especially when they do things that I haven’t even imagined and take it to the next level. Adam Kinney posted about doing a torn photo effect with the image blitting methods that I contributed to the open source WriteableBitmapEx project on codeplex. For those not familiar with image blitting, it is when you copy a bitmap into another bitmap as fast as you can.

What’s especially cool about this post is that he was reproducing a tutorial previously done in Flash and it would have been much more difficult without these methods. Even more exciting is that Adam has contributed some extra blending modes that he needed back into the project so everyone can benefit from them. I took at look at the original Flash tutorial and it seems more complicated than the Silverlight version but I don’t know enough about Flash to have more than a general feeling about it.

Here is the final result of Adam’s sample:

Pretty cool and it will take any image and do some random and dynamic effects to make it look torn and crumpled.

Adam’s original post is here: http://adamkinney.wordpress.com/2010/01/09/image-blitting-in-silverlight-with-writeablebitmapex/

This is a video of a presentation I did for the XNA Calgary Users Group recently. It runs about a 30 minutes and is a good introduction to getting started with Silverlight game development and some of the things to watch out for. I also cover using the SilverSprite library to make game development easier for those already familiar with XNA. Please forgive the stuffy nose as I was a bit under the weather when doing this presentation.

Click on the image below to go to the video hosted on Screencast.com

The samples and powerpoint for the presentation can be downloaded at http://www.bluerosegames.com/slgamedev.zip

My laptop has a 16 inch screen with 1920×1080 resolution and my eyes aren’t what they used to be so I run in high DPI mode 125%. This makes all of my icons and text bigger, but it also sets IE to 125% zoom. This is fine for the most part except for some apps that don’t handle it properly. For the most part these apps have been Flash, such as the Radar Map on Weather.com:

http://www.weather.com/weather/map/interactive/USFL0291?from=36hr_topnav_undeclared

Try it with a zoom other than 100% and you’ll see what I mean. One of the worst cases of this I saw was a series of AT&T banner and skyscraper Flash ads that didn’t handle zoom properly and had a lot of black space on the right and bottom. Not the best user experience for your ads. UPDATE: Found an AT&T ad having the issue:

For the most part, Silverlight handles this zoom for you and scales your application automatically. I have however run into a couple of Silverlight apps that have issues. Generally it seems to have to do with javascript integration and if you rely on values coming back from Javascript for positioning and don’t take the zoom into account.

A little unrelated, but here is a tip related to browser zoom and Silverlight. If someone has developed a Silverlight app that is too big for you to fit on the screen you can crank down your browser zoom (75%) to make it fit. This is especially useful for netbooks with their lower resolution screens.

Browser zoom issues will become more common as more people on Windows 7 discover the high DPI settings. These have been made easier to get to and understand while the screen resolution settings have been hidden away.

Just a quick note that Rene Schulte has posted the full source code for his WriteableBitmap extensions to CodePlex at 

http://writeablebitmapex.codeplex.com 

He has also included my image blitting extensions that I posted about here:

http://blogs.silverarcade.com/silverlight-games-101/15/silverlight-blitting-and-blending-with-silverlights-writeablebitmap/

Rene’s helpful extensions include methods that draw shapes and lines. Enjoy!

In a recent article in The Register http://www.theregister.co.uk/2009/11/20/silverlight_4_windows_bias/ they make the case that COM support in Silverlight 4 has “crossed a threshold” that will make Silverlight less appealing to developers that want to do cross platform development.

Yes it is true that now there is a feature in Silverlight that is Windows only, but it is still a Beta and not a released product so it is possible that some Mac native integration will come as well. Clearly it would have to be different since Mac doesn’t support COM, but hopefully if added it would be done in such a way that the interfaces on native APIs on both platforms from Silverlight would be similar.

Adobe AIR 2 is also adding native API support, and I don’t have the details on how it all works, but clearly once you start making native calls there are going to be differences in how they are called because no two platforms are identical. One of the top feature requests for AIR 1.0 was native API integration, so this is definitely something people want.

The key point in my opinion is whether COM support makes it harder for someone to develop a cross platform application in Silverlight. I feel the answer is clearly “no”, simply avoid the COM APIs if you want a cross platform application.

You’re not forced to use the COM APIs, but if you want to provide extra functionality on Windows the COM interfaces can come in very handy for things like integration to Microsoft Office, and I look forward to seeing what people come up with using this new feature. There was, by the way, a Windows 7 only feature in Silverlight 3, the ability to use multitouch. And similarly, if you wanted to write a cross platform Silverlight app you would just avoid the multitouch library.

One of the complaints I always has about Java’s “write once run anywhere” approach was that it never took advantage of the strengths of the platform, so it felt like a second class citizen everywhere. I’m pleased to see COM support in Silverlight 4 and hope to see some Mac integration as well. So is Silverlight moving away from cross platform? I don’t think so, and they would be crazy if they did. I’m sure there were a lot of internal discussions on whether to provide this feature and they came to the conclusion that the benefits outweighed any backlash they might get.

Full source code: http://www.bluerosegames.com/BlitWriteableBitmapSample.zip

This post is partially inspired by René Schulte’s series on extending WriteableBitmap. You can see his fantastic posts here:

http://kodierer.blogspot.com/2009/11/drawing-shapes-silverlight.html

The other inspiration for this comes from efforts that I have been making with SilverSprite, an open source library to compile and run 2D XNA games in Silverlight. When rendering a lot of bitmap sprites to the screen using traditional Silverlight techniques of adding Images to the visual tree works fine for tens or even a couple of hundred of sprites, but add more than this and have them all moving around and this technique starts falling short.

There are some other issues as well, such as drawing with a tint or drawing with anything other than alpha blending. For cases such as these, I wanted to be able to offer an alternative and settled upon rendering (“blitting”) images myself to a WriteableBitmap. This functionality will make it into SilverSprite soon, but in the meantime you can take advantage of it now.

Following in René’s footsteps, I have implemented these methods as extension methods on WriteableBitmap. There are some overloads to simplify the call a bit, but they all end up calling this method:

public static void Blit(this WriteableBitmap bmp, Rect destRect, WriteableBitmap source, Rect sourceRect, Color color, BlendMode blendMode) 

Most of these parameters should be clear as to what they do. The part of the source bitmap that is specified is copied to the destination rectangle of the target bitmap. The image is scaled to fill the destination rectangle if the source and destination rectangle differ in size. The two parameters that need a bit more explanation are the color and blend mode.

The color, if not Colors.White, will tint the source image. You can specify a partially transparent color to draw with and the image will be drawn partially transparent.

The blend mode can be AlphaBlend, Additive, Subtractive, or None. AlphaBlend is what you’re used to with Silverlight, but it can be too limiting in some cases. Additive blending can be very useful. Instead of alpha blending the colors, the source and destination red, green, and blue colors are added together to get the resulting color.  Let’s consider 3 fully opaque circles, one each of red, green, and blue. With alpha blending, we get something like this:

Whichever one is drawn last ends up on top. If the circles were partially transparent, the values would be alpha blended. For additive, we get something like this:

The center is white because the red, green, and blue components are added together to make white. for subtractive we can start with a white background and draw:

This is exactly what you would get if you inverted the colors in the additive example. This makes sense because we’re subtracting color values instead of adding them, so we’re doing an inverse operation.

Finally, with blend mode None, The source pixels are copied as is to the target, and so the transparent areas of the source image are drawn overwriting the values that were there:

One place where additive blending is useful is with particles effects. Particle effects look more natural and impressive when using additive blending. Here is an example of using additive blending with particles. The particle emitter follows the mouse. The source code for this sample is included at the top of this post.

Ok so this isn’t a game development related post, but gamers and game developers are usually more interested in their hardware than the casual user so I hope this isn’t too far off base.

You’ve probably heard already that Windows 7 has an XP mode to run old software. What you may not know is that you need to have “Hardware Virtualization” on your system in order to use it. I’m going to focus on Intel here with their VT technology because honestly that’s where I’ve done my research and I don’t know much about the AMD version of hardware virtualization.

NOTE: Running Virtual PC on Windows 7 also requires Hardware Virtualization.

My research into this started because my current laptop, less that a year old, doesn’t have this capability. Along with being required for XP mode, you can also get better performance out of virtual machines if your machine supports VT. You may be surprised to hear that the top 2 bestselling laptops on Amazon right now don’t support it. The T6500 and the P7350 Core 2 Duo processors are a couple of the most popular right now and don’t have VT support.

So how do you know if your system supports VT? Well on an existing computer, you can run a tool to check. You may also have to go into your BIOS and enable it.

http://www.microsoft.com/windows/virtual-pc/support/configure-bios.aspx

Now what if you’re looking to buy a new system (let’s say hypothetically because your current system doesn’t support VT). If you’re fortunate to find the model you’re interested in at a brick and mortar store, you can check for yourself. If you’re buying online it gets a bit trickier.

I haven’t seen a listing yet for a computer online where the specs say if the system supports VT. I assume this will be coming once people start complaining about not being able to run XP mode on their brand new system. It’s easier to tell if the system doesn’t support VT, it’s harder to tell if it does.

First of all, you can look up your processor on Intel’s site and see if it supports it. They have a list of some of the more common processors here:

http://www.intel.com/products/processor/core2duo/mobile/specifications.htm

If your processor is not in the list, you can search for it in the search box at the top of that page.

Now here’s where it gets a bit tricky. Even if your processor is in the list doesn’t necessarily mean you can run VT. There also needs to be a BIOS setting to turn it on, and in some systems (specifically some Lenovo and Sony models) the BIOS doesn’t give you an option to turn on VT. So then you need to either find in the forums where someone confirms that the particular system can do VT, or you can contact the manufacturer.

Definitely when you order a new system and receive it, if VT is important to you, make sure you can enable it right away so that you can return it if necessary.

Hopefully the PC manufacturers will start to add entries to their specs concerning VT or whether the PC supports XP mode (which is the same thing, but might be easier for the user to grasp). Until then, do your homework and good luck.

This blog is about Silverlight game development, but if you’re writing managed code for your Silverlight game, why not explore some of the other options available to you as well to get maximum exposure for your game and hopefully make some money as well?

XNA Game Studio and Xbox Live Independent Games

XNA Game Studio allows you to create games for Windows, Xbox, and Zune. You write your games in C# and you can write 2D or 3D games (2D only on Zune right now). XNA doesn’t have a vector graphics library built in, so if you want to make your games more portable, stick to image based graphics.

Xbox Live Independent Games is a way for you to sell your game on Xbox. Anyone can do it, you just need to pay $99 a year for a premium subscription.

As a bit of a shameless plug, I currently have a game on Xbox called Dr. Popper, it’s a simple bubble breaker game but it’s fun even the kids enjoy it. You can download a free trial here (or buy it for a dollar):

http://marketplace.xbox.com/en-US/games/media/66acd000-77fe-1000-9115-d80258550147/

You make 70% of every sale and now games can be sold in more countries including USA, Canada, UK, Singapore, Germany, Italy, Spain, France, Japan, and Sweden. There are restrictions on the countries that can submit games as well right now, so please view the details before shelling out the $99. With this subscription you also get to playtest and peer review other people’s games for the Independent Games channel.

There are some great game development resources available on http://creators.xna.com and even if you don’t end up creating a game in XNA, it can be helpful to get an understanding of how they structure their game class. It may give you some ideas for how to structure things in Silverlight, a lot of my game tutorials came from implementing what they do in a Silverlight way.

You can now write 2D games for both XNA and Silverlight using my free SilverSprite library at http://silversprite.codeplex.com. To use it, you would have to write your game in the XNA style and then recompile for Siverlight using the SilverSprite library.

Windows Mobile Marketplace

Windows Mobile has a new marketplace coming up for 6.x phones. Think iPhone app store for Windows Mobile and it’s probably pretty close. This is just getting started so instead of jumping into a saturated market like iPhone, why don’t you become an early adopter here?

http://developer.windowsmobile.com/Marketplace.aspx

Silver Arcade

For Silverlight games, you can get more exposure for your game and hopefully make some money at http://silverarcade.com as the volume of users on the site increases. I’m one of the founders of Silver Arcade, and my partners on the site are extremely talented and we’ll be providing helpful libraries for Silverlight game developers soon.

The WriteableBitmap is one of the most interesting new features in Silverlight 3, especially for game development. I’m looking forward to the first pixel perfect collision game using this technology, one of my favorites was the classic Lemmings game. 

The Pixels array contains one integer for every pixel, and you can find the correct array element by indexing row * width + col like this:

WriteableBitmap bm = new WriteableBitmap(width, height);
bm.Pixels[row * bm.PixelWidth + col] = value;

Personally I would have liked to have seen the Pixels array be made up of unsigned integers, since all bits are used and it would have made using hex values easier. The bytes in the 4 byte integer value correspond to alpha, red, green, and blue respectively. So pretty straightforward, a SetPixel method should look like this:

void SetPixel(WriteableBitmap bm, int row, int col, byte alpha,
    byte r, byte g, byte b)

{
    int idx = row * bm.PixelWidth + col;
    bm.Pixels[idx] = (alpha << 24) | (r << 16) | (g << 8) | b;
}

Unfortunately there is a problem with this. This would be fine for ARGB32 format, but what the Pixels array uses is Premultiplied ARGB32. This means that if you specify an alpha value other than 255 (fully opaque), the other 3 values (red, green, and blue) need to be scaled based on the alpha value. A fixed version could look something like this:

void SetPixel(WriteableBitmap bm, int row, int col, byte alpha,
    byte r, byte g, byte b)
{
    int idx = row * bm.PixelWidth + col;
    byte r1 = (byte)(r * (alpha / 255d));
    byte g1 = (byte)(g * (alpha / 255d));
    byte b1 = (byte)(b * (alpha / 255d));
    bm.Pixels[idx] = (alpha << 24) | (r1 << 16) | (g1 << 8) | b1;
}

I assume that this format is more easily consumable for display. I spent a few hours figuring this out so hopefully you won’t have to struggle with it.

Pardon the pun, but Behaviors in Silverlight 3 have made me rethink game development in Silverlight and if you’re not looking at Behaviors you should be. I’ll be updating my old game tutorial posts building an asteroids game to use behaviors and I’ll provide full source so that you’ll be able to easily use these Behaviors in your own games.

I recommend you look at this video that convinced me this is the way to go:

http://www.microsoft.com/video/en/us/details/f8a1c6a2-0fc4-474e-8e7f-c66fc7e7952a

As a consequence of this, I’m going to leave my old blog for posterity at http://www.bluerosegames.com/silverlight-games-101 and everything here will be new material.