Overview / Introduction to our work in Silverlight Developing with the Silverlight 2 Framework...
-
Upload
christian-fowlkes -
Category
Documents
-
view
215 -
download
0
Transcript of Overview / Introduction to our work in Silverlight Developing with the Silverlight 2 Framework...
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.