SpriteHand
Module Border
  Silverlight Rocks!
Module Border
Location: BlogsAndy's Blog    
Posted by: host 5/18/2007 5:15 AM

 

UPDATE 10/14/2008: The source code download and demo have been updated for Silverlight 2 RTW.

As I mentioned before, I have been playing around with Silverlight 1.1 Alpha (and now Silveright 2 Beta 1) to both learn and see how well it could handle a casual game such as an asteroids type clone.

Well, check out SILVERLIGHT ROCKS! I have also made the source code available.

As far as the Silverlight Alpha, it felt very stable for me and it felt quite productive for an alpha! In addition to some issues I mentioned before, I ran into some other things:

  • The MediaElement did not want to play my MP3 sound effects created with Audacity (using either ID3v1 or ID3v2 format). So I ended up converting to .WMA and they were happy.
  • I could not get the Downloader component to work with my .WMA files (so you will likely notice an uncomfortable "pause" when playing back the first laser fire sfx). Even worse I found that IE would lock up when refreshing or navigating off the page after attempting to use the Downloader component.

THE GAME LOOP

Most games contain a central loop that gets executed for each timer tick. Inside this loop, sprites are moved, AI is performed, and collisions calculated. You might be wondering, why not use the key-based animations available in XAML? Well, it would be pretty difficult to calculate dynamic, angle-based movement for sprites using strict Storyboards. Using a main game loop gives ultimate control over what is happening per frame.

But note that there is no customary Timer Class available in Silverlight 1.1 Alpha. Instead, we can use an animation timer as described in this previous post.

HANDLING XAML ASSETS

I used Expression Design to draw out the asteroids and ship and ultimately create their XAML. You will notice that there are separate XAML files (SpaceShip.xaml, Asteroid.xaml, AsteroidBig.xaml, etc.) for each "sprite" in the game. These are added to the main Page.xaml document at run time through the several "Create" methods in Page.xaml.cs.

If you examine the Properties Window for any of these "Sprite" XAML files, you will notice that their Build Option is set to "Embedded Resource." This will cause the XAML file to be built into the Assembly (.dll), which is downloaded to the web client when the user loads the Silverlight application.

So how do these XAML assets get used at run time? If we peek at Utils.cs, we see a short helper routine called GetResource which will return the XAML string from the embedded resource by name. Note that the resource name will be in the format ProjectName.File.xaml, where ProjectName is your project name, and File.xaml is the XAML file name.

public string GetResource(string ResourceName)
{    
    string resource;

 

    using (System.IO.StreamReader reader = new System.IO.StreamReader(this.GetType().Assembly.GetManifestResourceStream(ResourceName)))

    {

        resource = reader.ReadToEnd();

    }
    return resource;

}

 

For example, to load the embedded XAML resource "SpaceShip.xaml" we would call:

string xaml = utils.GetResource("SilverlightRocks.SpaceShip.xaml");

After we have the xaml string, we can create an instance of the class and insert the object into our main document using XamlReader.Load. For example,

_asteroids[i].PathObject = XamlReader.Load(thisXaml, false) as Path;

One important note: if you name any object in your XAML file using the x:Name attribute (which Expression will often do), and you plan on using XamlReader.Load, you must also include the xaml xml namespace (xmlns) like so:

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Ship" Width="50" Height="44" Canvas.Left="350" Canvas.Top="175">

Keeping the Sprites' XAML files separate from the main Page.xaml has several advantages. It makes it easier to create multiple instances of a sprite through code; it keeps the XAML files shorter and easier to maintain; it allows editing of the separate assets through Expression Blend.

MIXING IN STORYBOARD ANIMATIONS

Although I mentioned earlier how a main Game Loop makes it easier to have ultimate control of movement and collisions, there are some animations that are better left to Storyboard animations. For example, when our ship hits an asteroid and explodes, there are three chunks of debris that float off and fade out. This kind of mundane animation - without collisions or user input - is perfect for a storyboard.

I created the explosion animation using Expression Blend, which offers easy to use Key based animation. The resulting XAML file is ExplosionDebris.xaml, and contains a storyboard animation named ShipExplode:

   

... and when the ship collides with an asteroid, we can first position the Canvas containing the explosion  ("ExplosionDebris") over the Ship's position, and then start the Storyboard animation using its Begin() method.

MIXING SOUND

Silverlight's MediaElement class supports sound mixing - all we need to do is create enough copies of each sound to mix in. You can imagine that if we only created one copy of the Laser Fire sound in memory, the sound would restart every time the user pressed "fire" and the effect would be pretty poor! So for the laser fire sound effect, we create an array of copies of the sound and then iterate through them in sequence.

As I mentioned before, I am having issues with Silverlight 1.1 Alpha when trying to place my sounds in a ZIP and use the Downloader class. While I get an HTTP 200 and can assign the Source property without error, the sounds do not play back and IE locks up when trying to refresh or navigate using history.

SUMMARY

Silverlight is a promising technology for creating casual games with easy web distribution. While I have not done any testing on the Mac, the frame rate and performance on the PC seems quite adequate for many applications --- and this is at Alpha!

Permalink |  Trackback

Comments (11)   Add Comment
Re: Silverlight Rocks!    By Anonymous on 6/2/2007 4:49 AM
Very interesting to see it works on web via Silverlight 1.1 beta with your v 0.1 program. Looking forward to see future release and next level of imprvement, Well done Andy and Cheers!... from little red dot.

Re: Silverlight Rocks!    By Anonymous on 6/9/2007 9:18 AM
Why didnt you use the arrow key for movement?
FYI sample on http://channel9.msdn.com/Showpost.aspx?postid=304500

Re: Silverlight Rocks!    By Anonymous on 6/10/2007 5:56 AM
Arrow key events work in Sivlerlight 1.0 Beta, but not in 1.1 Alpha under IE (but they do work in Firefox). This is a known bug. The demo for your link was done in 1.0 so they work OK.

HtmlTimer    By Anonymous on 8/10/2007 7:56 PM
I saw another sample Silverlight application use a class called HtmlTimer for its timer. Is this something you considered?

Re: Silverlight Rocks!    By Anonymous on 8/10/2007 9:06 PM
Sure you can try to use an HtmlTimer - in fact when I upgraded to the 1.1 Refresh I was forced into it. But there are a couple of issues. It is marked obsolete so will eventually go away. And it does not fire quite as consistently as a Storyboard. Read the post here for more info - http://www.andybeaulieu.com/Home/tabid/67/EntryID/78/Default.aspx

Re: Silverlight Rocks!    By Anonymous on 12/12/2007 11:34 AM
This XAML:







Equal following XAML:



Re: Silverlight Rocks!    By Anonymous on 2/20/2008 8:52 PM
Nice! My little brother enjoyed playing this game. What mp3 to wma converter did you use?

Re: Silverlight Rocks!    By Anonymous on 3/25/2008 1:32 PM
It Great Demo!!!

Re: Silverlight Rocks!    By Anonymous on 1/19/2010 3:48 AM
Cool* Blog Stuff ... thank you for information !

Re: Silverlight Rocks!    By Anonymous on 2/11/2010 11:04 PM
I like asteroids games and found your page. I suggest you take a look at Continuum a mmo asteroids game that is so much fun i've been playing it for the past 10 years. at www.subspacedownloads.com

Re: Silverlight Rocks!    By Anonymous on 3/15/2013 11:16 PM
I am creating an game for windows 8 phone using expression blend.So is there any way in which i can make such game


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


PHYSAMAJIG
This Windows app was created using Physics Helper XAML, and the Farseer Physics Engine.
DOWNLOAD

MORE INFO



TALKING RAGDOLL
This Windows Phone 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



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight , 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.
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 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 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 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight.
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) 2014 andy.beaulieu.com - Login
cheap Ralph Lauren shirts Ralph Lauren outlet Canada Goose jackets on sale cheap moncler jackets moncler jackets on sale moncler outlet canada goose outlet canada goose outlet canada goose outlet cheap ralph lauren shirts ralph lauren outlet ralph lauren outlet canada goose outlet canada goose outlet kanye west louis vuitton moncler outlet moncler outlet moncler outlet moncler outlet speedy louis vuitton canada goose outlet moncler outlet tiffany outlet moncler outlet speedy louis vuitton kanye west louis vuitton