Zamboozal Silverlight 1.0 Launches : Plus Hosting Silverlight Games with .ASP.NET 2.0 MasterPages

Excuse me for being a bit nostalgic, but tomorrow is my birthday. Actually, since my brother Jeff and I are twins, it is both our birthday’s. Anyhow, nearly 20 years ago Jeff and I created our first real "finished" and compiled object code game (we had made many games in various BASIC languages for many years prior) named Zamboozal Poker Dice.


 

Jeff and I were always big fans of a certain "dice" game that had been around for centuries, but had been branded by Milton Bradly i nthe early 20th century. However, at the time we felt we could do it one better. So we aded some new options likeone Pair, two pair, and Blackjack and bonuses.

So, when I started building a my first "real" game in Silverlight, I decided to take inspiration from this old game. Sure, it is simply a recreation of an existing old game, but for a short two week development cycle while I was trying to learn the intricacies of a new language and platform, it seemed like a good idea. So, in all it’s basic glory, here is Zamboozal Silverlight

Right off the bat you will notice that a many things have changed, while a few things have stayed the same. First, I kept our original title screen. Even though it is amazingly bad, it fits the game perfectly. However, since I wanted to get this game finished, I dropped some of special effects from the original game. I figured that those would be well used as examples in other games that I build down the line in my Silverlight development.

To be honest, Zamboozal Silverlight does not really tax Silverlight’s animation features. It’s really just a tech demo of how I might build a game in the future. While it might not look like much at first, under the covers I tackled the following problems (all of which might appear as individual tutorials in the coming weeks)

  • Creating a game loop interval
  • Creating a simple game state machine
  • Loading and displaying bitmap images
  • Loading and playing sounds
  • Managing dynamic colors in code
  • Creating and a managing multiple custom controls in code.
  • Creating custom events and event listeners
  • Implementing a subscriber design pattern
  • Generating random numbers for multiple class objects

For me the above was enough for a first game. My next step is to create a Flash version based on the class structure, sounds and graphics used for this game and show the differences in the code.

OK, now to the small "tutorial" for this entry. Embedding Silverlight apps in ASP.NET with MasterPages.

When I initially tried to launch this game and its predecessor "Guess The Number", I was confounded because while the Silverlight app showed-up perfectly in a .HTML page, in and ASP.NET 2.0 page with a MasterPage, it would come-up as complete BLANK. For ASP.NET 3.5 there is a Silverlight Control you can use to embed, but for 2.0 you are left-up to the simple object embed. However, the default embed supplied by Visual Studio when you build your Silverlight app will not work in a MasterPage. Here is an example:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="DiceGame.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

 

The above looks fine and will display in HTML, but as-is it will not display anything in an ASP.NET 2.0 page with a MasterPage. However, the fix is quite simple,but not documented any place I could find. To fix the display problem, you must explicitly state the height and width of your Silverlight app, and get rid of the width="100%" height="100%. Here is what I did:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="500" height="500">
<param name="source" value="DiceGame.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

 

That’s it. A simple fix to a very frustrating problem.

0saves
If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.