 |
Web Development »
Silverlight »
General
Intermediate
License: The BSD License
SilverStunts - a data driven game in SilverLightBy Antonin HildebrandThe article discusses concepts of data driven web games. An example game 'SilverStunts' is presented and described in more technical details. |
C# (C# 3.0), Javascript, XML, CSS, HTML, XHTML, Windows (Win2K, WinXP, Vista), .NET (.NET 3.5), Visual Studio (VS2008), XAML, Dev
|
||||||||
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
Making games is a great challenge and fun. Making web games is even more challenging for me. I have been always looking for new technologies and game concepts on the web. The release of SilverLight 1.1 Alpha at MIX'07 conference in April 2007 was a great opportunity to check this new platform and (possibly) push forward a game development on the web. At that time Microsoft had also released tools for SilverLight development: Visual Studio 2008 codename "Orcas" Beta 1 with Tools for Silverlight. I have downloaded the tools and spent several weekends working on a SilverLight game prototype to try some concepts on the new platform.
This article is divided into two parts:
The first part may be interesting for general audience interested in SilverLight, games and web trends. No previous SilverLight or programming background is needed.
The second part may be useful for programmers going to implement a game in SilverLight. The code may be used as a skeleton application for a new game project. It contains a novel aproach how to embed IronPython scripting and binding it to game objects. The second part expects C#, HTML and javascript background and reader to be familiar with SilverLight concepts and tools. Good introductory article may be Silverlight 1.1 Fun and Games or other articles in Silverlight section of CodeProject site.
A note just to be clear: Every notice about Silverlight is about version 1.1 (recently renamed to 2.0) which includes promising features for game developers.
Browser is becoming solid application platform and many desktop applications tend to move on the web as web technologies are becoming more mature and broadband connectivity is cheaper. Interest about Web2.0 in last few years is about desktop application migration and new possibilites rising on the web (like sharing, collaboration, web services, data clouds and accesibility). And what about games? Are they ready to move to the web?
I think every technology making the web more rich platform may cause game development migration. At least some class of games which can benefit from new features. Let's see what features does SilverLight offer to game developers ...
SilverLight PROs:
SilverLight CONs:
A computer game usually contains:
First bullet is obvious and everybody understands it as a piece of data (i.e. zipped folder with images). Second bullet is more tricky. Game logic is a code, but can be also seen as a data. For example if a game logic is implemented as a script and run dynamically using some scriting engine. A script source is just a text, can be downloaded and manipulated like a data. So, let's count scripts into the game data. Third bullet is often called "a game engine". A game engine is code which is responsible for running game content. In other words a game engine is driving game data (including scripts).
Data driven game is a game with clear separation of game data and game engine. This is a very strong concept, but it is usually not very easy to achieve it. In the next sections I'm going to present motivation why you should care about and how it is related to SilverLight.
When you think a little about it you may recognize some benefits of the data driven design:
But there may be also some drawbacks:
Microsoft does not bring SilverLight for game developers in the first place. Microsoft is offering SilverLight as a general platform for rich web applications. Fortunately, users of today's web applications strongly demand bells & whistles from desktop world. Microsoft is pushed to satisfy these demands in this new platform. That is good for games, "rich" means a shiny, faster and more sophisticated platform for games. In effect it means that data driven design becomes more viable in SilverLight and that is an opportunity to move on the edge and create stunning things.
I strongly believe it is possible to implement powerfull data driven 2D game engine in SilverLight. Silverlight contains two key technologies:
Going this way helps also with tools and portability. Microsoft Expression Studio is offering great foundation of tools for XAML authoring. Microsoft Visual Studio has been a daily bread for many game developers during past years. And what is new, Visual Studio can be turned into custom game editor using Visual Studio Extensibility (Shell). These tools are Widnows based, but their target platforms may be desktop Windows (WPF+.NET), Web (SilverLight) or XBox (XNA). This may open interesting chances to create cross-platform games more easily.
The web is strong in accesibility and collaboration. It is not needed to use whole Microsoft's infrastructure to create game data. We can build a game editor directly in the SilverLight and host it on the web for distributed content creation and customization by the crowd. The web community is creative and may be eager to participate on the game data "in the cloud". This enables new models for content creation and managing game life cycle.
And this can also enable new models for game marketing and profit generation. Web gaming and entertainment is significant part of web trends. For example, a novel approach in this field has Kongregate and I can imagine they will open SilverLight section for game creators and players soon. But this discussion is beyond scope of this article, let's see example implementation of data driven game in SilverLight ...
SilverStunts is a simple 2D physics-driven game prototype similar to Elastomania. I was working on it during some weekends of May 2007. My goal was to learn the SilverLight a bit and evaluate it by creating a simple web game.
I've decided to use 2D Physics engine by Chris Cavanagh and ported it to SilverLight back in May. This article isn't about best physics engine for SilverLight. I haven't updated it, although Chris had ported his engine to SilverLight later in May. And as of today (December 2007) I would probably use Farseer Physics Engine for a new project. Physics engines are quite competitive these days and we can expect more to pop when final SilverLight 2.0 is released.
You can see live demo at http://silverstunts.com/cp1/index.html.
The site requires SilverLight 1.1 (Alpha Refresh) and works best with Firefox (IE eats some keyboard shortcuts).
Please folow instructions on the page if you encounter any problems.
Assuming you have SilverLight 1.1 Alpha Refresh (September) runtime installed on your computer. To run the game in debug mode, please download source code and unzip archive somewhere on your local disk (say C:\SilverStunts). Visual Studio project (C:\SilverStunts\game\SilverStunts.sln) works for Visual Studio 2008 Professional (or Beta2). It should also work for Express Edition of Visual Studio 2008 (not tested). You should also have Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 installed on your computer.
The project is for configured ASP.NET Development Server. We need real web server, because SilverLight in latest version has restriction for downloading local files using downloader object. Before you first run the website in debug mode, please take care to set Web Site setting (right click to C:\SilverStunts\site in Solution Explorer -> Property Pages).
Not you can put breakpoint somewhere (i.e. Page.xaml.cs into GameTick method) and hit F5 for debugging. The page will open in your default web browser.
Sources are divided into 3 projects:
Note: due to Python scripting I need DLLs to be located in the root of web site. The problem is that Visual Studio build system always places them into ClientBin and I didn't find out any way how to reconfigure it. I ended up with URL rewriter which is properly configured in site's Web.config. See comments for more details.
Here we will discuss some parts of the project I find interesting.
This is the part I'm quite proud of in this project. Embedding IronPython is not very straightforward in the current version. You have to create custom Platform Adaptation Layer (PAL) as is described in this article. Back in May at the time I was investigating possibilites there were no resources on the web talking about these issues.
I have found another way. Very tricky, but it works. The idea is to boot Python subsystem by starting python script from default XAML page. Then inside Python script in 'Loaded' event we can expose .NET functionality and load the SilverStunts assembly dynamically. After then create and init the main page the same way it would be called by SilverLight runtime from XAML page pointing to C# assembly.
Page.xaml contains two lines to run in 'python mode':
<x:Code Source="page.py" Type="text/ironpython" /> <Canvas x:Name="loader" Loaded="onLoaded" />
You can look at Python bootstrapper in page.py:
# this is python code driving our silverlight control # it acts as a scripting DLR bootstrapper (I was unable to intialize python scripting engine from managed code) # we load managed assembly and route all relevant actions to it import sys, clr SilverStunts = clr.LoadAssemblyByName("SilverStunts, Version=1.0.0.0") #################################################################### # class suitable for output redirect class Redirect: def __init__(self, kind): self.method = SilverStunts.SilverStunts.Page.Current.PrintConsole self.kind = kind def write(self, s): self.method(s, self.kind) #################################################################### def onLoaded(sender, args): # bootstrap page global page page = SilverStunts.CreateInstance("SilverStunts.Page") page.Init(sender.Parent) # redirect standard outputs sys.stdout = Redirect(SilverStunts.SilverStunts.Page.ConsoleOutputKind.Output) sys.stderr = Redirect(SilverStunts.SilverStunts.Page.ConsoleOutputKind.Error)
Note: Redirect magic is here to redirect outputs from python scripting engine into my web-based console.
I have implemented a little wrapper around Microsoft.Scripting.Hosting.ScriptEngine in Shell.cs. You can see there specific details of initializing scripting module and executing Python expressions.
For example calling tick event in level script boils down to:
private delegate bool TickDelegate(int tick, int elapsed);
private TickDelegate tickDelegate;
// initialization
public void InitLevel(...)
{
...
// wire dynamically loaded python script with tickDelegate
tickDelegate = shell.Engine.EvaluateAs<TickDelegate>("tick", shell.Module);
...
}
// tick event
public void Tick(int tick, int elapsed)
{
tickDelegate(tick, elapsed); // call into dynamically loaded python script
}
In SilverLight you don't get exclusive thread to run your code. The execution thread is borowed from browser. That means when you execute a long running job, the browser may become unresponsive. It is important to return control to the browser as soon as possible.
Your code is called via some event from browser or SilverLight runtime. First chance how to subscribe to events is XAML page initialization event. There you have a chance to subscribe to timers. You can subscribe to HTML Timer or XAML Storyboard. For a game loop the XAML Storyboard is the preferred way. I use similar approach as is it described in A Better Game Loop article. My implementation is in the Timer class.
I run GameTick at speed 60FPS, but rendering is done at half speed.
public void GameTick(TimeSpan timeElapsed)
{
// this game loop should run at 60FPS
tick++;
game.ProcessInputs(keyboard.keys);
game.Simulate(); // here is simulated physics
level.Tick(tick, (int)timeElapsed.TotalMilliseconds); // here is executed level script
// throttle rendering to half speed (30FPS is OK for visuals)
if (tick % 2 == 0)
{
level.UpdateVisuals();
game.UpdateScrolling();
renderTick++;
}
// this is ugly, but who cares ...
HandleContinueMessage();
}
When implementing scripting subsystem I wanted script to be the first class citizen in the system. There is a problem with scripting system to keep track what is going inside the scripting box and keep game state updated accordingly. For example: in SilverStunts you have interactive console and you can type and execute margaret = Circle(185, 155, 35) whenever during a game session. This will create a new entity called margaret in Python subsystem. Ok, it is a Python variable, but it has to have some shadow in the game engine and in the renderer to be visible on the screen. Managed C# game core must be notified, that a new entity was created and get a chance to register it in the system. That is why I want to distinguish between Entities, Visuals and plain objects.
So, entities are top level objects living in C# and visible from script. When a new entity is created from a script we get notified by code entering an entity's constructor. So, possible scenarios are:
You can examine entities implementation in the Entities subfolder of SilverStunts project.
And what about visuals?
I have implemented simple templating system for visuals. Visual templates are located in Visuals.xml and one template may look like this:
...
<Visual Type="CircleParticle">
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform X="{CenterOffset.X}" Y="{CenterOffset.Y}"/>
<TranslateTransform X="{Curr.X}" Y="{Curr.Y}"/>
</TransformGroup>
</Canvas.RenderTransform>
<Ellipse Width="{Diameter}" Height="{Diameter}" Fill="Blue" RenderTransformOrigin="0.5, 0.5"/>
</Visual>
...
This is a piece of XAML extended by binding properties (see them in curly brackets). These are bindings to Plain Object's properties. This XML is loaded as a data on startup and is parsed. Curly brackets are transformed into bindings table (see Bindings class). When a new entity is created some template is assigned to it and a new visual is created based on that template. During gameplay Plain Object's properties will be animated (for example physics engine alters object's position). Visual is able to update Canvas using new values from Plain Object's properties. This is implemented using .NET reflection and code can be found in Visual.cs:
// binding between plain object (source) and visual's content (target)
class Binding
{
int id;
string attribute;
string field;
public Binding(int id, string attribute, string field)
{
this.id = id;
this.attribute = attribute;
this.field = field;
}
public object GetValue(Object source)
{
BindingFlags f = BindingFlags.IgnoreCase | BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public;
string[] names = field.Split('.');
Object value = source;
for (int i = 0; i < names.Length; i++)
{
Type st = value.GetType();
value = st.InvokeMember("get_" + names[i], f | BindingFlags.InvokeMethod, null, value, new object[] { });
}
return value;
}
public void SetValue(Object target, Object value)
{
BindingFlags f = BindingFlags.IgnoreCase | BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Public;
Type tt = target.GetType();
tt.InvokeMember("set_" + attribute, f | BindingFlags.InvokeMethod, null, target, new object[] { value });
}
public void Update(Canvas content, Object source)
{
Object target = content.FindName(id.ToString());
Object value = GetValue(source);
SetValue(target, value);
}
}
Scrolling is achieved using clipping Canvas. Clipping canvas hides all beyond it's bounding rectangle. Implementation is in ClipCanvas class.
Here is the Game.xaml which defines layout of game scroller using ClipCanvas:
<ss:ClipCanvas x:Name="viewport"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ss="clr-namespace:SilverStunts;assembly=SilverStunts.dll"
Width="1000" Height="600"
Background="#EEEEEE"
>
<Canvas x:Name="gui" >
<!-- here will be inserted game UI elements -->
</Canvas>
<!-- scrolling canvas for game and editor -->
<Canvas x:Name="scroller">
<Canvas x:Name="background">
<!-- here will be inserted background xaml -->
</Canvas>
<Canvas x:Name="world">
<!-- here will be inserted game entities -->
</Canvas>
<Canvas x:Name="foreground">
<!-- here will be inserted foreground xaml -->
</Canvas>
<Canvas x:Name="workspace">
<!-- here will be inserted editor UI elements (gizmos, etc) -->
</Canvas>
</Canvas>
<Canvas Visibility="Collapsed" x:Name="grid" Opacity="0.1" Width="1000" Height="600">
<Canvas.Background>
<!-- SilverLight 1.1ALPHA does not support TileMode property on ImageBrush => need to improvise using image -->
<ImageBrush ImageSource="images/grid.png" />
</Canvas.Background>
</Canvas>
</ss:ClipCanvas>
Scrolling is done applying translation to Canvas named "scroller". You can see the code in Page.xaml.cs in UpdateScrolling method:
TranslateTransform tt = new TranslateTransform();
tt.X = -(cameraX - 500);
tt.Y = -(cameraY - 400);
scroller.RenderTransform = tt;
Note: We have to apply a negative (inverse) camera transformation, because we are moving with the world instead of viewport.
In-game editor is pretty neat. You can get into edit mode by pressing SPACE. You can click on object and it's edit gizmo is displayed (as a gray rectangle). Gizmos have some handles and you can tweak object properties using handles. Of course you can do multiselection and move objects around, copy&paste them or delete them. Changes made to the level visually are reflected into the script editor (see Entities tab). Changes from the script editor are reflected to the game.
Editor is implemented in Editor.cs. Gizmos are implemented in Gizmo.xaml.cs. Each gizmo has to implement this interface:
public interface IGizmo
{
void Destroy();
bool HitTest(System.Windows.Input.MouseEventArgs e);
void HandleMouseLeftButtonDown(object sender, System.Windows.Input.MouseEventArgs e);
void HandleMouseLeftButtonUp(object sender, System.Windows.Input.MouseEventArgs e);
void HandleMouseMove(object sender, System.Windows.Input.MouseEventArgs e);
void Update();
}
Editor is routing mouse events into Gizmos via this interface and gizmos are responsible for affecting object's properties.
SilverLight 1.1 is still in alpha so I don't want to do a strict judgement. Making the game and learning SilverLight was a great fun for me. From this experience, I can say that SilverLight is a rich runtime platform and definitely suitable for casual games. In this article I wanted to present that unique SilverLight features like DRL and WPF are great helpers when implementing data driven game engine. I believe in future of SilverLight development and fast acceptation by the end users. Simply I'm fan of SilverLight and the engineering team behind.
Feel free to use my code as a startup skeleton for your game project. You can jump in right now.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 31 Dec 2007 Editor: Genevieve Sovereign |
Copyright 2007 by Antonin Hildebrand Everything else Copyright © CodeProject, 1999-2009 Web22 | Advertise on the Code Project |
