Silverlight as a Gaming PlatformJoel NeubeckDirector of TechnologyTerralever

Agenda

Overview / Introduction to our work in SilverlightDeveloping with the Silverlight 2 Framework

Design of the Concept / StoryboardsArchitecture Game Logic

Scrolling Game BoardPlayer Movement

Collision DetectionMedia - Animation / Sounds

Tools and Techniques

Why Silverlight 2?

Why Silverlight 2

Compelling Cross-Platform User ExperienceFlexible object-oriented model

Fully managed code to improve encapsulation and centralization

Declarative presentation language (Xaml)Role specific toolsRapid application development

Silverlight Games

Tunnel Trouble

Chris HillLead Interactive DesignerTerralever

demo

Architecture

design

Design Process

Create level treatments and scriptSketch and storyboard main game element

Character, Prop, Backgrounds, Levels…Illustrate and Animate game elementsDesign Game screen

Intro, Level Chooser, Game Won, Game Lost

Storyboard - Illustration

Tools we used

Visual Studio 2008Expression Design 1.0Expression Blend 2Adobe IllustratorFlash MXTileStudioWacom Tablets

Initialization Architecture

Initialization Architecture Load Sequence

Users loads “Page.xaml” from

Launcher.xap

User downloads our “Intro.xap”•Using reflection we load Assembly

Begin downloading

our “Game.xap”

Display “MiniClip”

intro

Display our “loading”

screen

Load our “Main.xaml” into

“Page.xaml”

Initialization Architecture XAP / Assembly Parts

Launcher.xap (<140k)

AppManifest.xmlLauncher.dllSystem.Xml.Linq.dll (123k)

Intro.xap (<50k)AppManifest.xmlIntro.dll

Audio\miniS1.mp3Audio\miniS2.mp3Images\minilogoGlow.png

Game.xap (<4mb)AppManifest.xmlGame.dll

Screens….Tiles..Sounds…

Xap Loaded

void Page_Loaded(object sender, RoutedEventArgse){ LayoutRoot.Children.Add(_preLoader); Uri addressUri = new Uri("ClientBin/MiniclipIdent.xap", UriKind.Relative);

System.Net.WebClient wc = new System.Net.WebClient(); wc.BaseAddress = baseUri; wc.OpenReadCompleted += new OpenReadCompletedEventHandler(IdentDownloaded); wc.OpenReadAsync(addressUri); . . . }

Assembly Part Loaded

void IdentDownloaded(object sender, System.Net.OpenReadCompletedEventArgse){. . . foreach (XElement setting in myAssemblies) { uncompressedFile = Application.GetResourceStream(sri, new Uri(setting.Attribute("Source").Value, UriKind.Relative)); AssemblyPartap = new AssemblyPart(); Assembly a = ap.Load(uncompressedFile.Stream); }}

Game LogicModel-View-Controller Pattern

ViewRenders the modelsReceives input from users and fires events to the controller.

ControllerResponding to interactions within the view and translates these inputs into actions performed by the model

ModelManages the behavior and state of an application. Encompasses all of the business logic. Notifies the view of changes

Pattern execution flow

Architecture

game logic

Game LogicBoard Controller

Instantiates our collision detectionAttaches event handlers for keyboard and board events

Board events control EVERYTHING They by acting upon the appropriate model.

Player TeleportedPaddles animatedItem picked upProjectile Deflected

Board Event Example

public void playerTeleported() { Teleport source = gameModel.getPlayer().getOnTeleport(); Teleport destination = source.getLinkedTeleport(); if (destination.getMaintainDirection()) { //reset the teleport data gameModel.getPlayer().setOnTeleport(null); //continue animating the player MovementDescriptor nextLocation = getNextDirectedLocationMultiple (gameModel.getPlayer().getDirection()); gameModel.getPlayer().setNewLocation(nextLocation); view.animatePlayerJump(nextLocation); } else view.scrollPlayerReturn(); //scroll over to the exit }

Game LogicBoard Composition

A board is a multi-dimensional map of tiles each placed at a different “z” layer.Each of our tiles is a “UserControl” that exhibit specific collision behavior

Game LogicBoard Composition

Through our use of layers, we can maximize our efficiency of collision detection by ignoring tiles that are not at the same z-index.Secondly, we can allow tiles to be stacked to maximize the reusability of tiles.

Game Logic Board Composition

To achieve tiles at multiple layers, we uses a single parent canvas with a series of sibling canvases.Each tile at the same “z” layer, is inserted into one of these canvases.

In most situations the player is located in the middle layer.

Game LogicLevels (Boards)

Our boards are defined in XML, generated by a open source tool called “TileStudio”Each board consists of a series of 40x40 tiles positioned in a grid (max 100x100 tiles).Our game “screen” is scrolling and only displays about 10 tiles across by 14 tiles high

Sample TileStudio Level

Game Board Definition

private void buildBoard(object sender, GameEventArgsgea) { BoardDatanextBoard = _gameConfig.getSpecificBoard(gea.TargetLevel); //pull the definition of the board out of the assembly Stream s = this.GetType().Assembly. GetManifestResourceStream(namespacePrefix + nextBoard.filename);

string boardXml = new StreamReader(s).ReadToEnd(); gameModel = new GameDefintion(boardXml); playerScore = new PlayerStats(nextBoard); view.Board = gameModel; collider = new Collisions(gameModel);}

Game LogicModels

Each of our tiles has a corresponding Model which maintains its logical state.

Position (x,y,z), Rotation, Orientation…Each model exposes methods to calculate the appropriate reaction to game events.

Game Logic

scrolling

Game LogicScrolling Game Board

When the game begins, our game board immediately renders each tile for that level, setting each tiles visibility to collapsed. We divide our level into a series of screens; each screen is comprised of 10x14 tiles.

A timer begins (Game tick) which will be used to control tile visibility.

Game LogicScrolling Game Board

Based on the position of the player, we visualize a screen of tiles one tile larger then our screen dimensions.

Game LogicPlayer Movement

The player is always centered on the screen.

To give the perception that the player is moving, the entire board animates in opposite direction to the player.

Keyboard mappingsSpace bar – Fires a projectileCtrl – Activates a tile (player picks up a prop)Left, Right, Up and Down – Player moves

Game LogicScrolling Game Board

Once per game tick, we evaluate if a new screen of tiles need to be visualized based on the movement of the player.

Game LogicProjectile

When the gun is fired, the scrolling board follows the projectile to its destination, upon impact (stick or deflection), the view animates back to the players original location

Scrolling Movement

demo

Collision Detection

Collisions occur when a player is asked to consume an adjacent tile occupied by an existing tile at its same z-layer.

Each time the appropriate movement key is pressed, a method in our board controller is fired, in turn calling a method within our collision detection class. This method checks to see if a tile at the same z-index is blocking the movement.

Collision Detection

When a player attempts to move to an adjacent tile, that tile determine the effect of the collision.

Collision Detection Map

To expedite the process of finding the next blocking tile, a generic collection is constructed that will hold a reference to each tile model within its relationship to the game board.

Through the use of polymorphism we can quickly allow each tile to determine its reaction to a collision.

Collision Grid

private List<Tile>[][] gameGrid = new List<Tile>[gameModel.getRows()][];

for (inti=0; i<gameGrid.Length; i++) { gameGrid[i] = new List<Tile>[gameModel.getColumns()]; for (intj=0; j<gameGrid[i].Length; j++) {gameGrid[i][j] = new List<Tile>(); } }

Media

Animations

Media - AnimationTime Based

Silverlight uses a property-based animation model. A model which is time based.

Silverlight can only modify the value of a property over an interval of time.

In essence, it you set the initial state, the final state, and the duration of your animation then Silverlight will calculates the frame rate.

Media - AnimationFrame-by-Frame - Stacked Frames

Using this technique a series of frames are stacked at the same X,Y. Key frames are created toggling the opacity of the current and previous frame.

Media - AnimationFrame-by-Frame - Canvas Clip

Using this technique, each frame is positioned adjacent to each other within a single canvas. A canvas clip is defined the width and height of a single frame. Key frames are created moving the canvas strip from right to left

Media - AnimationFrame-by-Frame - Canvas Clip

Media – Animation

There are numerous situations where we use a combination of Frame-By-Frame animations within a time-based animation.

Player movementFiring of ProjectileDeflection of Projectile

Tile Animation

demo

MediaSounds

All of our sounds are managed in a single sound factory (singleton).

Extracts sounds from game assembly using app.manifest and an audio xml config file This configfile defines our LeadIn / LeadOuts for sound loopsControls the muting of soundsCentralizes access to our generic sound dictionary

http://joel.neubeck.net

Blog

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.