SpriteHand
Module Border
  TOP 10 LIST: Silverlight for Games
Module Border
Location: BlogsAndy's Blog    
Posted by: host 11/17/2009 8:21 AM

While most Microsoft developers are focused on PDC 2009 this week, my travels took a different direction – visiting our Neighbors to the North to present a session at the Montreal International Game Summit. This conference brings together some of the best game developers in the world, talking about everything from marketing to networked physics.

I presented a session on game development with Silverlight , and I was excited to see a great turnout for the talk. My session was titled “Top 10 Reasons Why Silverlight is Great for Games” and I thought I'd share my Top 10 list here on my blog. So here goes…

ANDY’S TOP 10 LIST
WHY SILVERLIGHT IS GREAT FOR GAMES

10. Vector Graphics

Ideally, a Silverlight game uses XAML elements which are Vector based – primitives such as Rectangle, Ellipse, and Path. These elements typically provide a much smaller download size than raster graphics, and can be scaled without loss of clarity or pixilation. We can also do some really cool Camera effects with Vector Graphics...

DEMO: Falling Rag Doll. This physics demo contains only Vector graphics. Click and hold on the RagDoll so that he stays stationary and note that the “camera” zooms in. Notice that all vector graphics keep their clarity when zoomed.

9. Audio Support

We can use the MediaElement to provide mixed sound. For example, imagine an Asteroids game where a laser sound is played every time the user presses the fire key. We can mix together each instance of the fire effect by using multiple MediaElements – Silverlight will buffer these for us.

Silverlight 3 also supports the MediaStreamSource class, which allows direct access to a media stream so you can create sound at runtime (for example, voice synthesis).

DEMO: Silverlight Rocks.  Try this asteroids game out and use Ctrl to fire your lasers. Notice the mixing of MediaElement audio for each fire of the laser. The source code is available here.

8. Video Support

Silverlight 3 supports MPEG-4 (H.264) video as well as WMV format. And, it can use adaptive streaming via Smooth Streaming and Live Smooth Streaming. These technologies will switch a client’s bitrate based on Network and CPU Conditions, in real time.

Expression Encoder can be used to encode video for use in Silverlight – and includes the ability to add metadata and generate Silverlight video players from templates. These player templates can be customized in Expression Blend.

DEMO: Big Buck Bunny

7. Expression Blend

Blend is the design tool of choice for creating XAML. It includes a full toolset for creating vector graphics, and when those tools don’t do the trick, you can import from PhotoShop, Illustrator, and Expression Design. You can also perform basic coding tasks in Blend (although Visual Studio is the tool of choice for coding and debugging Silverlight).

Blend also includes supports for States, Behaviors, StoryBoards, and Data Binding (some of these appear later on in the Top 10 List J)

6. StoryBoard Animations

Using StoryBoard animations, we can quickly create keyframe based animation in Expression Blend. Blend also includes a keyspline editor and easing functions which allow us to customize the physics of each keyframe.

StoryBoard animations won’t work in many game scenarios. For example, a typical 2D action game where the player controls a character would have limited use for StoryBoards – this is because it would be too expensive to continually create StoryBoard animations as the user changes directions, fires, etc. But in these cases, StoryBoards are still useful for expressive type animations that are not affected by the environment.

Consider this simple game - Sort the Foobars.  This physics game uses a classic game loop approach for most animation. But it also uses StoryBoards to animate the Foobars’ facial expressions when they collide with an object.

5. Perspective 3D

While Silverlight does not yet support true 3D, we can create some pretty cool effects using the Perspective Transform. This effect allows us to position 2D elements in 3D space.

DEMO: Perspective 3D Animation with StoryBoard

4. Bitmap API

Using the WriteableBitmap class, we can access and manipulate individual pixels to create custom effects, and also copy any XAML element into an array of pixels for manipulation.

Further Reading: Bill Reiss on Blitting and Blending

3. Pixel Shaders

Pixel Shaders allow real-time pixel manipulation of UI Elements. Blur and DropShadow effects are included out of the box, but we can create custom Pixel Shaders using High Level Shader Language. I like to use Walt Ritscher’s Shazaam Tool to code and edit HLSL, and the Pixel Shader Effects Library on Codeplex is a great collection of shaders to start with.

Further Reading: Pixel Shaders and Effects

2. GPU Acceleration

GPU Acceleration allows Silverlight applications to use the Video card to render elements to the screen, instead of the default software renderer. This feature uses DirectX under Windows and OpenGL on the Mac. In most situations you will see a huge performance increase – however in rare circumstances, such as low end Netbooks, GPU Acceleration can actually slow down performance. So it’s best to keep track of frame rate to check what experience you user may be having!

Further Reading: GPU Acceleration

1. Behaviors

Behaviors win the #1 spot in my Top 10 countdown! By adding Behaviors at design time, we can inject logic into elements at runtime. This allows a clean separation between code and design. And Blend has great support for Behaviors – they are available in the Asset Library, can be dragged onto an element on the Artboard, and can expose properties in Blend’s Property panel. With a properly coded set of Behaviors, Blend can serve as a complete level designer for a game.

Video: Physics Behaviors

Video: Creating Behaviors

Demo: Physics Helper Behaviors

Permalink |  Trackback

Comments (1)   Add Comment
Re: TOP 10 LIST: Silverlight for Games    By Anonymous on 1/6/2010 7:03 PM
Flash is better!


Title:
Comment:
Add Comment   Cancel 
Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border

TALKING RAGDOLL
This Windows Phone 7 App was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



DROPPYPOP
This Windows Phone 7 game was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine.
DEMO

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight 2, the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight 2.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight 2.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2013 andy.beaulieu.com - Login