Anatomy of a Silverlight Game: Avoid Common Mistakes When Building Online Games

nikola — Thu, 05 Feb 2009 11:04:00 GMT

Last week I created a document that incorporates my experiences developing the Shock Silverlight online game so far.

The document discusses the basics of online games in Silverlight and has a lot of practical examples (code) and a working project that you can use to build your own game.

Don't make the mistakes I did! Happy coding!

Open Document: Anatomy of a Silverlight Game.docx

Download Source Code Project

Play Sample Game

Here are the abstract and contents of the doc:

Abstract:

Typical online games have a start screen, levels, storyline, transitions, high scores, chat, and other features that can take significant amount of time to develop.

There are challenges when building online games, such as full screen support and scaling; speed optimization; animations; real-time calculations.

Learn how to develop compelling Silverlight games faster, by using a base framework for the common game elements outlined above.

Contents:

1. Introduction: Why Care About the “Details”?

2. Components of an Online Game

3. Screen Layout

Visual Layers that Make Up Your Game

Game Interface Layer

In-game Controls Layer

Sounds Layer

Start Screen Layer

Main Screen Popup Controls Layer

4. Silverlight Game Internals

The Game Loop

Some Classes That You’ll Likely Use in Every Game

Returning from Full Screen to Embedded Mode

Network Speed Optimizations

Happy Reading!

Create Your Own Silverlight HD Video Tutorial: From Video File to Working Silverlight Streaming Application

nikola — Sat, 17 May 2008 02:51:00 GMT

In This Tutorial

· Learn how to process video file with the Expression Encoder to prepare it for Silverlight Streaming Service

· Configure Expression Encoder Application output to work with Silverlight Streaming

Step1: Preparing Video in Expression Encoder

Download the trial from here: http://www.microsoft.com/downloads/details.aspx?FamilyId=A04DCC8C-9DB7-41CB-A27C-08CBEB0A01BA&displaylang=en

Do this:

· Click File | Import and open your video

· Select Streaming Broadband profile or another profile you may like.

I selected Streaming Broadband and then customized the bit rate and resolution to my liking.

Note: the file size must be less than 105 MB currently to work with Silverlight Streaming

· Click Output on the top-right part of the screen

· Choose a picture to be shown before the video is loaded from the Thumbnail section

· In Job Output, select a template – this will be your output application

I also unchecked Cue Video Page on load and Automatically start video when cued

· Click the Encode button on the bottom-left part of the screen

o After encoding is done, your application should load in the default browser!

Step2: Configure Application for Silverlight Streaming

· Find the output directory of the application, using the Output tab, then Job Output – look at the Directory box

· Create a manifest.xml in the output directory (folder), containing this:

<loadFunction>StartWithParent</loadFunction>

<js>MicrosoftAjax.js</js>

<js>SilverlightControl.js</js>

<js>SilverlightMedia.js</js>

<js>ExpressionPlayer.js</js>

<js>PlayerStrings.js</js>

<js>player.js</js>

<js>StartPlayer.js</js>

</jsOrder>

</SilverlightApp>

· Zip all files from the output folder, except for Default.html and Silverlight.js

· Upload the .zip file on your account at http://silverlight.live.com

You’re done!

Tips and Tricks

· If you want to update application settings (e.g. change the player background color) from within Expression Encoder, there is no need to encode the stream again:

o Click the Encode tab, then on Video select Source Profile (this will copy the un-encoded video in the application output folder)

o After the video is copied and the settings updated, add only the .js and .xaml files to the original application .zip file

· After uploading the application to http://silverlight.live.com you can customize it in-place by clicking on Edit next to the Application Manifest text