Coding4Fun : gaming

Creating a Pinball Game in Silverlight: Using the Physics Helper Library + Farseer Physics

Coding4Fun — Mon, 30 Nov 2009 22:20:00 GMT

In this tutorial, we'll create a Silverlight pinball game using Behaviors, a new addition to Expression Blend 3 & Silverlight that allows you to create interactivity with little or no coding.

Below you'll find a video and step-by-step walkthrough.

Andy Beaulieu
http://www.andybeaulieu.com/

Run It: View The Demo
Code It: Download the Source

Difficulty: Intermediate
Time Required: 4 Hour
Cost: Free!
Software Needed: Microsoft Expression Blend 3 (Free Trial), Microsoft Visual Studio 2008 or Visual C# Express, Visual Studio Tools for Silverlight, Physics Helper Library. To help get setup quicker, try Web Platform Installer.

Open the video player in a new window/tab

Setup and Prerequisites

First you have to setup Physics Helper controls into Expression Blend. Follow these steps:

Download the Physics Helper ZIP file from http://physicshelper.codeplex.com/Release/ProjectReleases.aspx
Extract the ZIP file contents and dump them into a folder.
Run install.bat. (Note: this copies a few required assemblies to a folder in Blend 3.)

Getting Started & Making the Ball

Next, you create the controller and the pinball. Here's how.

Open Expression Blend 3 and create a new “Silverlight 3 Application + Website” named PinballGame.
Change your default layout container to a Canvas. You can do this in the Objects and Timeline panel by right-clicking LayoutRoot and selecting Change Layout Type/Canvas. Canvas layout containers are better for games because they allow for positioning of elements at absolute (x,y) coordinates.
Give the application a bigger default size. Select the UserControl element in the Objects and Timeline panel. Then, in the Properties panel, change the Width to 800 and the Height to 600.
Add a Physics Controller Behavior to our main game Canvas. From the Asset Panel, find the PhysicsController Behavior and drag it to the Objects and Timeline Panel. Then, drop it on the LayoutRoot Canvas.
Change a few of the PhysicsController's properties, to make it easier to use. In the Objects and Timeline Panel, select the PhysicsControllerBehavior assigned to LayoutRoot. Then, set the highlighted properties as follows in the Properties Window:
1.) Decrease the vertical gravity to 250
2.) Increase the iterations to 200. This will help with collision detection in a fast-action game.
3.) Set MousePickEnabled to true. This will allow us to manipulate objects with the mouse during development and testing.
Create a "playing field" for the pinball. To do this, draw out a Rectangle onto the artboard, just off the bottom of the user control bounds. Set the properties of the Rectangle as follows:

Name: rectPlatform
Fill: select a color of your choosing (light blue is selected below).
To make “rectPlatform” a physics element, we need to add a PhysicsObjectBehavior to it. Find the PhysicsObjectBehavior in the Assets panel and drag/drop it onto rectPlatform on the Artboard.
In the Objects and Timeline Panel, select the PhysicsObjectBehavior belonging to rectPlatform. Then in the Properties Panel, set the IsStatic property to True so that the platform will stay in place.
Next we’ll create the ball. Draw out an Ellipse near the very top of the UserControl and set the following properties:

Name: ellBall
Height: 50
Width: 50
Fill: A color of your choosing.
To make the ball a Physics Object, we need to add a PhysicsObjectBehavior to it. From the Asset Library, drag and drop a PhysicsObjectBehavior onto ellBall.
Run the project by clicking F5. The ball should fall and hit the platform. Use the mouse to manipulate the ball.

In a pinball game, the Flippers are controlled by the player and are used to move the ball up the playfield. Standard pinball games have one right and one left flipper, but many games have three or more flippers located in various locations on the playfield. We’ll create two user controls to represent the flippers – a right flipper and a left flipper – that way we can easily add as many flippers as we want to our main playfield.

In the Projects Panel, right-click the PinballGame (Silverlight) project and select Add New Item. Select UserControl and name the control LeftFlipper.xaml.
In the Objects and Timeline Panel, right-click LayoutRoot and select Change Layout Type/Canvas. This is required for the Physics Helper to work with nested User Controls.
In the Objects and Timeline Panel, select the UserControl element and set its Width and Height to 200 x 200 pixels in the Properties Panel.
Draw out a Rectangle that is about 200 x 50 pixels big, centered in the user control. Round the corners of the Rectangle.
From the main Blend menu, select Object/Path/Convert to Path. This will create a new Path element from the Rectangle primitive. Then select the Direct Selection tool from the Toolbox, which will allow you to manipulate the individual points on the Path.
Select the top, left two points on the Path and move them down so that you end up with a more “flipper like” shape:
In the Toolbox, select the Selection arrow and rotate the flipper 45 degrees so that it looks similar to this (be sure the flipper is still within the bounds of the user control):
Right-click the flipper Path and select Group Into/Canvas. Name the Canvas cnvLeftFlipper and resize it so that it surrounds the entire flipper Path. Note that you could “embellish” the cnvLeftFlipper with additional elements if you wish.
Next we’ll create a Joint so that the Flipper can rotate on an axis. We’ll need something to anchor the joint to, so first let’s add a small Static object to hold the Joint in place. Draw out a Rectangle at the upper left of the flipper and name the Rectangle rectHolder.
To add a Joint, we will need a UI element to visually represent where we want the joint created. You can use any element you want for this, but an Ellipse works pretty well. Draw out an Ellipse on top of the rectHolder.
Now we can add all of the required Physics Behaviors to the User Control.
1. From the Asset Library, drag a PhysicsObjectBehavior to the rectHolder Rectangle. Set its IsStatic property to True. Since we don’t really want to see the rectHolder in our UI, just send it to the back of the elements (Right-click, then select Order/Send to Back).
2. Drag a PhysicsObjectBehavior to the cnvLeftFlipper Canvas. Set the RestitutionCoefficent property to “0.1”. (This makes the flipper a bit more “bouncy” on collisions)
3. Drag a PhysicsJointBehavior to the Ellipse. Set the Body1 property to “cnvLeftFlipper” and the Body2 property to “rectHolder”. Set the CollisionGroup to “1” and the AngleLimitLower and AngleLimitUpper to 0 and 50 respectively. Also enable the AngleSpring:
4. Drag a PhysicsApplyTorqueBehavior to cnvLeftFlipper. We want to apply Torque when the user presses the Left arrow key, so we’ll create a Trigger for this. Select the Behavior and in the Properties Panel, click the New Trigger button.
  
  Select the PhysicsKeyTrigger type from the popup.
  
  Set the Key property for the Trigger to “Left” and the TorqueValue to -100000
Build the Project so that the LeftFlipper user control is available.
Open MainPage.xaml and drag an instance of LeftFlipper from the Asset Library onto the Artboard. Position it near the bottom of the user control and slightly to the Left.
Run the project and try the flipper with the Left arrow key.
In this step, we’ll create a copy of “LeftFlipper” to make a “RightFlipper”. In the Projects Panel, right-click LeftFlipper.xaml and select Copy. Then right-click the PinBallGame Project and select Paste.
You now have a new User Control named “Copy of LeftFlipper.xaml”. Rename this to RightFlipper.xaml. Then in the code-behind file, make sure the Class and Constructor are also renamed to “RightFlipper”.
Change to XAML view for RightFlipper.xaml and change the x:Class attribute so that it inherits from RightFlipper:
```
<UserControl 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
xmlns:i=&amp;quotclr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:pb="clr-namespace:Spritehand.PhysicsBehaviors;assembly=Spritehand.PhysicsBehaviors" 
x:Class="PinballGame.RightFlipper" 
d:DesignWidth="640" d:DesignHeight="480" Height="200" Width="200">
```
Open RightFlipper.xaml and find the pathLeftFlipper element. Rename this to pathRightFlipper. Then, rename “cnvLeftFlipper” to “cnvRightFlipper”. Rename “rectHolder” to “rectRightHolder” and position the rectHolder and joint ellipse so that they are in the correct location for the flipper:

Modify the PhysicsJointBehavior for the joint in the Objects and Timeline Panel. Change BodyOne to “cnvRightFlipper”, BodyTwo to “rectRightHolder” and change the Angle limits so they are appropriate for the opposite flipper:

Select the PhysicsApplyTorqueBehavior for cnvRightFlipper in the Objects and Timeline Panel. Change the Key property for the trigger to “Right” so that it will initiate on the Right Arrow key down. Also change the TorqueValue so that it will apply torque clockwise:
Add an instance of RightFlipper onto the MainPage.xaml and position it to the right of LeftFlipper.
Test the project by clicking F5. You can now click left and right arrows keys to manipulate the paddles.

Creating the Playfield + Scrolling

Now let’s create more of a playfield for our Pinball game and add a Camera control so that the game will scroll and always follow the pinball. Feel free to tweak the design as you wish.

Open MainPage.xaml in Expression Blend and zoom out by using Ctrl plus minus (Ctrl -).
Draw out a Path using the Pen tool for the right border. Note that you can extend above the upper bounds of the User Control. Group this into a Canvas named “cnvLeftBorder” (right click the Path and select Group Into/Canvas).
Drag a PhysicsObjectBehavior from the Asset Library onto cnvLeftBorder and set the IsStatic property to True. Also set the CollisionGroup property to “1” so that collisions will not occur between the border and the Flippers.
Repeat Steps 2 and 3 above for the right border, naming that cnvRightBorder. You should have something similar to the following:
Continue adding border controls and applying physics behaviors until you are happy with your playfield. Make the playfield completely closed in so that the ball cannot escape (except by the bottom trap of course!)
You can also add more LeftFlipper and RightFlipper controls so that the player can more easily move the ball up the playfield. Here is one example playfield design:
To enable scrolling, we can add a Camera Controller to the ball, causing the camera to follow the ball around the screen. Drag a PhysicsCameraBehavior from the Asset Library onto the ellBall element.

Creating a Kicking Target

Pinball games have lots of different types of targets – some are simple sensors which give points on contact, others are little toys that gobble up the ball for a few seconds. In this step, we’ll create a Kicking Target, which gives points when hit by the ball but also kicks the ball back in the opposite direction.

Create a new User Control named KickingTarget.
Change the LayoutRoot container to a Canvas by right-clicking and selecting Change Layout Type/Canvas.
Select the [UserControl] in the Objects and Timeline Panel and set its Width and Height to 100 x 100.
Draw out an Ellipse that is 90x90 pixels, and positioned at Left, Top 5,5 (so that it is centered in the control).
Draw out a second Ellipse that is 70x70 pixels and positioned and Left, Top 15, 15.
Group the two Ellipses into a Canvas by selecting them both in the Objects and Timeline Panel and selecting Group Into/Canvas. Name the Canvas “cnvKicker”.
Drag a PhysicsObjectBehavior from the Asset Library onto cnvKicker. Set the IsStatic and RestitutionCoefficient properties as shown below. Setting the RestitutionCoefficient above a value of 1 will make the object “kick” things back.
Build the project so that the new user control is available. Then open MainPage.xaml and add a few instance of “KickingTarget” to the page.
Run the project and try out the Kicking Targets.

Optimizing Performance

Our pinball game is looking up, but the performance could be a lot better. The startup time for the game is taking quite awhile because the Physics Helper Library is determining the outline of all of the shapes. Also, the frame rate is too low.

By default, Silverlight has a target frame rate of 60 frames per second. This is great for a lot of casual games, but Pinball requires a bit more speed. Additionally, Silverlight 3 introduces GPU Acceleration which can greatly increase the performance of our game by offloading graphics operations to the Video Card.

Open the Default.html page in the website project. This page hosts the Silverlight control and exposes the plugin parameters. Add the following parameters to the plug in to increase the default frame rate and enable GPU Acceleration for our game.

<object data="data:application/x-silverlight," type="application/x-silverlight-2" width="800" height="600"> 
<param name="source" value="ClientBin/PinballGame.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="background" value="#010141" /> 
<param name="minRuntimeVersion" value="3.0.40624.0" /> 
<param name="MaxFrameRate" value="160" /> 
<param name="EnableGPUAcceleration" value="true" /> 
<param name="EnableCacheVisualization" value="false" /> 
<param name="autoUpgrade" value="true" /> 
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&ampv=3.0.40624.0" style="text-decoration: none;"> 
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/> 
</a> 
</object>

Apply the CacheMode attribute to all elements in the game that are static. Since our pinball game’s elements are not animated, we can apply the CacheMode to each of them. (If the objects contained animations within them, then the Cache would be invalidated during animation).
```
<Rectangle x:Name="rectPlatform" CacheMode="BitmapCache" Fill="#FF8AD0C9" Height="70" Width="800" Canvas.Left="-14" Canvas.Top="2172" Opacity="0"> 
<i:Interaction.Behaviors> 
<pb:PhysicsObjectBehavior IsStatic="True"/> 
</i:Interaction.Behaviors> 
</Rectangle>
```
Now we’ll speed up the startup time by adding in a pre-calculated Point Cache. The Physics Helper Library echoes out the calculated points at runtime. Open the project in Visual Studio, and run with debugging on. In the Output Window, Find the ReadBoundaryCache method that was echoed out and Copy the entire method.
Note that the copied code can contain multiple rows of the same points. You can trim out any rows that are duplicated, for example cnvRightFlipper_1 is a copy of cnvRightFlipper, so you can remove that from the list of points.

In order to load the list of boundary outlines into the Physics Controller, we need to get a reference to the controller through code. Open up MainPage.xaml.cs and add the highlighted code:

public partial class MainPage : UserControl 
{ 
    PhysicsControllerMain _physicsController; 
    public MainPage() 
    { 
        // Required to initialize variables 
        InitializeComponent(); 
        this.Loaded += new RoutedEventHandler(MainPage_Loaded); 
    } 
    void MainPage_Loaded(object sender, RoutedEventArgs e) 
    { 
        _physicsController = LayoutRoot.GetValue( PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
        BoundaryCache.ReadBoundaryCache(_physicsController); 
    } 
}

Run the project and test the performance. Note that items that have a tint applied to them (Red, Blue, etc.) are NOT being cached and GPU accelerated.

Scoring

In this section, we’ll embellish our game with a Score.

We’ll create a Canvas that overlays our main Canvas to contain a High Score TextBlock. This is so that the Score TextBlock will not scroll with the rest of the Playfield. Open MainPage.xaml and the select LayoutRoot in the Objects and Timeline Panel. Right-click LayoutRoot and select Group Into/Canvas.
Add a new StackPanel into this outside Canvas that contains two TextBlock aligned Horizontally. The first TextBlock should contain the Text “Score:” and the second TextBlock should contain the Text “0”. Set the Font Size to a larger value, around 12 pt. Position the TextBlock at the Top, Left portion of the Canvas.

Next we’ll handle the Collision event for the Physics Controller so we can add to the score. Open MainPage.xaml.cs and add in a Property wrapper for the current score:

public int Score 
{ 
    get 
    { 
        return Convert.ToInt32(txtScore.Text); 
    } 
    set 
    { 
        txtScore.Text = value.ToString(); 
    } 
}

Handle the Collision event for the Physics Controller and increment the Score.

void MainPage_Loaded(object sender, RoutedEventArgs e) 
{ 
    _physicsController = LayoutRoot.GetValue(PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain; 
    BoundaryCache.ReadBoundaryCache(_physicsController); 
        _physicsController.Collision += new PhysicsControllerMain.CollisionHandler(_physicsController_Collision); 
} 

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("ellKicker")) 
        Score += 10; 
}

Tracking Lives

When the ball collides with the “rectPlatform” obstacle at the bottom, the ball has been lost and we should launch a new ball.

Add a new ChildWindow to the project named “LostTheBall.xaml”.
Set the “Cancel” button’s Visibility to Collapsed.
Add a TextBlock and set its Text to a message for the user stating the ball was lost.

Add code in MainPage.xaml.cs to display the dialog and reset the ball.
LostTheBall _lostTheBall;

void _physicsController_Collision(string sprite1, string sprite2) 
{ 
    if (sprite1 == "ellBall" && sprite2.StartsWith("cnvKicker")) 
    { 
        Score += 10; 
    } 

    if (_lostTheBall == null &&ampsprite1 == "ellBall" && sprite2 == "rectPlatform") 
    { 
        _lostTheBall = new LostTheBall(); 
        _lostTheBall.Closed += new EventHandler(dialog_Closed); 
        _lostTheBall.Show(); 
    } 
} 

void dialog_Closed(object sender, EventArgs e) 
{ 
    _lostTheBall = null; 
    PhysicsSprite ball = _physicsController.PhysicsObjects["ellBall"]; 
    ball.BodyObject.Position = new Vector2(460, 430); 
    }

Adding Sound Effects

We can easily add buffered sound effects using the PhysicsSoundBehavior.

In Visual Studio, Import two sound files into the project, score.wma and click.wma. Set their Build Action to Content.
Open MainPage.xaml in Expression Blend. Drag a PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Drag another PhysicsSoundBehavior to the LayoutRoot Canvas. Set the TriggerType to PhysicsCollisionTrigger and set the following properties:
Run the project.

About the Author

Andy Beaulieu is a software developer and trainer who is well versed in many Microsoft technologies including Silverlight, ASP.NET, ADO.NET and WindowsForms. Visit Andy's Blog for more fun and games with Silverlight.

Popfly game engine – open source

Coding4Fun — Thu, 27 Aug 2009 21:01:32 GMT

As popfly is getting shut down August 31st, they released the game engine under the Ms-Pl. If you used the Popfly Game Downloader we released a few weeks back to grab your games, there’s also instructions on how to crack them open and grab the data files. Which means you may be able to recreate the actual GUI for creating games!

Check it out over at Codeplex.

[via Ben Anderson]

AI with c# and LINQ

Coding4Fun — Tue, 28 Jul 2009 22:00:00 GMT

I came across this from Miguel de Icaza’s twitter feed, Christopher Park designing an AI with c# and LINQ. Currently it is a 4 part series, each is an interesting read into what exactly goes into an artificial intelligence system.

I was a bit surprised at the work that is needed to get a decent decision making AI system up and working. Christopher also has another amazing read on optimizing his game to do 30,000+ ships!

Download and Play Popfly Games Offline

Coding4Fun — Wed, 22 Jul 2009 21:59:47 GMT

With the announcement that the Popfly Game Creator will be shut down starting August 24th, we’ve published the Popfly Game Downloader, a utility to download Popfly games while the Popfly service is still running so you can play them even after the Popfly service is shut down!

Authors: Ben Anderson and Adam Nathan

Download: Popfly Game Downloader (Project Page)

Difficulty: Beginner

Time Required: 15 minutes

Cost: $0

Software Needed: .NET Framework 2.0 or higher, Silverlight 3.0 or higher

Note: This tool hasn’t been fully tested on multiple operating systems. Some games may not work properly offline.

Step 1: Download Popfly Game Downloader

Download the zip file for the Popfly Game Downloader to a directory, say on your desktop and unzip the file as shown in the figure below.

Step 2: Run Popfly Game Downloader

Next, double click “PopflyGameDownloader.exe” and click Run or “Accept” if you get a security warning to run the file.

The Popfly Game Downloader should then open as shown below.

From inside the Popfly Game Downloader, you can download any Popfly Game that has been shared, including:

Popfly games built by the community
Your personal Popfly game projects

Downloading mashups for offline use is not supported given that the mashups require connections to live services. Similarly, private games that have not been shared publicly cannot be downloaded either.

Step 4: Downloading a community game

For example purposes, let’s download the Chicken Long Jump game. To do this, in the Search text box, enter “Chicken Long Jump” and click the Go button to start the search. Click the link for the first option in the search results as shown below.

Step 4a: The Download prompt

This will take you to the game home page and, after a few seconds, you’ll notice a new yellow colored bar at the top of the page that gives you an option to download the game.

Step 4b: Downloading a Game

Click on the link and Popfly Game Downloader will begin downloading the game. You’ll be able to see detailed progress information while Popfly Game downloader builds the offline version of the game.

When it’s finished downloading, you’ll see a notice that the status message changes to Done. You can then click the link to launch a local copy of the game!

Step 5: Run your newly downloaded game

Clicking on the link will open a new browser window to a html file that includes the offline version of the Popfly game.

Step 6: Bulk downloading a user’s projects

Another handy feature that you can use to download either all of your shared projects (the project must be set to shared) or all projects built by a specific Popfly user is the Online Bulk Download feature. Switch back to the Popfly Game Downloader and click on the Online Bulk Download tab.

From here, enter the user name of Popfly user who’s games you want to download. For example, to download all of the games Adam Nathan built (http://popfly.com/users/adam/), enter “adam” in the download text box and hit enter.

This will start downloading all of the games that Adam has created. You can remove a specific game by clicking the X next to the name of the game.

Viewing the Games You’ve Downloaded

Once you’ve finished downloading all of the projects you’re interested in, you can see the list of all of the games you’ve downloaded by switching to the Offline tab Popfly Game Downloader.

Now that you’ve downloaded the games, if you switch back to the directory that you put the PopflyGameDownloader.exe in, you’ll see a folder for each of the games that you downloaded (using the format “PopflyUserName.ProjectName”).

Inside each directory is the Silverlight application for the game (the .xap file) and an index.html file that hosts the .xap file.

You can now play games like Crayon Cannon to your heart’s content :)

How does it work?

When you click the “download” link, Popfly Game Downloader goes to the game you selected and does a number of things, including:

It downloads all of the game assets (audio, images, XAML)
It dynamically builds a .xap file including all of the game assets
It also removes server-side features like the high-score and achievement services
Finally, it builds an index.html file to host the Silverlight game

Conclusion

While it’s sad that one of our favorite Microsoft services is shutting down, we can at least take solace in the fact that Popfly users can download and play with their creations long after the Popfly service is shut down.

Creating Games with Silverlight: A Simple Shooter

Coding4Fun — Tue, 21 Jul 2009 20:19:00 GMT

This article will take you through some of the steps to creating the basics for writing games with Silverlight. This is a simple shooter style game that contains some of the building blocks for games that require abilities such as vectors, collision detection, a game loop, movement, and keyboard input. Please refer to the full source code for this project for any areas of the code that are not covered in detail in this article.

Source Code: http://simpleshooter.codeplex.com/
Difficulty: Beginner/Intermediate
Time Required: 3 hours
Cost: $0
Software Needed:
- Visual Basic or Visual C# Express
- Expression Blend (optional)

Inspiration

There are a number of examples and tutorials out there to help get started creating games. You will find the basics of this game to be very similar to a Visual C# Coding4Fun article here. This article will show you how to create a shooter style game in Silverlight. My first Silverlight game experience was playing with a Asteroids style game by Bill Reiss. My usage of vectors and how to do a game loop came from great examples like his and others. There are a number of sites and blogs where you can get good info on game development with Silverlight. Here are just a few.

Basic Layout

To begin, Open Visual Studio and create a new Silverlight Application in either C# or VB.net. First, we will start with the layout of the screen. First, I added a canvas to the grid inside the Page.xaml that is created for you. I set it's background to black, and named it 'gameRoot'.

<UserControl x:Class="SimpleShooter.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
   <Grid x:Name="LayoutRoot">
        <Canvas x:Name="gameRoot" Width="500" Height="400" Background="Black" >
        </Canvas>
    </Grid>
</UserControl>

Next we will start adding controls to our project for things like game entities, and information displays. In this example. To complete layout of the game, add user controls to the progect called: Info, LivesRemaining, Score, and WaveInfo. In those controls, To begin I added basic TextBlocks to display information on the state of the game. Please note there are better ways to arrange things in a user control, beyond what I show here. I am keeping to a simple canvas and direct positioning to introduce the concept of Canvas.Top and Canvas.Left. I have now placed these controls on Page.xaml and assigned an x:Name to each. At this point, the controls have only a TextBlock in them.

<UserControl x:Class="SimpleShooter.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:SimpleShooter="clr-namespace:SimpleShooter"
    Width="500" Height="400">
    <Grid x:Name="LayoutRoot">
        <Canvas x:Name="gameRoot" Width="500" Height="400" Background="Black">
            <SimpleShooter:RemainingLives x:Name="ctlLives" Canvas.Top="380" Canvas.Left="10" />
            <SimpleShooter:Score x:Name="ctlScore" Canvas.Top="10" Canvas.Left="10" />
            <SimpleShooter:WaveInfo x:Name="ctlWaveInfo" Canvas.Left="440" Canvas.Top="10" />
            <SimpleShooter:Info x:Name="ctlInfo" Canvas.Top="10"/>
        </Canvas>
    </Grid>
</UserControl>

To finish our layout lets add a star field. To do this, we will write function to generate random numbers, and another that will randomly distribute ellipses on our base canvas. We will need to inherit from System.Security.Cryptography for this:

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();

        GenerateStarField(350);
    }

    void GenerateStarField(int numberOfStars)
    {

        for (int i = 0; i < numberOfStars; i++)
        {

            Ellipse star = new Ellipse();
            double size = GetRandInt(10, 800) * .01;
            star.Width = size;
            star.Height = size;
            star.Opacity = GetRandInt(1, 5) * .1;
            star.Fill = new SolidColorBrush(Colors.White);
            int x = GetRandInt(0, (int)Math.Round(gameRoot.Height, 0));
            int y = GetRandInt(0, (int)Math.Round(gameRoot.Width, 0));
            star.SetValue(Canvas.TopProperty, (double)x);
            star.SetValue(Canvas.LeftProperty, (double)y);
            gameRoot.Children.Add(star);
        }
    }

    public int GetRandInt(int min, int max)
    {
        Byte[] rndBytes = new Byte[10];
        RNGCryptoServiceProvider rndC = new RNGCryptoServiceProvider();
        rndC.GetBytes(rndBytes);
        int seed = BitConverter.ToInt32(rndBytes, 0);
        Random rand = new Random(seed);
        return rand.Next(min, max);
    }
}

Partial Public Class Page
    Inherits UserControl

    Public Sub New()
        InitializeComponent()
        GenerateStarField(350)
    End Sub

    Private Sub GenerateStarField(ByVal numberOfStars As Integer)

        For i As Integer = 0 To numberOfStars - 1

            Dim star As New Ellipse()
            Dim size As Double = GetRandInt(10, 800) * 0.01
            star.Width = size
            star.Height = size
            star.Opacity = GetRandInt(1, 5) * 0.1
            star.Fill = New SolidColorBrush(Colors.White)
            Dim x As Integer = GetRandInt(0, CInt(Math.Round(gameRoot.Height, 0)))
            Dim y As Integer = GetRandInt(0, CInt(Math.Round(gameRoot.Width, 0)))
            star.SetValue(Canvas.TopProperty, CDbl(x))
            star.SetValue(Canvas.LeftProperty, CDbl(y))
            gameRoot.Children.Add(star)
        Next
    End Sub

    Public Function GetRandInt(ByVal min As Integer, ByVal max As Integer) As Integer
        Dim rndBytes As [Byte]() = New [Byte](9) {}
        Dim rndC As New RNGCryptoServiceProvider()
        rndC.GetBytes(rndBytes)
        Dim seed As Integer = BitConverter.ToInt32(rndBytes, 0)
        Dim rand As New Random(seed)
        Return rand.[Next](min, max)
    End Function
End Class

We now have a function called GenerateStarField. Note that it is adding each ellipse to the 'Children' of our base gameRoot canvas, and how the Top and Left properties determine the positions of those ellipses. Now we have a basic layout of our game and a background.

Sprites and Vectors

I am not going to go in to great detail on sprites or vectors. There are a number of great resources (see other articles linked to in this post), as well as another good Coding4Fun article on this topic. We are however, going to add a class to represent a sprite and a vector to our code:

public abstract class Sprite
{
    public double Width { get; set; }
    public double Height { get; set; }
    public Vector Velocity { get; set; }
    public Canvas SpriteCanvas { get; set; }
    private Point _position;
    public Point Position
    {
        get
        {
            return _position;
        }
        set
        {
            _position = value;
            SpriteCanvas.SetValue(Canvas.TopProperty, _position.Y - (Height / 2));
            SpriteCanvas.SetValue(Canvas.LeftProperty, _position.X - (Width / 2));
        }
    }

    public Sprite(Double width, Double height, Point position)
    {
        Width = width;
        Height = height;

        SpriteCanvas = RenderSpriteCanvas();

        SpriteCanvas.Width = width;
        SpriteCanvas.Height = height;
        //NOTE: because the setter for Position uses both Height and Width, it is important this comes after they are set.
        Position = position;
    }

    public abstract Canvas RenderSpriteCanvas();

    public Canvas LoadSpriteCanvas(string xamlPath)
    {
        System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream(xamlPath);
        return (Canvas)XamlReader.Load(new System.IO.StreamReader(s).ReadToEnd());
    }

    public virtual void Update(TimeSpan elapsedTime)
    {
        Position = (Position + Velocity * elapsedTime.TotalSeconds);
    }
}

Public MustInherit Class Sprite
    Private _Width As Double
    Public Property Width() As Double
        Get
            Return _Width
        End Get
        Set(ByVal value As Double)
            _Width = value
        End Set
    End Property
    Private _Height As Double
    Public Property Height() As Double
        Get
            Return _Height
        End Get
        Set(ByVal value As Double)
            _Height = value
        End Set
    End Property
    Private _Velocity As Vector
    Public Property Velocity() As Vector
        Get
            Return _Velocity
        End Get
        Set(ByVal value As Vector)
            _Velocity = value
        End Set
    End Property
    Private _SpriteCanvas As Canvas
    Public Property SpriteCanvas() As Canvas
        Get
            Return _SpriteCanvas
        End Get
        Set(ByVal value As Canvas)
            _SpriteCanvas = value
        End Set
    End Property
    Private _position As Point
    Public Property Position() As Point
        Get
            Return _position
        End Get
        Set(ByVal value As Point)
            _position = value
            SpriteCanvas.SetValue(Canvas.TopProperty, _position.Y - (Height / 2))
            SpriteCanvas.SetValue(Canvas.LeftProperty, _position.X - (Width / 2))
        End Set
    End Property

    Public Sub New(ByVal initialWidth As [Double], ByVal initialHeight As [Double], ByVal initialPosition As Point)
        Width = initialWidth
        Height = initialHeight

        SpriteCanvas = RenderSpriteCanvas()

        SpriteCanvas.Width = Width
        SpriteCanvas.Height = Height
        'NOTE: because the setter for Position uses both Height and Width, it is important this comes after they are set. 
        Position = initialPosition
    End Sub

    Public MustOverride Function RenderSpriteCanvas() As Canvas

    Public Function LoadSpriteCanvas(ByVal xamlPath As String) As Canvas
        Dim s As System.IO.Stream = Me.[GetType]().Assembly.GetManifestResourceStream(xamlPath)
        Return DirectCast(XamlReader.Load(New System.IO.StreamReader(s).ReadToEnd()), Canvas)
    End Function

    Public Overridable Sub Update(ByVal elapsedTime As TimeSpan)
        Position = (Position + Velocity * elapsedTime.TotalSeconds)
    End Sub
End Class

This Sprite class will give us the basis for entities in the game such as a ship, aliens, and projectiles. For all these items, we need to know the location of the item, the site, and what it looks like. We will take advantage of Point to track our position, and a property of type Canvas to display the XAML for each of these items. The constructor sets these initial parameters, and calls a RenderSpriteCanvas method to be implemented by each class that inherits from it. This method allows the inheriting class to set the contents of the canvas and therefore as control of the way the sprite looks.

Next we have our vector class that will help us control movement of our sprite. Again, I will not go into detail on vectors as this code is borrowed and adapted from many other readily available sources:

public struct Vector
{
    public double X;
    public double Y;

    public Vector(double x, double y)
    {
        X = x;
        Y = y;
    }

    public double Length
    {
        get
        {
            return Math.Sqrt(LengthSquared);
        }
    }

    public double LengthSquared
    {
        get
        {
            return X * X + Y * Y;
        }
    }

    public void Normalize()
    {
        double length = Length;
        X /= length;
        Y /= length;
    }

    public static Vector operator -(Vector vector)
    {
        return new Vector(-vector.X, -vector.Y);
    }

    public static Vector operator *(Vector vector, double scalar)
    {
        return new Vector(scalar * vector.X, scalar * vector.Y);
    }

    public static Point operator +(Point point, Vector vector)
    {
        return new Point(point.X + vector.X, point.Y + vector.Y);
    }

    static public Vector CreateVectorFromAngle(double angleInDegrees, double length)
    {
        double x = Math.Sin(DegreesToRadians(180 - angleInDegrees)) * length;
        double y = Math.Cos(DegreesToRadians(180 - angleInDegrees)) * length;
        return new Vector(x, y);
    }

    static public double DegreesToRadians(double degrees)
    {
        double radians = ((degrees / 360) * 2 * Math.PI);
        return radians;
    }
}

Public Structure Vector
    Public X As Double
    Public Y As Double

    Public Sub New(ByVal x__1 As Double, ByVal y__2 As Double)
        X = x__1
        Y = y__2
    End Sub

    Public ReadOnly Property Length() As Double
        Get
            Return Math.Sqrt(LengthSquared)
        End Get
    End Property

    Public ReadOnly Property LengthSquared() As Double
        Get
            Return X * X + Y * Y
        End Get
    End Property

    Public Sub Normalize()
        Dim length__1 As Double = Length
        X /= length__1
        Y /= length__1
    End Sub

    Public Shared Operator -(ByVal vector As Vector) As Vector
        Return New Vector(-vector.X, -vector.Y)
    End Operator

    Public Shared Operator *(ByVal vector As Vector, ByVal scalar As Double) As Vector
        Return New Vector(scalar * vector.X, scalar * vector.Y)
    End Operator

    Public Shared Operator +(ByVal point As Point, ByVal vector As Vector) As Point
        Return New Point(point.X + vector.X, point.Y + vector.Y)
    End Operator


    Public Shared Function CreateVectorFromAngle(ByVal angleInDegrees As Double, ByVal length As Double) As Vector
        Dim x As Double = Math.Sin(DegreesToRadians(180 - angleInDegrees)) * length
        Dim y As Double = Math.Cos(DegreesToRadians(180 - angleInDegrees)) * length
        Return New Vector(x, y)
    End Function

    Public Shared Function DegreesToRadians(ByVal degrees As Double) As Double
        Dim radians As Double = ((degrees / 360) * 2 * Math.PI)
        Return radians
    End Function
End Structure

Now we can implement Sprite with a new Ship class. Add a class called Ship, and a file called Ship.xaml to your project. Be sure to set the properties of Ship.xaml to 'Embedded Resource'. We now need to inherit from our Sprite class:

public class Ship : Sprite
{
    public Ship(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Ship.xaml");
    }
}

Public Class Ship
    Inherits Sprite
    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Ship.xaml")
    End Function
End Class

When Ship is instantiated, it calls the constructor of it's base, Sprite. It also implements the RenderSpriteCanvas method and specifies the XAML (a simple white square) to load into the sprite's canvas. Now we are ready to add a sprite to our main page. In this simple game, we will have only one ship (the others will be aliens), so lets add a property to our page, and a function that will instantiate our ship:

<Canvas x:Name="LayoutRoot" Width="30" Height="30" 
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Rectangle Height="30" Width="30" Fill="White" />
</Canvas>

void InitializeGame()
{
    PlayerShip = new Ship(10, 10, new Point(100, 300));
    gameRoot.Children.Add(PlayerShip.SpriteCanvas);
}

Private Sub InitializeGame()
    PlayerShip = New Ship(10, 10, New Point(100, 300))
    gameRoot.Children.Add(PlayerShip.SpriteCanvas)
End Sub

We can now call this method from our page constructor and when we run the project, we get a white square (our ship) at the bottom left of our Page. Taking a closer look, we set our page size to 500 x 400, and the InitializeGame method places our Ship at a point 100 pixels from the left of the gameRoot canvas, and 300pixels from the top.

Keyboard Input and the Game Loop

Now we are ready to make some things move. To start, we need choose keys on the keyboard to allow movement, and act on those events. We then need to capture those key presses and act on them if they are relevant to our game loop. Once again, may examples of key handlers and game loops are readily available, so I won't go into detail. The keyboard handler captures all key up and down events. We can therefore ask our instance of the handler if a key is pressed at any given time. The game loop is just that, a constant loop. It consists of a storyboard that has the start called on it and it immediately ends. The class raises an event, and starts the storyboard again. Subscribers to Update event are provided a value that reports the number of milliseconds since the last update. That value can be applied to vectors to apply smooth movement to sprites. To take advantage of these classes, we need to add an instance of both a KeyHandler and GameLoop to our Page. To do this, we update the InitializeGame and Page constructor, and add a handler for the GameLoop:

public Page()
{
    InitializeComponent();
    keyHandler = new KeyHandler(this);
    GenerateStarField(350);
    InitializeGame();
}

void InitializeGame()
{
    gameLoop = new GameLoop(this);
    gameLoop.Update += new GameLoop.UpdateHandler(gameLoop_Update);

    PlayerShip = new Ship(10, 10, new Point(100, 360));
    gameRoot.Children.Add(PlayerShip.SpriteCanvas);

    gameLoop.Start();
}

void gameLoop_Update(TimeSpan elapsed)
{
    //clear the current vector so the sprite is not moving unless a keys is pressed
    PlayerShip.Velocity = new Vector(0, 0);
    if (keyHandler.IsKeyPressed(Key.Left))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Right))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125);
    }
    PlayerShip.Update(elapsed);
}

Public Sub New()
    InitializeComponent()
    keyHandler = New KeyHandler(Me)
    GenerateStarField(350)
    InitializeGame()
End Sub

Private Sub InitializeGame()
    gameLoop = New GameLoop(Me)
    AddHandler gameLoop.Update, AddressOf gameLoop_Update

    PlayerShip = New Ship(10, 10, New Point(100, 360))
    gameRoot.Children.Add(PlayerShip.SpriteCanvas)

    gameLoop.Start()
End Sub

Private Sub gameLoop_Update(ByVal elapsed As TimeSpan)
    'clear the current vector so the sprite is not moving unless a keys is pressed 
    PlayerShip.Velocity = New Vector(0, 0)
    If keyHandler.IsKeyPressed(Key.Left) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Right) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125)
    End If

    PlayerShip.Update(elapsed)
End Sub

Now we have a functioning game loop. Launch the app, click on the Silverlight control to give it focus, and you can now use the arrow keys to move our ship right and left. One problem however is that you are able to take the ship completely off the screen. To prevent this, we can add MinX and MaxX properties to our ship class and override the Update method it inherits from Sprite. Be sure to also add those min and max values after the Ship is instantiated in InitializeGame of our Page:

public class Ship : Sprite
{
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Ship(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Ship.xaml");
    }

    public override void Update(System.TimeSpan elapsedTime)
    {
        //verify that this is a position we can move to
        if (Position.X > MaxX)
        {
            Position = new Point(MaxX, Position.Y);
            Velocity = new Vector(0, 0);
        }
        if (Position.X < MinX)
        {
            Position = new Point(MinX, Position.Y);
            Velocity = new Vector(0, 0);
        }
        base.Update(elapsedTime);
    }
}

Public Class Ship
    Inherits Sprite
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Ship.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As System.TimeSpan)
        'verify that this is a position we can move to 
        If Position.X > MaxX Then
            Position = New Point(MaxX, Position.Y)
            Velocity = New Vector(0, 0)
        End If
        If Position.X < MinX Then
            Position = New Point(MinX, Position.Y)
            Velocity = New Vector(0, 0)
        End If
        MyBase.Update(elapsedTime)
    End Sub
End Class

Prepare to Fire!

We now have all the basic plumbing to add additional sprites such as aliens or projectiles. To begin, we will add additional classes inheriting from Sprite: Alien, Missle, and Bomb, along with Alien.xaml, Missle.xaml, and Bomb.xaml (these new .xaml files need to be set as Embedded Resources). These xaml files are just like our Ship.xaml with different sizes and colors. Make the Aliens and their bombs red, and shrink the bomb and missile height and width to 5. The xaml is very similar, but the classes themselves are going to have a few differing capabilities. Bomb and Missile are very similar. They only need to load their corresponding xaml. Here is our Bomb class for example:

public class Bomb : Sprite
{
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Bomb(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Bomb.xaml");
    }

    public override void Update(System.TimeSpan elapsedTime)
    {
        base.Update(elapsedTime);
    }
}

Public Class Bomb
    Inherits Sprite
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Sprites.Bomb.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As System.TimeSpan)
        MyBase.Update(elapsedTime)
    End Sub
End Class

We now need to add an Alien class similar to our Ship class. These will both need a bit more capability. For one, we are going to have them both fire at each other. In the case of the Alien, it will be firing down, and it's monition of choice will be a bomb:

public class Alien : Sprite
{
    public double fireRateMilliseconds = 2000;
    public double fireVelocity = 250;
    public double wayPointMin;
    public double wayPointMax;
    public double speed = 100;
    public bool spawnWait;
    public DateTime spawnComplete;
    public double MaxX { get; set; }
    public double MinX { get; set; }

    public Alien(double width, double height, Point firstPosition)
        : base(width, height, firstPosition)
    {

    }

    public void CheckDirection()
    {
        if (Position.X > wayPointMax)
        {
            Velocity = Vector.CreateVectorFromAngle(270, speed);
        }
        if (Position.X < wayPointMin)
        {
            Velocity = Vector.CreateVectorFromAngle(90, speed);
        }
    }

    public override Canvas RenderSpriteCanvas()
    {
        return LoadSpriteCanvas("SimpleShooter.Sprites.Alien.xaml");
    }

    public override void Update(TimeSpan elapsedTime)
    {
        CheckDirection();
        base.Update(elapsedTime);
    }

    public Bomb Fire()
    {
        Bomb bomb = new Bomb(5, 5, Position);
        bomb.Velocity = Vector.CreateVectorFromAngle(180, fireVelocity);
        return bomb;
    }
}

Public Class Alien
    Inherits Sprite
    Public fireRateMilliseconds As Double = 2000
    Public fireVelocity As Double = 250
    Public wayPointMin As Double
    Public wayPointMax As Double
    Public speed As Double = 100
    Public spawnWait As Boolean
    Public spawnComplete As DateTime
    Private _MaxX As Double
    Public Property MaxX() As Double
        Get
            Return _MaxX
        End Get
        Set(ByVal value As Double)
            _MaxX = value
        End Set
    End Property
    Private _MinX As Double
    Public Property MinX() As Double
        Get
            Return _MinX
        End Get
        Set(ByVal value As Double)
            _MinX = value
        End Set
    End Property

    Public Sub New(ByVal width As Double, ByVal height As Double, ByVal firstPosition As Point)
        MyBase.New(width, height, firstPosition)

    End Sub

    Public Sub CheckDirection()
        If Position.X > wayPointMax Then
            Velocity = Vector.CreateVectorFromAngle(270, speed)
        End If
        If Position.X < wayPointMin Then
            Velocity = Vector.CreateVectorFromAngle(90, speed)
        End If
    End Sub

    Public Overloads Overrides Function RenderSpriteCanvas() As Canvas
        Return LoadSpriteCanvas("SimpleShooter.Alien.xaml")
    End Function

    Public Overloads Overrides Sub Update(ByVal elapsedTime As TimeSpan)
        CheckDirection()
        MyBase.Update(elapsedTime)
    End Sub

    Public Function Fire() As Bomb
        Dim bomb As New Bomb(5, 5, Position)
        bomb.Velocity = Vector.CreateVectorFromAngle(180, fireVelocity)
        Return bomb
    End Function
End Class

Now that we are going to add munitions to the game, we need to be able to know when these munitions collide with other sprites. To do this, we are going to add a collision detection method to our sprite class. As a form of simple collision detection, we will give each sprite a CollisionRadius from its center point. To keep it simple we will make the radius one half the width of our sprites. A vector created from these two points can then detect if the sum of those two radius is greater than the length of our vector. If it is, they have collided:

public static bool Collides(Sprite s1, Sprite s2)
{
    Vector v = new Vector((s1.Position.X) - (s2.Position.X), (s1.Position.Y) - (s2.Position.Y));
    if (s1.CollisionRadius + s2.CollisionRadius > v.Length)
    {
        return true;
    }
    else
    {
        return false;
    }
}

Public Shared Function Collides(ByVal s1 As Sprite, ByVal s2 As Sprite) As Boolean
    Dim v As New Vector((s1.Position.X) - (s2.Position.X), (s1.Position.Y) - (s2.Position.Y))
    If s1.CollisionRadius + s2.CollisionRadius > v.Length Then
        Return True
    Else
        Return False
    End If
End Function

We are now ready to extend our game loop of our Page to do more than track the movement of our Ship. We begin by taking action on more than just the arrow keys. We will wire up the space bar for shooting. Lets add an enumeration to track the state of our game. We will also add a supporting class that will handle the firing of munitions and adding those to our game. We will keep this simple for now, but it is an obvious place to being extending this code to take advantage of things like partial classes that could contain functionality like our 'Fire' method:

public enum GameState
{
    Ready = 0,
    Running = 1,
    Paused = 2,
    BetweenWaves = 3,
    GameOver = 4
}

if (keyHandler.IsKeyPressed(Key.Space))
{
    switch (status)
    {
        case GameState.Ready:
            break;
        case GameState.Running:
            EntityFired(PlayerShip);
            break;
        case GameState.Paused:
            break;
        case GameState.BetweenWaves:
            status = GameState.Running;
            ctlInfo.GameInfo = "";
            StartWave();
            break;
        case GameState.GameOver:
            break;
        default:
            break;
    }
}

void EntityFired(Sprite shooter)
{
    Debug.WriteLine(shooter);
    switch (shooter.ToString())
    {
        case "SimpleShooter.Ship":
            if (missles.Count == 0)
            {
                Missle missle = ((Ship)shooter).Fire();
                missles.Add(missle);
                gameRoot.Children.Add(missle.SpriteCanvas);

            }
            break;
        case "SimpleShooter.Alien":
            Bomb bomb = ((Alien)shooter).Fire();
            bombs.Add(bomb);
            gameRoot.Children.Add(bomb.SpriteCanvas);
            break;
        default:
            break;
    }
}

Public Enum GameState
    Ready = 0
    Running = 1
    Paused = 2
    BetweenWaves = 3
    GameOver = 4
End Enum

If keyHandler.IsKeyPressed(Key.Space) Then
    Select Case status
        Case GameState.Ready
            Exit Select
        Case GameState.Running
            EntityFired(PlayerShip)
            Exit Select
        Case GameState.Paused
            Exit Select
        Case GameState.BetweenWaves
            status = GameState.Running
            ctlInfo.GameInfo = ""
            StartWave()
            Exit Select
        Case GameState.GameOver
            Exit Select
        Case Else
            Exit Select
    End Select
End If

Private Sub EntityFired(ByVal shooter As Sprite)
    Debug.WriteLine(shooter)
    Select Case shooter.ToString()
        Case "SimpleShooter.Ship"
            If missles.Count = 0 Then
                Dim missle As Missle = DirectCast(shooter, Ship).Fire()
                missles.Add(missle)

                gameRoot.Children.Add(missle.SpriteCanvas)
            End If
            Exit Select
        Case "SimpleShooter.Alien"
            Dim bomb As Bomb = DirectCast(shooter, Alien).Fire()
            bombs.Add(bomb)
            gameRoot.Children.Add(bomb.SpriteCanvas)
            Exit Select
        Case Else
            Exit Select
    End Select
End Sub

To make it easier to track the state of our game, let's add public properties to our controls and let them be the keepers of those game states. For instance, give the ReamainingLives control a Lives property, and have the setter of that property also update the TextBlock on the control to show the user how many lives are left. Perform a similar task for the other three controls:

public partial class RemainingLives : UserControl
{
    private int _lives;
    public int Lives
    {
        get { return _lives; }
        set
        {
            _lives = value;
            string livesString = string.Empty;
            for (int i = 0; i < _lives - 1; i++)
            {
                livesString = string.Format("{0}{1}", livesString, "A");
            }
            txtRemainingLives.Text = livesString;
        }
    }

    public RemainingLives()
    {
        InitializeComponent();
    }
}

Partial Public Class RemainingLives
    Inherits UserControl
    Private _lives As Integer
    Public Property Lives() As Integer
        Get
            Return _lives
        End Get
        Set(ByVal value As Integer)
            _lives = value
            Dim livesString As String = String.Empty
            For i As Integer = 0 To _lives - 2
                livesString = String.Format("{0}{1}", livesString, "A")
            Next
            txtRemainingLives.Text = livesString
        End Set
    End Property

    Public Sub New()
        InitializeComponent()
    End Sub
End Class

Now we have a number of other things to add to our page class. We are going to have lots of entities to deal with in our game loop. We will have a ship, x number of Aliens, x number of Bombs, and at some points we will have our Missiles, though we restricted that to one at a time in our EntityFired method. We need to, in each game loop check if any missile hits any alien or leaves the game map, if any bomb hits our ship or leaves the game map, and if it is time for a Alien to fire at the ship. Our Page already has a property for our Ship, but the Aliens, Bombs, Missiles need to be collections. When we begin to loop through our Bombs for instance, we will want to remove a bomb if it strikes a Ship or leaves the game map. Since we are going to be iterating these collections, we cannot subtract from those collections as we are looping through them. There are a number of approaches for this, but to keep it simple, we will add a corresponding collection for each of our Bomb, Alien, and Missile collections to track the ones that need to be removed and removed from our game canvas. With this approach, our game loop can add to the "remove these" collection, and then take action on them when we leave the main loop for the parent collection:

List<Alien> aliens;
List<Alien> aliensRemove;
List<Alien> alienShooters;
List<Bomb> bombs;
List<Bomb> bombsRemove;
List<Missle> missles;
List<Missle> misslesRemove;

Private aliens As List(Of Alien)
Private aliensRemove As List(Of Alien)
Private alienShooters As List(Of Alien)
Private bombs As List(Of Bomb)
Private bombsRemove As List(Of Bomb)
Private missles As List(Of Missle)
Private misslesRemove As List(Of Missle)

We also want to add a class to our page that can track the waves of aliens we are going to send one at a time. In addition, we can add a collection to hold these waves. Each wave will track the number of aliens that spawn at once, the total number of aliens faced in the wave, how many aliens get to drop bombs, and how frequently they can fire.

public class WaveData
{
    public WaveData(int count, double fireRate, int atOnce, int fireatonce)
    {
        EnemyCount = count;
        fireRateMilliseconds = fireRate;
        enemiesAtOnce = atOnce;
        fireAtOnce = fireatonce;
        waveEmpty = false;
    }
    public int EnemyCount { get; set; }
    public double fireRateMilliseconds { get; set; }
    public int enemiesAtOnce { get; set; }
    public int fireAtOnce { get; set; }
    public bool waveEmpty { get; set; }
}

Public Class WaveData
    Public Sub New(ByVal count As Integer, ByVal fireRate As Double, ByVal atOnce As Integer, ByVal fireatonce__1 As Integer)
        EnemyCount = count
        fireRateMilliseconds = fireRate
        enemiesAtOnce = atOnce
        fireAtOnce = fireatonce__1
        waveEmpty = False
    End Sub
    Private _EnemyCount As Integer
    Public Property EnemyCount() As Integer
        Get
            Return _EnemyCount
        End Get
        Set(ByVal value As Integer)
            _EnemyCount = value
        End Set
    End Property
    Private _fireRateMilliseconds As Double
    Public Property fireRateMilliseconds() As Double
        Get
            Return _fireRateMilliseconds
        End Get
        Set(ByVal value As Double)
            _fireRateMilliseconds = value
        End Set
    End Property
    Private _enemiesAtOnce As Integer
    Public Property enemiesAtOnce() As Integer
        Get
            Return _enemiesAtOnce
        End Get
        Set(ByVal value As Integer)
            _enemiesAtOnce = value
        End Set
    End Property
    Private _fireAtOnce As Integer
    Public Property fireAtOnce() As Integer
        Get
            Return _fireAtOnce
        End Get
        Set(ByVal value As Integer)
            _fireAtOnce = value
        End Set
    End Property
    Private _waveEmpty As Boolean
    Public Property waveEmpty() As Boolean
        Get
            Return _waveEmpty
        End Get
        Set(ByVal value As Boolean)
            _waveEmpty = value
        End Set
    End Property
End Class

We will need to setup an initialization method for our game, to setup all our collections for sprites, and add progressively difficult waves to our game. The meat of it all now lies in our game loop. For each collection of sprites we call methods that will iterate over its contents and make decisions based on collisions, locations of the sprites. After a loop on each main collection, we can use the 'remove us' collection to clear items from the main collection, remove their canvas from our game canvas, and delete them from the main collection. Finally, we check to see if enough time has elapsed to let the aliens drop another bomb:

void gameLoop_Update(TimeSpan elapsed)
{
    //clear the current Vector so the sprite is not moving unless a keys is pressed
    PlayerShip.Velocity = new Vector(0, 0);
    if (keyHandler.IsKeyPressed(Key.Left))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Right))
    {
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125);
    }
    if (keyHandler.IsKeyPressed(Key.Space))
    {
        switch (status)
        {
            case GameState.Ready:
                break;
            case GameState.Running:
                EntityFired(PlayerShip);
                break;
            case GameState.Paused:
                break;
            case GameState.BetweenWaves:
                status = GameState.Running;
                ctlInfo.GameInfo = "";
                StartWave();
                break;
            case GameState.GameOver:
                break;
            default:
                break;
        }
    }
    PlayerShip.Update(elapsed);

    BombLoop(elapsed);
    MissleLoop(elapsed);
    AlienLoop(elapsed);

    foreach (Alien alien in aliensRemove)
    {
        aliens.Remove(alien);
        gameRoot.Children.Remove(alien.SpriteCanvas);
        AlienShot(alien);
    }
    aliensRemove.Clear();

    foreach (Missle missle in misslesRemove)
    {
        missles.Remove(missle);
        gameRoot.Children.Remove(missle.SpriteCanvas);
    }
    misslesRemove.Clear();

    if (nextShot <= DateTime.Now)
    {
        nextShot = DateTime.Now.AddMilliseconds(enemyShootMilliseonds).AddMilliseconds(elapsed.Milliseconds * -1);

        shotsThisPass = shotsAtOnce;
        if (shotsThisPass > aliens.Count)
        {
            shotsThisPass = aliens.Count;
        }

        if (aliens.Count > 0)
        {
            foreach (Alien alien in aliens)
            {
                alienShooters.Add(alien);
            }
        }

        while (alienShooters.Count > shotsThisPass)
        {
            alienShooters.RemoveAt(GetRandInt(0, alienShooters.Count - 1));
        }

        foreach (Alien alien in alienShooters)
        {
            EntityFired(alien);
        }

        alienShooters.Clear();
    }
}

Private Sub gameLoop_Update(ByVal elapsed As TimeSpan)
    'clear the current Vector so the sprite is not moving unless a keys is pressed 
    PlayerShip.Velocity = New Vector(0, 0)
    If keyHandler.IsKeyPressed(Key.Left) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(270, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Right) Then
        PlayerShip.Velocity = Vector.CreateVectorFromAngle(90, 125)
    End If
    If keyHandler.IsKeyPressed(Key.Space) Then
        Select Case status
            Case GameState.Ready
                Exit Select
            Case GameState.Running
                EntityFired(PlayerShip)
                Exit Select
            Case GameState.Paused
                Exit Select
            Case GameState.BetweenWaves
                status = GameState.Running
                ctlInfo.GameInfo = ""
                StartWave()
                Exit Select
            Case GameState.GameOver
                Exit Select
            Case Else
                Exit Select
        End Select
    End If
    PlayerShip.Update(elapsed)

    BombLoop(elapsed)
    MissleLoop(elapsed)
    AlienLoop(elapsed)

    For Each alien As Alien In aliensRemove
        aliens.Remove(alien)
        gameRoot.Children.Remove(alien.SpriteCanvas)
        AlienShot(alien)
    Next
    aliensRemove.Clear()

    For Each missle As Missle In misslesRemove
        missles.Remove(missle)
        gameRoot.Children.Remove(missle.SpriteCanvas)
    Next
    misslesRemove.Clear()

    If nextShot <= DateTime.Now Then
        nextShot = DateTime.Now.AddMilliseconds(enemyShootMilliseonds).AddMilliseconds(elapsed.Milliseconds * -1)

        shotsThisPass = shotsAtOnce
        If shotsThisPass > aliens.Count Then
            shotsThisPass = aliens.Count
        End If

        If aliens.Count > 0 Then
            For Each alien As Alien In aliens
                alienShooters.Add(alien)
            Next
        End If

        While alienShooters.Count > shotsThisPass
            alienShooters.RemoveAt(GetRandInt(0, alienShooters.Count - 1))
        End While

        For Each alien As Alien In alienShooters
            EntityFired(alien)
        Next

        alienShooters.Clear()
    End If
End Sub

Now we can almost call it a game:

Taking it one step further, I jumped into Expression Blend to create a bit more interesting XAML that our sprites are loading into their SpriteCanvas. This XAML can be found in the full download of the source code. The results make our game just a tad bit more interesting:

Conclusion

Silverlight provides a number of capabilities to enable robust game development. It should be noted that in this game, we are only scratching the surface. The core of this example used a game loop to position sprites on a canvas. Additional capabilities within Silverlight such as animations, styling, templating, and visual states provide even more ways to push the limits of browser based games. If you are at all like me, dabbling with game development is a great way to get your feet wet with Silverlight and learn some basics. Happy coding!

If you want to try this out, the download link for the source code is at the top of the article!

About The Author

Roger Guess is the Director of IT for The Wedge Group where he works with technologies such as Silverlight and WPF. He writes games in his spare time, and blogs at SilverlightAddict.com. He can be reached via email at email@rogerguess.net.

WiiMoteLib with MotionPlus

Coding4Fun — Mon, 20 Jul 2009 21:35:57 GMT

Brian Peek has updated his WiiMote library to 1.8b1 with freshly added support for the MotionPlus add-on.

Taiko Drum Master's TaTaCon drum controller supported (Dean Herbert)
Bare-bones Wii MotionPlus support (wiibrew.org, testing by Tyler Tolley)
WiimoteTest UI changed to add MotionPlus data
- Please note that the current version is VERY flakey and may not work at all for you.
- Pair your Wiimote, plug in your MotionPlus, call InitializeMotionPlus()
- Extensions plugged into the MotionPlus will give wacky results...not supported...yet!
- Internal changes to perhaps fix some threading issues

Be advised, this is beta and the data from MotionPlus is raw data. You won’t get real orientation values

If you feel like testing it out, pop over to Codeplex and start playing with it!

Aliens invading with XNA

Coding4Fun — Tue, 14 Jul 2009 21:10:00 GMT

Brian Peek, of wiimote fame, gave a talk to the Facebook .NET Programmers Group and had it recorded. The talk is about creating a clone of Space Invaders called Alien Attack in XNA Game Studio 3.0. If you want even greater detail, this is the first chapter in the Coding4Fun book.

Meeting #13 - Coding4Fun: Designing a Video Game using XNA Game Studio 3.0 from Muneeb on Vimeo.

You can find a quick, low-res, streaming version below, or you can download and play the recording at a higher resolution in Microsoft Office Live Meeting.

TweetCraft - An in-game Twitter client for World of Warcraft

Coding4Fun — Thu, 02 Jul 2009 11:18:07 GMT

TweetCraft is a World of Warcraft add-on that enables you to send and receive tweets using Twitter without leaving the game, automatically upload and post screenshots using TwitPic and automatically tweet certain in-game events such as achievements and moving around in the world of Azeroth. TweetCraft customizes your World of Warcraft user interface by adding its own frame similar to the built-in ones (such as the Quest Log) and provides easy access to it through a button near the minimap, slash commands or your favorite launcher (e.g. ChocolateBar).

Compiled version: Download

Source Code: Download

Difficulty: Intermediate

Time Required: 3-5 hours

Cost: $19.99 for World of Warcraft; $14.99 for monthly fee

Software Needed: AddOn Studio for World of Warcraft, Visual Studio Standard (or higher), although possible to use Visual C# Express as well,

Hardware: none

How TweetCraft works

Let’s quickly walk through the different things that TweetCraft does to bring Twitter into World of Warcraft.

Overview

World of Warcraft’s user interface is highly customizable and enables add-on developers to do almost anything in the game they can dream of. Add-ons can interact with the world, listen to events that happen in the game, alter the look of the default user interface or create brand new ones, but add-ons are seriously limited when it comes to talking to the world outside World of Warcraft. They cannot read or write files, call web services or do anything that could be potentially harmful. This is why TweetCraft comes with a Windows application that sits in the Notification Area (also known as the tray) and does the bulk of the work, giving the TweetCraft add-on only the data that it needs to display, such as tweets, replies and user pictures. All the Twitter web service calls, uploading of screenshots and housekeeping is done by this application. Let’s see how!

The TweetCraft Tray application

The TweetCraft Tray application is a WPF application that periodically checks for new tweets, dowloads and converts the user pictures of the tweets’ authors and writes it out to a file that World of Warcraft picks up and the add-on can use. It also picks up all outgoing tweets queued up for sending and sends them using Twitter one-by-one. It watches for screenshots taken by World of Warcraft and uploads them using TwitPic immediately.

To do all this, it has a couple of settings that need to be configured before it can work. For starters, it needs your Twitter credentials to be able to send tweets and post pictures on your behalf. It also needs to know which World of Warcraft account you are going to use to play and send and receive tweets with. Finally, you can opt out of automatically uploading screenshots you take during game. Figure 1 shows the TweetCraft Settings window that shows up when you first start TweetCraft after installation and is also available by right clicking the tray icon (Figure 2).

Figure 1. TweetCraft Settings Window

Figure 2. TweetCraft tray icon in the notification area

Getting data from Twitter

TweetCraft uses an open-source library called TwitterLib to send and receive tweets using Twitter’s API. TwitterLib is part of the open-source WPF Twitter Client WittyTwitter and wraps the web services provided by Twitter into an easy to use .NET class library. TweetCraft wraps this library into a simple class called TwitterClient that all the services in TweetCraft rely on. One of those services is the TwitterBackgroundService which polls Twitter periodically to check for new tweets. By default, this is set to five minutes. If new tweets or replies are available, an event is raised that other components of TweetCraft can handle and work with the new tweets, download user pictures, etc. Figure 3 shows the three classes that take part in downloading new tweets and replies and notifying other classes.

Figure 3. TwitterBackgroundService, TwitterClient and TwitterNet (TwitterLib)

Dynamically building TGA images

When it comes to visualizing images (or textures, in WoW parlance), World of Warcraft poses quite a few restrictions on what files can be used and where does files should be. First of all, World of Warcraft only supports the TGA and BLP file formats. TGA stands for the Truevision Targa format, whereas BLP is Blizzard’s own image format. The images must also have dimensions of two (32×32, 64×64 pixels and so on…), otherwise they won’t show up. On the other hand, Twitter user pictures are available as 48×48 or 75×75 pixels and in various well-known formats, such as JPG, PNG or even GIF. TweetCraft needs to convert these pictures to 64×64 TGA files if it wants to play nice with World of Warcraft. This is done for each tweet’s authors user picture that will show up in World of Warcraft. The converted pictures must be placed in the Interface folder of World of Warcraft where the add-ons themselves also reside. The TwitterUserPictureService can retrieve the user picture and convert it to a 64×64 TGA file that contains the 48×48 user picture in the middle and puts that file into the same directory where the TweetCraft add-on is installed. The files are named after each user’s screen name and if TwitterUserPictureService sees that a file is already there, it won’t convert it again, saving some time and computing power.

Figure 4 shows TwitterUserPictureService and two helper classes that take care of downloading and the actual conversion. The GetUserPicturePath method returns the path of the resulting World of Warcraft compatible TGA file for a single user.

Figure 4. TwitterUserPictureService and its helper classes

Serializing tweets into Lua

Until now, we were quite secretive about how we can avoid World of Warcraft’s restrictions and let TweetCraft be able to read the data and show it. We’ve said that add-ons cannot read or write files and that still hasn’t changed during the last few minutes, but add-ons must have a way somehow to save their settings and other information when I log out of the game and load that when I log back in, you sincerely ask and you’re right! Although add-ons cannot read or write to files, they can ask World of Warcraft to save and load some of their global variables whenever the user reloads the UI (by entering an instance or hearthing), logs in or logs out. These files are called the SavedVariables files. When TweetCraft finishes downloading tweets, converting user pictures and everything else, it saves them using the very same format and to the very same file World of Warcraft uses on behalf of the TweetCraft add-on. Neat, huh? Just wait a little bit more… :)

Those variables that an add-on asks to be saved between sessions are saved into a Lua file, which is the same programming language add-on developers can use to write their add-ons. So basically, World of Warcraft creates a file that contains code full of assignment statements (think a = 5) that it will just run whenever those values need to be set again. More complex data structures can also be expressed this way using Lua tables, the swiss army-knife of Lua.

It sounds like a great idea to put all the data we would like for TweetCraft to use, but all we have is .NET objects, arrays and dictionaries. Fortunately, all these data structures can be expressed with simple Lua types and tables and TweetCraft comes with a class called LuaSerializer that produces Lua code from any .NET object (with a few restrictions, of course), very similar to how XmlSerializer works.

To make this even more simple, TweetCraft contains the concept of a SavedVariablesChannel that you can just drop objects in, flush it and those object show up on the other side. In our case, as Lua variables. What’s even better, it works the other way around as well. The TweetCraft add-on stores all the tweets queued up and ready to be sent in a variable and triggers World of Warcraft to save them to the SavedVariables file. The SavedVariablesChannel detects this by watching for changes made to the SavedVariables file using FileSystemWatcher and notifies other components of the TweetCraft application that can pull out the information and send the tweets.

Figure 5 shows SavedVariablesChannel and its base class, ValueChannelBase which keeps track of all objects thrown into it until it is flushed.

Figure 5. SavedVariablesChannel and ValueChannelBase

Refreshing the data in World of Warcraft

There’s one last problem we face when trying to achieve this two-way communication between the TweetCraft add-on and the application. If World of Warcraft is running, we cannot just overwrite the SavedVariables file and expect World of Warcraft to pick it up as it does not watch for changes made to the file. If we were to overwrite the file and subsequently the user logs out, World of Warcraft will happily overwrite the information we placed there. There’s another trick we have to resort to: the TweetCraft add-on can trigger the reloading of the UI which will unload all add-ons, save their variables and then load them again. There’s a a little bit of time between the saving and loading of a particular add-ons SavedVariables file and that’s when TweetCraft can safely read the file for queued up tweets and overwrite it with the new data. This is what happens when the user clicks the Refresh button in TweetCraft’s frame.

Sending tweets and uploading screenshots

Whenever the user queues up tweets for sending, they are not immediately sent but kept in a data structure that will be saved out to the SavedVariables file by World of Warcraft. We’ve seen that his happens when either the user logs out or presses the Refresh button. The updated SavedVariables file gets detected by SavedVariablesChannel and the ChannelUpdated event is raised. When the TweetCraft application handles this event, it cannot immediately send the tweets as that would take a couple seconds and if you remember from the last section, we only have a tiny little window of time to process the values and save back all the data we would like to send back. For this reason, the tweets that are picked up from the SavedVariables file using the SavedVariablesChannel get quickly queued up in the TwitterDispatcherService that then goes ahead and starts sending them one by one in the background. To make sure that all the values we prepared to save into the file get flushed, the SavedVariablesChannel has a property called AutoFlush that is enabled by default.

One thing we have not mentioned is that TwitterDispatcherService can also upload and post pictures using TwitPic. It watches the Screenshots folder of World of Warcraft for new files and if AutoTweeting of screenshots is enabled, immediately queues up the picture for uploading and posting it. This also means that you don’t need to press the Refresh button or wait until you log off for screenshots to be posted. They will show up immediately in your Twitter feed.

The TwitterDispatcherService uses TwitterClient (and TwitterLib) to send the tweets but it does not interfere with the quick reading and writing of the SavedVariables file we discussed previously. It also uses TwitPicClient to upload and post pictures. Figure 6 shows TwitterDispatcherService, TwitterClient and TwitPicClient.

Figure 6. TwitterDispatcherService, TwitterClient and TwitPicClient

Bringing it all together

So far, we’ve looked at components of TweetCraft that implemented a particular part of the application. Retrieving and sending tweets, converting user pictures and making all this information available for the TweetCraft add-on, but there’s an important class that brings all this together and contains all the logic of how these components interact with each other. We also need to be able to detect World of Warcraft installations, figure out what accounts are available and where to look for files like the SavedVariables files and put the converted user pictures. The TweetCraft class implements the logic required and relies on the WorldOfWarcraft class for everything World of Warcraft related.

Figure 7 shows the TweetCraft and WorldOfWarcraft side by side.

Figure 7. TweetCraft and WorldOfWarcraft

Summary

While this is a high-level overview of TweetCraft only, it gives you a good idea of how it enables World of Warcraft players to use Twitter to send and receive tweets, upload the screenshots and share their achievements right inside the game. Make sure you try out TweetCraft if you have World of Warcraft installed and if you’re curious, download the source code and take a deeper look.

Gabor Ratky (Blog, Twitter), Senior Software Engineer and Coding4Fun Ninja at EPAM Systems

Gabor is the developer behind TweetCraft and has been working on Coding4Fun projects for almost two years. He also leads the development of AddOn Studio for World of Warcraft, a Visual Studio-based IDE for building World of Warcraft add-ons and he co-authored the chapter in the Coding4Fun book about it. He is a VSX Insider and was invited to speak at various events about Visual Studio Extensibility. When not working on Coding4Fun projects, Gabor works on large scale, enterprise solutions using exciting Microsoft technologies. He lives in Budapest, Hungary and loves traveling, good wine and Channel9 videos.

XNA Game Studio 3.1

Coding4Fun — Thu, 11 Jun 2009 22:14:38 GMT

XNA Game Studio 3.1 has just been released! Download XNA GS 3.1 and check out the walkthrough for upgrading your old projects to v3.1! For a more in-depth overview of what is new in 3.1, head to http://creators.xna.com/en-us/article/xnags3.1whatsnew.

A quick overview of what is new:

Avatar Support: Render and animate Avatars to use in your game to represent gamers and other characters within your game.
Xbox LIVE Party Support: Enabling gamers to communicate, even when each gamer is not playing the same game in the same multiplayer session. LIVE Party supports up to an eight-way group voice chat for gamers and keeps gamers connected before, during, and after a gameplay session, persisting across title switches.
Video Playback: XNA Game Studio now supports the ability to play back video that can be used for such purposes as opening splash and logo scenes, cut scenes, or in-game video displays. This set of XNA Framework APIs supports the following features:
Full screen video playback
Video playback to simple textures in game
Control of playback such as pause/resume and stop
Retrieve properties of the video, such as playback time, size, and frame rate
Determine the type and usage of the audio track, such as if it has music, dialog, or music and dialog
Play back multiple video streams at the same time
Audio API: 3.1 has a new usage pattern of SoundEffect.Play. Sound instances created by Play calls are disposed automatically when playback ends, and SoundEffect.Play returns a Boolean to indicate success or failure.
Content Pipeline Enhancements: improvements making it much easier to add customer types (custom attributes for run-time of an object and run-time type version of an object, and the ability to determine if deserialization into an existing object is possible).
XACT3 Support: includes support for XACT3 with new features including the ability to enable a filter on every track, and support for the xWMA compression format.
Visual Studio Changes: XNA Game Studio 3.1 supports both 3.0 and 3.1 projects, and it includes support for upgrading projects from 3.0 to 3.1.

Robozzle

Coding4Fun — Wed, 03 Jun 2009 04:02:03 GMT

Robozzle is a Silverlight game that helps teach players the art of programming logic through a series of fun and challenging community-created puzzles. What's more, the game is "community sourced" meaning not only can you contribute new levels - but actually help expand the game and shape it's future. (http://robozzle.codeplex.com/).

[via Tim Farley]

Building Multiplayer Texas Holdem Poker For The Zune

Coding4Fun — Tue, 05 May 2009 22:06:00 GMT

Have you ever been interested in creating a game that harnesses XNA’s powerful network library to create multiplayer experiences for the Zune device?

The Zune firmware version 3.1 brought us a professionally built incarnation of Texas Holdem that supports network play. Understanding how to send and receive data with the Zune can be a little daunting at first, but once you understand the pattern, it’s easy.

To build out the entire game, you probably need about a week, but you can build some simpler examples in far less time.

This is an earlier project from before the release of my Zune game development book. Accordingly, some of the code samples you see in this article may be inconsistent with what you find in the download. The code in the article is the “correct” way to do things. The code in the download is still a work in progress.

Source Code: Download
Difficulty Intermediate|Advanced
Time Required: 40 hours
Hardware: 2x Zune devices ($170 ea)
Software Needed: Visual C# Express, XNA Game Studio 3.0

The Workflow

Developing multiplayer games for the Zune is interesting because you have to deploy to each device individually. Once you have a build that works for you, it’s helpful to run-deploy (Control+F5) to one device, leave it running there, and then plug in the other Zune and debug-deploy (F5) to it. This way you have one debuggable instance of the game running. Make sure to set the appropriate Zune device as the default in the XNA Game Studio Device Center (accessible from the Tools menu).

Starting A Network Session

Because the Zunes connect over an ad-hoc, peer-to-peer connection rather than through an access point, you will have to designate one Zune as the host device. The host is usually determined to be the one that creates a new game. Therefore, all Zunes that join the host’s network session are simply peers. The difference between the host and the peers is that the host usually maintains the game state on top of executing the game as well, because the game data has to be centralized somewhere. Keep that in mind, because if one Zune is doing substantially more processing, it can lag behind and mess up your network session. Also, remember that all Zunes are running the exact same copy of the game, so the game must support both host and peer scenarios.

Create / Join / Lobby Model

Most peer-to-peer connected games allow a user to create or join a game. After doing so, the player is funneled into an area called the Lobby where they can specify their readiness. When all players are ready, the host can start the game. Some of this functionality is provided directly by the XNA Framework’s Net and GamerServices libraries.

I normally create three separate screens based on the Network Game State Management sample from the Creators Club website. The first is the Create screen, which looks exactly like a lobby. It starts up a network session and waits for players to join and become ready. The code to create a network session looks like this (note that I have employed some abstraction to make my code a little more cohesive):

public void CreateZuneSession(int maxNetworkPlayers)
{
    KillSession();

    try
    {
        Session = NetworkSession.Create(NetworkSessionType.SystemLink, 1,      
            maxNetworkPlayers); 
        Me = Session.LocalGamers[0];
    }
    catch (NetworkNotAvailableException)
    {
        throw new NetworkNotAvailableException("Zune wireless is not 
            enabled.");
    }
    catch (NetworkException ne)
    {
        throw ne;
    }

    if (Session == null)
        throw new NetworkException("The network session could not be 
            created.");
}

All Zune network sessions are of the type SystemLink, much like LAN-networked Xbox consoles. The ‘1’ parameter specifies the number of local players – of course, on a Zune, there can only be one.

This line of code sets the Session property to a newly created network session. The Join screen, running on another Zune, will find this session asynchronously as an available network session and attempt to join it. The first step is to enumerate available network sessions:

/// <summary>
/// Asynchronous: Begins to discover network sessions.
/// </summary>
public void BeginGetAvailableSessions()
{
    // Destroy any existing connections
    KillSession();

    NetworkSession.BeginFind(NetworkSessionType.SystemLink, 1, null, new 
        AsyncCallback(SessionsFoundCallback), null);
}

This code looks for SystemLink sessions and calls the callback method SessionsFoundCallback when the operation completes (successfully or unsuccessfully). If sessions are found, an event is fired. Other screens can subscribe to this event and transition to other screens or do other processing with the network session.

/// <summary>
/// Called when network sessions are found.
/// </summary>
/// <param name="result"></param>
public void SessionsFoundCallback(IAsyncResult result)
{
    AvailableNetworkSessionCollection availableSessions = null;
    availableSessions = NetworkSession.EndFind(result);

    if (NetworkSessionsFound != null)
        NetworkSessionsFound(availableSessions);
}

When all players are ready and the host presses the middle button, the network session’s StartGame() method is called, which will cause all connected peers to receive a GameStarted event. This loads up the playing screen.

if (allPlayersReady && atLeastTwoPlayers)
{
    if (ScreenManager.Network.Session != null)
        ScreenManager.Network.Session.StartGame();
}

That’s basically how to connect up two Zunes in a network session. See my book for a much more detailed explanation.

Dealing With Cards

As Poker is a card game, you might want to develop a testable, standalone library that you can use not only to house your objects, but also to write out all the intense logic required for a game like poker. The task of determining what a player’s best hand is out of seven cards (and whether it beats another player’s hand) is more in-depth than you might expect.

An easy way to go about this is to create a Zune game library. I called mine CardLib. CardLib has objects such as these:

Card which has a suit, a value, some comparers and some utility methods)
Deck, which has a collection of cards and methods like Shuffle, ResetDeck, etc.
Dealer, which has a deck, a list of the five community cards, and methods like Shuffle, DealCard, Burn, DealFlop, DealTurn, etc.
HoldemHand, which contains all of the logic for determining what a hand is (always 7 cards)
BestHand, which takes a HoldemHand and determines what the best possible hand is within that hand

Shuffling Cards

Shuffling cards is surprisingly easy. I use the Knuth-Fisher-Yates shuffling algorithm, which takes every card in the deck and randomly swaps it with another.

/// <summary>
/// Knuth-Fisher-Yates shuffling algorithm:
/// http://www.codinghorror.com/blog/archives/001015.html
/// </summary>
public void Shuffle()
{
    Random rand = new Random();
    for (int cardIndex = _cards.Count - 1; cardIndex > 0; cardIndex--)
    {
        int randomIndex = rand.Next(cardIndex + 1);
        SwapCardsByIndex(cardIndex, randomIndex);
    }
    _dealIndex = 0;
}

Poker Logic

An example method you’ll see in this library is this snippet to check if the hand is a royal flush:

public bool IsRoyalFlush(out List<Card> winningCards)
{
    List<Card> straightFlushCards;

    if (IsStraightFlush(out straightFlushCards))
    {                
        // Check to make sure the straight flush cards are: 10 J Q K A
        straightFlushCards.Sort();

        if (straightFlushCards[0].Value == 10 &&
            straightFlushCards[1].Value == Card.Jack &&
            straightFlushCards[2].Value == Card.Queen &&
            straightFlushCards[3].Value == Card.King &&
            straightFlushCards[4].Value == Card.Ace)
        {
            winningCards = straightFlushCards;
            return true;
        }

        else
        {
            winningCards = null;
            return false;
        }
    }
    else
    {
        winningCards = null;
        return false;
    }
}

There is a ton of similar and even more disgusting logic to peruse in the HoldemHand.cs file in the region entitled “Poker Logic Fun Times.” This logic covers every possible poker hand and could probably be refactored to be way more elegant.

When it comes time to evaluate the winner, each player’s best hand is determined and they are evaluated against each other to determine the winner. This code returns a list of WinnerInfo objects, which returns the player info and a list of the cards they won with.

public List<WinnerInfo> DetermineWinners()
{
    BestHand overallBestHand = null;
    HoldemPlayer winner = null;

    List<WinnerInfo> winners = new List<WinnerInfo>();

    foreach (HoldemPlayer player in _players)
    {
        if (player.Status != PlayerStatus.Folded)
        {
            HoldemHand tempHand = new HoldemHand(player.Pocket, _communityCards);
            BestHand bestHand = tempHand.GetBestHand();

            if (overallBestHand == null) // if there is no best hand yet
            {
                overallBestHand = bestHand;
                winner = player;
                winners.Add(new WinnerInfo(overallBestHand, winner, Me));
            }
            else
            {
                // if this hand beats the current best hand
                if (BestHand.Beats(bestHand, overallBestHand))
                {
                    winners.Clear();
                    overallBestHand = bestHand;
                    winner = player;
                    winners.Add(new WinnerInfo(overallBestHand, winner, Me));
                }
                else
                {
                    if (BestHand.IsEquivalentTo(bestHand, overallBestHand))
                    {
                        winners.Add(new WinnerInfo(bestHand, player, Me));
                    }
                }
            }
        }
    }

    _winners = winners;
    return winners;
}

Drawing Cards On The Screen

Rather than have 52 different sprites that represent each possible card, I just made my own sheet of Zune-sized playing cards. Horizontally, they are ordered by value (1-13) and vertically they are ordered by suit (both alphabetically and corresponding to the numeric value of the Suit enumeration in the project, 1-4).

When a specific card is requested to be drawn, a formula is used to calculate the source rectangle from this larger image. This is very similar to how fonts worked before spritefonts were introduced into XNA. This allows us to strip out the graphic of a specific card and draw it onscreen at some other location.

private void DrawCard(Card card, Vector2 position)
{
    if (card != Card.Undefined && card.Suit != Suit.Unassigned)
        ScreenManager.SpriteBatch.Draw(_texDeck, position, GetCardSourceRect(card), Color.White);
}

private Rectangle GetCardSourceRect(Card card)
{
    if (card.Suit == Suit.Unassigned)
        throw new ArgumentException("Unassigned cards cannot be drawn.");

    int cardColumn = card.Value - 1;
    int cardRow = (int)card.Suit - 1;

    int x = cardColumn * MainScreenElements.CARD_WIDTH;
    int y = cardRow * MainScreenElements.CARD_HEIGHT;

    return new Rectangle(x, y, MainScreenElements.CARD_WIDTH, MainScreenElements.CARD_HEIGHT);
}

Managing Network Data

One thing that increases the complexity of this game (in no small way) is the management of network data. First of all, the host’s actions are a superset of the peer’s actions (a host is also a peer, but it also has to manage the game and network state). For example, when a peer decides to bet, it has to send a message to the host saying “I would like to bet,” and then the host will process that message and relay it to the other peers. The host is also responsible for managing whose turn it is and determining who the winner is. Theoretically, you could do a lot of this with every peer acting equally but it feels safer to me to have the host responsible for important activities like dealing cards. In fact, the host has to be the only one who can deal cards, because if each client maintained its own deck, it would be randomized for every peer when the deck is shuffled.

How Data Is Sent And Received

I will usually create a static class called NetworkMessageSender that is responsible for sending various messages. I keep an enumeration of type byte that holds the possible network messages.

I always send the byte indicating the message type first, so that when the peer receives a byte, it knows how to respond. For example, if the peer receives a CardDealt message, it can pop off a string and a card from the incoming packets. If the card is not intended for the peer, it can simply discard the message.

Data you want to send is written to a packet writer object. When the data is ready to be sent, you call the SendData method of the LocalGamer object. Depending on how important packet receipt is, you can specify the type of transmission. I use ReliableInOrder during poker because network data is exchanged relatively infrequently. Although there is only one local network gamer, you can use a foreach loop to ensure this code will work on other platforms.

private static void SendData()
{
    foreach (LocalNetworkGamer gamer in NetworkSessionManager.Session.LocalGamers)
        gamer.SendData(NetworkSessionManager.PacketWriter, SendDataOptions.ReliableInOrder);
}

Specific chunks of data are then sent using various static methods. Each piece of information is written sequentially. The card is serialized into a string format before being sent. The following chunk of code is used to send a card to a player.

public static void DealCards(HoldemPlayer player)
{
    NetworkSessionManager.PacketWriter.Write((byte)NetworkMessageType.Deal);
    NetworkSessionManager.PacketWriter.Write(player.Name);
    NetworkSessionManager.PacketWriter.Write(player.Pocket.Card1.Serialize());
    NetworkSessionManager.PacketWriter.Write(player.Pocket.Card2.Serialize());
    SendData();
}

On the other side of that, whenever the screen updates, the game is constantly checking for new network data. The following code is part of a method that is called from the game screen’s Update loop.

private void UpdateNetworkSession()
{
    NetworkSessionManager.Update();

    foreach (LocalNetworkGamer localGamer in 
        NetworkSessionManager.Session.LocalGamers)
    {
        while (localGamer.IsDataAvailable)
        {
            NetworkGamer sender;
            localGamer.ReceiveData(NetworkSessionManager.PacketReader, 
                out sender);

            // Interpret the first piece of information, the message.
            NetworkMessageType message = (NetworkMessageType)NetworkSessionManager.PacketReader.ReadByte();

            // Determine what to read and what to do based on this message type
            switch (message)
            {
                // major snippage
                case NetworkMessageType.Deal: // Happens when a card is dealt
                {
                    string playerName = NetworkSessionManager.PacketReader.ReadString();
                    string card1 = NetworkSessionManager.PacketReader.ReadString();
                    string card2 = NetworkSessionManager.PacketReader.ReadString();

                 _gameplayManager.Players[playerName].Pocket.Set(PlayerPocket.FIRST_CARD_INDEX, new 
                    Card(card1));
                 _gameplayManager.Players[playerName].Pocket.Set(PlayerPocket.SECOND_CARD_INDEX, new 
                    Card(card2));
                }
                break;
            }
        }
    }
}

There is a whole bunch of similar code that underlies how the game executes. When a message needs to be sent, the NetworkMessageSender class is used. To determine what happens when a message is received, we look at that ginormous switch statement that gets called in the screen update loop.

Remember that the host is also a peer and it will receive the very same messages it sends (unless you specify otherwise). Be careful not to double-process messages if they are sent by the host. In some cases you will need to check that the current device is or is not the host. In the sample download, this is achieved just by checking a Boolean value that is set early on in the game.

Conclusion

Building Poker for the Zune, from the ground up, is no small feat! Networked Zune games are far simpler when you have a much more limited set of possible data and messages that could be sent. For example, networked Pong, Battleship or Tetris would be pretty easy compared to poker. Turn-based games on the Zune also provide an interesting challenge in terms of what happens when a Zune drops from the network session.

This is just a small dip into networked Zune game development. For a deep dive, check out my book, Zune Game Development using XNA 3.0, also available on Apress.com as an eBook. The final chapter is a sprawling 120 pages covering how to build Crazy Eights for the Zune from the ground up.

About The Author

Dan Waters is an Academic Developer Evangelist at Microsoft, based in Tampa, FL. When he’s not out showing the latest and greatest MS technology to students and faculty, he’s spending time with his wife and young daughter or rocking out on one of his (far too numerous) guitars. Follow Dan on Twitter or check out his blog.

Coding Unreal Tournament3 Bots

Coding4Fun — Tue, 16 Dec 2008 23:32:00 GMT

Have you ever played a first person shooter? Then you've probably played against computer controlled players known as "bots" which are computer programs designed with artificial intelligence. Up until now the only way to do create your own bot for a game like Unreal Tournament 3 was to learn a bunch of C++ and complicated AI routines. Of course, what you really want to do is code up your bot using C# or VB and Visual Studio Express. So here is a way to do just that.

Your First Bot

Once you've created a new bot you'll have a very basic class with just a constructor and an overridden ProcessActions() method.

C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using UT3Bots;
using UT3Bots.UTItems;
using System.Threading;
using UT3Bots.Communications;


namespace UT3UserBot
{
    public class MyBot : UTBot
    {

        //Constructor for your bot
        public MyBot() : base ("174.133.254.34", "Sitting Duck", BotMesh.Harbinger, BotColor.Red)
        {
        }


        //Method to control the bot once it has connected to the server
        protected override void ProcessActions()
        {
            //Add code here to perform some actions at specific intevals
        }
    }
}

VB

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text

Imports UT3Bots
Imports UT3Bots.UTItems
Imports System.Threading
Imports UT3Bots.Communications


Namespace UT3UserBot
    Public Class MyBot
        Inherits UTBot

        'Constructor for your bot
        Public Sub New()
            MyBase.New("174.133.254.34", "Sitting Duck", BotMesh.Harbinger, BotColor.Red)
        End Sub


        'Method to control the bot once it has connected to the server
        Protected Overloads Overrides Sub ProcessActions()
            'Add code here to perform some actions at specific intevals
        End Sub
    End Class
End Namespace

Setting Up Your Bot

The first thing you need to do for your bot is configure it with a look and feel, and then actually connect to the server and get in the game. This is pretty straightforward, all you need to do is alter the parameters that are getting sent up to the base bot class in the constructor.

Server IPAddress - The first parameter is the IPAddress of the server to connect to. By default this points to the UT3Bots server we have running on the internet (ut.utbots.com), you'll need to alter this to point to the server you need to connect to.
Name – The name of your bot will be seen on the Visualizer and in game.
Bot Mesh – This is the appearance of your bot on the server.
Bot Color – This is the color of your bot.

Now you are ready to join a UT3 game.

Pressing F5 will build and run your bot. The bot project will load up a little console application which provides info about what your bot is doing.

Bot's First Sight

Now that we have a bot in the game we need to make it actually do something. The first thing we are going to make it do is move to a UTNavPoint. This is a location in the game which might hold something interesting. A series of UTNavPoints provide a path through the level to interesting items. A bot can travel around a game level by moving from one UTNavPoint to another.

Within the game framework (UT3RemoteBot.dll), an instance of the UTVector class can be used to express the actual location of something. The location of a UTNavPoint is given by its Location property, which is given as a UTVector value.

Our bot needs to have a way of keeping track of where it is going so in the UT3UserBot class create a new private UTVector called destinationLocation

C#

private UTVector destinationLocation;

VB

Private destinationLocation As UTVector

We want our bot to head towards the first navpoint that it “sees”. To do this we place the following code into the ProcessActions() method.

C#

this.destinationLocation = this.GameState.NavPointsVisible[0].Location;

VB

Me.destinationLocation = Me.GameState.NavPointsVisible(0).Location

The GameState property of our bot contains information on the current state of the game. NavPointsVisible is a list of references to UTNavPoint instances which refer to all of the UTNavPoints a bot can currently see. The above code simply takes the UTVector at position 0 (the first navigation point your bot can see) and sets destinationLocation to refer to it.

So at this point the bot has identified the location it wants to move towards, now we have to make it move in that direction.

Bot's First Steps

Now we are going to make our bot move to the destination it has selected. Place the following code into the ProcessActions() method just below the code written in the previous example.

C#

this.Commands.RunTo(this.destinationLocation);

VB

Me.Commands.RunTo(Me.destinationLocation)

The Commands property provides a set of methods which are the commands that your program can give to the bot. There are a wide range of commands, some of which are listed below. For full details you should investigate the API reference.

Jump() - Jumps in the air
RotateBy() - Rotates by a specific number of degrees
RunTo() - Runs to a specific location
StartFiring() - Attacks a target or location
StopFiring() - Stops the bot from shooting
StrafeTo() - Strafes to a specific location while looking at another

The RunTo() command is provided with a destination location. When this method is called your bot will start running towards the destination.

If you execute this program you will see your bot start running towards a navigation point.

Bot's First Shot

For the purpose of this example we will next make our bot shoot at the location it is running towards, it is recommended that you change this when creating your own implementation as shooting at an empty UTNavPoint is unlikely to get you many frags.

Place the following code into the ProcessActions() method just below the code written in the previous example.

C#

this.Commands.StartFiring(this.destinationLocation, false);

VB

Me.Commands.StartFiring(Me.destinationLocation, false)

If you execute the program you will see that your bot now shoots at the location as it runs towards it. It will continue running and shooting until you call a method to instruct it to stop, or it runs out of ammo!

Place the following code into the ProcessActions() method just below the code written in the previous step.

C#

this.Commands.StopFiring();

VB

Me.Commands.StopFiring()

Your bot will now stop shooting.

So you now know how to get your bot to do something in the game. Running around and shooting things is as easy as using the GameState property to access what your bot can see, and the Commands property to call methods that perform actions.

Bot's First Reaction

Now we are going to make the bot react to things that happen in the game. This is done by subscribing to any of the events that the bot exposes through its Events property. We normally want to subscribe to the game events as soon as the bot starts, so that we get all the juicy information that we can use to make a clever bot. You can do this by attaching an event handler to an event in the constructor for your bot.

In this example we will subscribe to the OnSpawned event which is trigged whenever the bot spawns in the game, whether this is the first time, or after it has died.

Place the following code into the constructor of the MyBot class.

C#

this.Events.OnSpawned += new EventHandler<BotSpawnedEventArgs>(Events_OnSpawned);

VB

AddHandler Me.Events.OnSpawned, AddressOf Events_OnSpawned

You also need to add a new method to the class that will be called when the bot spawns.

Place the following method code into the MyBot class.

C#

void Events_OnSpawned(object sender, BotSpawnedEventArgs e)
{
    this.Commands.PerformEmote(Emote.PelvicThrust);
}

VB

Private Sub Events_OnSpawned(ByVal sender As Object, ByVal e As BotSpawnedEventArgs)
    Me.Commands.PerformEmote(Emote.PelvicThrust)
End Sub

Your bot will now start performing some fetching pelvic thrusts whenever it spawns in the game. This won't actually help you get any extra frags, but maybe it'll start a new craze!

There are many different events you can attach handlers to which will allow you to change your bot behavior to react to different circumstances. For full details you should investigate the API reference or check out Visual Studio's intellisense.

Viewing Your Bot In Action

You can easily find out what your bot is up to by using the special Silverlight 2 visualizer we have created. When you open the visualizer web page in your browser, you can automatically see the status of the server running the Bot game type and get a bird's eye view of the game in progress. You can see the waypoints which are marked by green dots and the active players which have their name next to moving circles with a line indicating which way they are facing. From here you can view the game and see what your bot is doing as shown in the visualizer screenshot.

What To Do Next

Now that you have got your bot into the game and made it move around a bit you can start thinking about making it into a decent player of the game. Take a look at the other members of the GameMap class so that your bot can look for weapons and health packs and move towards them. Then take a look at the members of the GameState class for the information that your bot is given about the game around it.

One thing you will need to add is some way that your bot can be in a particular state at any given time. Sensible states might be "Roaming", "Hunting", "Idle", "Recovering", etc. Depending on the state your bot is in it will do different things each time ProcessActions is called.

If it is in the roaming state, for example, it will be looking for a navigation point. If it is in the hunting state it will be chasing other bots. If it is in the recovering state it will be avoiding other bots and looking for a health pack, and so on. You can keep track of the state of your bot by creating an enumerated type with the different values. Then your ProcessActions method can contain a switch statement which makes it behave differently, depending on what it is doing.

A state machine is just one way you could program your AI, you could make a sophisticated bot that had a way of determining if a result had a positive or negative consequence and then have the bot perform more actions that had a positive consequence. Essentially a learning bot, be careful though if your bot takes too long executing ProcessActions it will get out of touch with the game as messages will sit on the queue unprocessed waiting for your code to finish.

Conclusion

With this quick getting started guide you should be able to go about creating your own UT3 Deathmatch player. There are also some very handy hints in the FAQ below about getting your bot on the road to stardom.

If you’re feeling particularly brave join our project on CodePlex at http://www.codeplex.com/UT3Bots and help pitch in with improving the bot client, the visualizer, or even the server mutator.

Happy Fraggin'!

Sammy The Snake: An XNA game for the Zune

Coding4Fun — Mon, 06 Oct 2008 21:06:00 GMT

Nick Gravelyn of NickOnTech.com

Download: http://codeplex.com/sammythesnake
Software: Visual C# Express Editions, XNA Game Studios 3.0
Difficulty: Intermediate
Time Required: 8 hours
Cost: Free

Artwork courtesy of George Clingerman of XNADevelopment.com
Side note: XNA is c# only

In the exciting world of XNA Game Studio, the new big thing is the XNA Game Studio 3.0 Beta. This beta allows developers to glimpse what will be coming with the full release of XNA Game Studio 3.0. One of the largest new features coming with XNA Game Studio 3.0 is the new ability to create games for Microsoft’s Zune media device. What we’re going to cover today is how to create a full game for the Zune, specifically a clone of the classic “Snake” game.

To begin you need to make sure you are set up to start working on Zune games. For all the details and instructions you will need for this step, please visit http://creators.xna.com/en-us/3.0beta_mainpage. Once you have read and completed steps one and two, continue on with this tutorial.

Welcome back! Now that you’re all set up with XNA Game Studio 3.0 Beta, we can start working on our game. Since we want to test our game as we go forward, we’re actually going to create the game as a Windows game first and then simply convert it to be a Zune project when we are finished. First open up Visual Studio 2008 or Visual C# 2008 Express and create a new Windows project. Let’s call it “SammyTheSnake”. Choose the location to save the project and hit Ok.

Now that we have the project created let’s start out first by adding in the content for our game. George Clingerman of XNADevelopment.com was nice enough to create some pretty graphics for this tutorial so those are the ones we are going to add to the project. In Visual Studio you will have a panel called the Solution Explorer which will show you all of the files in your project. In that window you want to find the Content node of your project. Right click on the Content node and choose Add->New Folder. Name this new folder “Fonts”. Then add a second folder called “Sprites”. At this point your Solution Explorer should look like what is to your right:

Let’s continue by adding our content files. The easiest way to add the sprites to our project is to simply drag and drop them in from the folder. Another method is to right click on the “Sprites” folder, select Add->Existing Item. Then you can navigate to the directory where the graphics are, select them, and click Ok. When completed you will see all five images are copied into the Sprites directory:

Next we’ll create the three fonts that we will be using for the game. To create a font, right click on the “Fonts” folder and select Add->New Item. In the pop up window you will see an item called a “Sprite Font”. Select that item, name your file “MiniFont.spritefont”, and then press Ok. When created it will open up in Visual Studio. The .spritefont file is simply an XML document describing which font you want to use. For our purposes there are only two nodes we need to change. First find the node that looks like this:

<FontName>MiniFont</FontName>

The FontName node specifies which font we wish to use. Let’s change our font to Arial:

<FontName>Arial</FontName>

Next we need to change the size of the font. Let’s find the Size node which, by default, is set to 14:

<Size>14</Size>

And let’s change our font to size 10:

<Size>10</Size>

Now that you know how to create fonts, create two more fonts: “MediumFont.spritefont” and “TitleFont.spritefont”. Both fonts should use the Arial font. MediumFont should be size 14 (the default value) and TitleFont should be size 18.

Now you have all the content our game needs. Let’s take a look at the Solution Explorer one last time to make sure we have all the files in the correct locations:

Now that all of the content is in place, we can begin working on the game. Let’s start writing that code!

To begin we want to make sure our Windows game looks just like the Zune version will. Since the Zune screen has a resolution of 240 pixels by 320 pixels, we want to make our Windows game run in a window set at 240x320. To do this we just need to add two lines of code to our Game1 class’s constructor:

public Game1()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";

    graphics.PreferredBackBufferWidth = 240;
    graphics.PreferredBackBufferHeight = 320;
}

The next thing to consider is our game’s flow. Since we are making a simple game, we are only ever going to have three states in which the game can be in as illustrated by this diagram:

From the diagram we see that our game will have a title screen, some game play, and a game over screen. The arrows represent the changes in game state. From the title screen we can only progress to the in-game screen. From the in-game screen we can either quit, going back to the title screen, or we can finish the game and move to the game over screen. From the game over screen we then return to the title screen and the process repeats until the user quits.

Now that we have an idea of how our game will work we will start by creating the framework that will manage our game’s state and make sure that we are executing the appropriate code based on the state of the game. First we’ll create a new enumeration type to represent the three states of our game. In the Game1.cs file right above the declaration for the Game class, add this new enumeration:

public enum GameState
{
    Title,
    InGame,
    GameOver
}

Now in the actual Game1 class, we need to add a variable to hold the game’s state:

private GameState state = GameState.Title;

Now we need to create some new methods which will be used to handle updating and drawing our various states. First let’s add three new methods to our Game1 class:

private void UpdateTitleScreen()
{ }

private void UpdateInGame(GameTime gameTime)
{ }

private void UpdateGameOver()
{ }

From the names you can probably see that we have one for each of our three game states. Our UpdateInGame method takes in the GameTime as a parameter because it is used for moving our snake around. The other two game states don’t need that value, so they have no parameters. Now let’s make some changes to the Update method to handle calling each of these methods based on the state of our game:

protected override void Update(GameTime gameTime)
{
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
        this.Exit();

    if (state == GameState.Title)
        UpdateTitleScreen();
    else if (state == GameState.InGame)
        UpdateInGame(gameTime);
    else if (state == GameState.GameOver)
        UpdateGameOver();

    base.Update(gameTime);
}

Now we’ll repeat those steps to make three methods for rendering each state and updating the Draw method to call each of them as appropriate. While we’re at it, we’re also going to change the background from the default of CornflowerBlue to Gray to make it a little easier on the eyes with the white text we’re going to add later:

private void DrawTitleScreen()
{ }

private void DrawInGame()
{ }

private void DrawGameOver()
{ }

protected override void Draw(GameTime gameTime)
{
    graphics.GraphicsDevice.Clear(Color.Gray);

    if (state == GameState.Title)
        DrawTitleScreen();
    else if (state == GameState.InGame)
        DrawInGame();
    else if (state == GameState.GameOver)
        DrawGameOver();

    base.Draw(gameTime);
}

With that our game now has a fully functioning state system. Of course our game only ever has one state since we don’t currently change it, and none of the game states do anything, but the functionality is there. Let’s move on to create the code that will power the title screen.

First we need to add a few strings to our game which will be used on the title screen. Towards the top of your Game1 class, add these string constants:

private const string gameTitle = "Sammy the Snake!";
private const string playInstructions = "Press Play to Begin";
private const string quitInsructions = "Press Back to Quit";

Now we need to add a few variables to the Game1 class to hold our fonts which we’ll be using to render these strings:

private SpriteFont titleFont;
private SpriteFont mediumFont;
private SpriteFont miniFont;

Next we’ll go to our LoadContent method and add in the code that will load those .spritefont files we created earlier and store them in these three variables:

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    titleFont = Content.Load<SpriteFont>("Fonts/TitleFont");
    mediumFont = Content.Load<SpriteFont>("Fonts/MediumFont");
    miniFont = Content.Load<SpriteFont>("Fonts/MiniFont");
}

After that we also need to add two more variables. The first will store the current frame’s input state. The second will store the previous frame’s input state. By storing these two values, we will be able to test for when a button gets pressed by verifying that the button was down the frame before and is pressed in the current frame.

private GamePadState gamePadState;
private GamePadState lastGamePadState;

Now let’s go ahead and make a method which we’ll use to test for new button presses for us. We’ll take a parameter for which button to test and then check for that button being down in gamePadState but up in lastGamePadState.

private bool IsNewButtonPress(Buttons button)
{
    return (gamePadState.IsButtonDown(button) && lastGamePadState.IsButtonUp(button));
}

We’ll go ahead, now, and modify the game’s Update method to handle updating those GamePadState variables we created above. We get the current state right away and then, at the end of the Update method, we store the current state in our last state variable for next frame. We also want to remove the default code in there for exiting when the Back button is pressed because we will handle this in our UpdateTitleScreen method:

protected override void Update(GameTime gameTime)
{
    gamePadState = GamePad.GetState(PlayerIndex.One);

    if (state == GameState.Title)
        UpdateTitleScreen();
    else if (state == GameState.InGame)
        UpdateInGame(gameTime);
    else if (state == GameState.GameOver)
        UpdateGameOver();

    lastGamePadState = gamePadState;

    base.Update(gameTime);
}

With that in place we can move on to filling in our UpdateTitleScreen method. For our simple game, we’re going to simply detect the Play/Pause button to start the game and the Back button to exit. These buttons map to the GamePadState’s B and Back buttons, respectively.

private void UpdateTitleScreen()
{
    if (IsNewButtonPress(Buttons.Back))
        Exit();

    if (IsNewButtonPress(Buttons.B))
    { }
}

For now we’ll leave the inside of our second if statement empty because we have not implemented the in-game game state at this point.

Let’s now move on to rendering our title screen. We know we are going to have to render three different strings to the screen, so what we’re going to do first is write a helper method that will help us write text centered on a point. This will make it easier for us so that we don’t have to try and calculate where to draw each string individually; we can simply use this one method everywhere we need to draw text.

private void DrawText(SpriteFont font, string text, Vector2 position)
{
    Vector2 halfSize = font.MeasureString(text) / 2f;
    position = position - halfSize;

    position.X = (int)position.X;
    position.Y = (int)position.Y;

    spriteBatch.Begin();
    spriteBatch.DrawString(
        font,
        text,
        position, 
        Color.White);
    spriteBatch.End();
}

This is our first complex code so we’re going to take a look at it line by line. The method itself takes in three parameters: the SpriteFont to use for rendering, the text we want to render, and the point at which we want the text centered.

First we use the font’s MeasureString method to calculate how big the text will be (in pixels) if rendered with that font. We then divide this size by two and subtract it from the position. Why do we do all of this? In the XNA framework (and most 2D graphics APIs) positions of objects are specified using the top-left corner of the object. So by getting half of the size of the object and offsetting the position by it, we are able to set the center point and know that the text will be positioned properly.

Once we have offset the position, we then cast each of the components to integers. We do this to avoid unnecessary blurring of our text. Since all text is rendered as whole pixels (because there’s no such thing as a fractional pixel), having a position that is not an integer value will cause the device to try and filter the text to get it to look right, or simply render it incorrectly. So when drawing in 2D, it’s always best to cast your positions to integers before using them to render.

Lastly our method uses a simple SpriteBatch routine to draw the text at the desired position using the desired font using the White color.

With that helper method out of the way, we can add three simple lines to the DrawTitleScreen method to draw our title screen:

private void DrawTitleScreen()
{
    DrawText(titleFont, gameTitle, new Vector2(120f, 25f));
    DrawText(mediumFont, playInstructions, new Vector2(120f, 200f));
    DrawText(mediumFont, quitInsructions, new Vector2(120f, 225f));
}

Now if you run your game, you should see a window like this:

If you have an Xbox 360 controller hooked to your computer, you could press the Back button to quit, but otherwise you can simply use the close button of the window to exit the game.

From this point we’re going to start working on the gameplay. I am only going to be showing GamePad controls for this (since we are targeting the Zune), so if you don't have an Xbox 360 controller connected to your PC, you are either going to have to deploy the game to the Zune each time you want to test or implement keyboard controls. You can skip down to the end of this tutorial where we convert the project to be a Zune game or use other references for that process.

Next we need to add in the game play code itself. Our game is rather simple. At any given time our game will have a single orange on screen, the snake, and a display of the number of oranges consumed. We’re going to start with the orange, then handle the snake, and finally the scoring system.

To begin any of our rendering we need to get setup with a system for easily rendering our game. Since the whole game is grid based, we are going to make a class whose only purpose is to handle rendering a sprite at a given point using grid coordinates. We’ll start by creating a new static class called Grid:

public static class Grid
{ }

Next we will define a few constants. The first sets the size of each grid cell. The second is one half of the grid cell size. We will be using a 16x16 pixel area for our grids. This number has been chosen because both 240 and 320 are even divisible by it, thus giving us a perfect grid for the resolution. We then have values to represent the largest row and column values in our grid:

Next we’ll define a method called PointToVector2. The whole purpose of this method will be to take a Point value representing cell coordinates and converting them into the pixel coordinates needed to render a sprite. To do this we simply multiply the point’s coordinates by the scale and add in the half scale value. We add the half scale so that the resulting Vector2 is at the center of the cell. As I said before you always want to convert to integer based coordinates, but since the Point only contains integer values, and all our constants are integers, we don’t need to explicitly cast the values to ints:

public static Vector2 PointToVector2(Point p)
{
    return new Vector2(
        p.X * Scale + HalfScale,
        p.Y * Scale + HalfScale);
}

The only other method we’re going to add to our Grid class is the DrawSprite method. DrawSprite will handle rendering a given texture at a specific point with a given angle of rotation.

public static void DrawSprite(
    SpriteBatch spriteBatch, 
    Texture2D texture, 
    Point point, 
    float rotation)
{
    float spriteSize = (float)Math.Max(texture.Width, texture.Height);
    Vector2 origin = new Vector2(texture.Width / 2f, texture.Height / 2f);
    spriteBatch.Draw(
        texture,
        PointToVector2(point),
        null,
        Color.White,
        rotation,
        origin,
        Scale / spriteSize,
        SpriteEffects.None,
        0);
}

Let’s walk through what this method is doing so that we’re all clear as to how it works. We first calculate the largest dimension of the texture given to us. We do this so we know how much to scale the sprite to make it fit into a single cell of the grid. Then we compute the origin we’ll use for rendering. I’ll explain the origin below as we go through the parameters of our Draw call.

Next we make a large call to spriteBatch.Draw, where we have lots of variables going in. Let’s just explain each one briefly:

texture – This represents the texture object we want to draw.
PointToVector2(point) – Here we leverage the Grid.PointToVector2 method we wrote before to convert our grid coordinate to pixel coordinates.
null – This parameter represents the source rectangle used to render. The source rectangle is used to specify a subsection of the area of the texture to use for rendering. Since we want to draw the entire texture, we use null here.
Color.White – Using white here simply causes the sprite batch to render the texture with no color modifications.
rotation – The rotation (specified in radians) instructs the sprite batch to rotate the texture as desired.
origin – Here we use the origin value we calculated earlier. This value specifies how to place, rotate, and scale the texture. What we’ve done is specified the pixel value of the center of our sprites. The sprites created for us are 32x32 pixels making their center point 16x16. Rather than hard coding in that value, we simply divide the width and height by two. By using the center of the texture, our sprite will be positioned such that the second parameter tells the sprite batch where we want the center of our texture. It also means that the sprite will be rotated and scaled about its center.
Scale / spriteSize – Here we use our grid’s Scale value and divide it by the size of the sprite. This will cause sprite batch to scale the texture so that it fits completely within a single grid cell.
SpriteEffects.None – SpriteEffects are used for flipping the texture over the horizontal axis, vertical axis, or both. We don’t want to flip the texture, so we specify none.
0 – The last parameter is the layer depth. This can be used to specify the order in which sprites drawn in the same batch are layered when rendered with zero being the topmost drawn sprites and one being the bottom most drawn sprites. We just use zero here because we will be handling the rendering order by hand so that sprites we want lower will be drawn first. In addition we will rarely ever have overlapping sprites, so ordering is hardly an issue for us.

With the Grid class complete, we can move on to create the Orange class:

public class Orange
{
    Position = new Point(Grid.MaxColumn / 2, Grid.MaxRow / 2);
}

Now let’s think about what data our orange will need. The two obvious ones are a position and the texture. But we also need a third value: a random number generator which will be used to place the orange in a random place on the screen:

public Point Position;
private Texture2D texture;
private Random rand = new Random();

Now we’re going to add three short methods to our Orange class that will handle just about all the functionality we will need for this game:

public void Reposition()
{
    Position = new Point(rand.Next(Grid.MaxColumn), rand.Next(Grid.MaxRow));
}

public void Load(ContentManager content)
{
    texture = content.Load<Texture2D>("Sprites/Orange");
}

public void Draw(SpriteBatch spriteBatch)
{
    spriteBatch.Begin();
    Grid.DrawSprite(spriteBatch, texture, Position, 0f);
    spriteBatch.End();
}

Our Reposition method is what will generate a random location in our grid at which the orange will be placed. The Load method requires a ContentManager instance and handles loading our orange texture from file. Lastly the Draw method takes in a SpriteBatch instance and handles rendering the orange using our Grid class’s DrawSprite method.

Before continuing on, let’s give this class a try to make sure it works like we think it should. First let’s head to the Game1 class and add a new variable for the orange. We’ll also set our starting game state to the InGame playing state:

private Orange orange = new Orange();
private GameState state = GameState.InGame;

Then we need to make sure call the orange’s Load method in our LoadContent method:

protected override void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);
    titleFont = Content.Load<SpriteFont>("Fonts/TitleFont");
    mediumFont = Content.Load<SpriteFont>("Fonts/MediumFont");
    miniFont = Content.Load<SpriteFont>("Fonts/MiniFont");

    orange.Load(Content);
}

Next we’ll go to our UpdateInGame method and add in some code that will call the orange’s Reposition method every second:

private void UpdateInGame(GameTime gameTime)
{
    if (gameTime.TotalGameTime.Milliseconds % 1000 == 0)
        orange.Reposition();
}

Lastly we’ll add to the DrawInGame method so that it call’s the orange’s Draw method:

private void DrawInGame()
{
    orange.Draw(spriteBatch);
}

Build and run the game. You should see the same gray window with a single orange drawn. Every second the orange will move to a new grid location on the screen.

Now we will be creating our Snake class:

public class Snake
{ }

The Snake class is a bit more complex. Logically let’s lay out what data the class will need:

A list of points for each segment of the body.
The four textures (head, straight body piece, angled body piece, and tail) with which we will render the snake
A value indicating how fast the snake should be moving.
A value indicating the snake’s current direction and the direction he will be moving next.
A value indicating whether or not to extend the snake’s length the next time it moves.
A timer value so that we can control how often the snake moves from grid cell to grid cell.

A good amount of data for something that seems rather simple. We’ll start by creating an enumeration for those direction values we are going to need:

public enum Direction
{
    Up,
    Down,
    Left,
    Right
}

Next we’ll go ahead and add all the variables to our Snake class itself:

public const float MoveSpeed = .2f; 
private float moveTimer;
private Texture2D head, straight, angle, tail;
private List<Point> bodyPoints = new List<Point>();
private Direction currentDirection = Direction.Right;
private Direction nextDirection = Direction.Right;
private bool extending;

Everything here should be rather self explanatory. The MoveSpeed represents the number of seconds before the snake proceeds to the next grid cell and the moveTimer will be used to count up to this value. We then have our four textures, a list for the body points, and two values for the current and next direction. Lastly our bool value to tell us whether the snake should extend the next time it moves.

Now we’re going to add a new method called Reset which will be called from the Snake’s constructor. Reset is responsible for placing our Snake it its starting position in the game.

public Snake()
{
    Reset();
}

public void Reset()
{
    bodyPoints.Clear();

    bodyPoints.Add(new Point(2, 0));
    bodyPoints.Add(new Point(1, 0));
    bodyPoints.Add(new Point(0, 0));

    currentDirection = Direction.Right;
    nextDirection = Direction.Right;
}

In the Reset method, first we make sure to clear out the list of points for the snake’s body. Next we add three points to the body. The first point sets the position of the head, followed by a single body piece, and lastly the tail. To finish we also make sure to reset both the current and next direction values to Right so that the snake begins by heading to the right.

Next we’ll make a Load method which, like the Orange class, handles loading in the textures needed to render the snake:

public void Load(ContentManager content)
{
    head = content.Load<Texture2D>("Sprites/Head");
    straight = content.Load<Texture2D>("Sprites/Straight");
    angle = content.Load<Texture2D>("Sprites/Angle");
    tail = content.Load<Texture2D>("Sprites/Tail");
}

Continuing on we’re going to implement the rendering for the snake. This is the most complex part of this entire game, but we’ll take it one step at a time to make sure each line of code is explained. First let’s add the five methods we’ll be using:

public void Draw(SpriteBatch spriteBatch)
{
    spriteBatch.Begin();

    for (int i = 1; i < bodyPoints.Count - 1; i++)
    {
        DrawBody(
            spriteBatch, 
            bodyPoints[i], 
            bodyPoints[i - 1], 
            bodyPoints[i + 1]);
    }

    DrawTail(spriteBatch);
    DrawHead(spriteBatch);
    spriteBatch.End();
}

private void DrawHead(SpriteBatch spriteBatch) { }
private void DrawTail(SpriteBatch spriteBatch) { }
private bool IsAnglePiece(Point current, Point last, Point next) { }
private void DrawBody(SpriteBatch spriteBatch, Point current, Point last, Point next) { }
private float GetAngleRotation(Point current, Point last, Point next) { }

We can see that we have broken the rendering up into multiple methods to make the code a bit more organized. We have the main Draw method which will be used by our Game1 class to handle drawing the snake. The method has a single SpriteBatch instance for a parameter.

Then we loop through the bodyPoints list starting on the second item and going up to the second to last item. We intentionally do not use the first or last points because those represent the head and tail, respectively.

After we draw the body, we then draw the tail and head. The order in which we call these methods will affect the graphics to a small degree. The important part is drawing the head last. By doing this we ensure that even when the head and a body piece overlap (for instance, when the snake runs into itself) the head will be drawn on top of the body part.

Next we’ll go ahead and fill in the DrawHead method:

private void DrawHead(SpriteBatch spriteBatch)
{
    Point headPoint = bodyPoints[0];
    Point nextBody = bodyPoints[1];

    float rotation;
    if (headPoint.Y == nextBody.Y - 1)
    {
        rotation = -MathHelper.PiOver2;
    }
    else if (headPoint.Y == nextBody.Y + 1)
    {
        rotation = MathHelper.PiOver2;
    }
    else if (headPoint.X == nextBody.X - 1)
    {
        rotation = MathHelper.Pi;
    }
    else
    {
        rotation = 0f;
    }

    Grid.DrawSprite(spriteBatch, head, headPoint, rotation);
}

While this looks really complex, it’s rather simply once you look at it. First we get out the position of the head and then the first body point after that. What we then do is compare those points to figure out what angle to use when rendering the head. Finally we just use the Grid.DrawSprite method to render the head to the screen.

Now we’ll fill in the DrawTail method. This method is almost identical to the DrawHead method so there really is no explanation needed:

private void DrawTail(SpriteBatch spriteBatch)
{
    Point tailPoint = bodyPoints[bodyPoints.Count - 1];
    Point lastBody = bodyPoints[bodyPoints.Count - 2];

    float rotation;
    if (tailPoint.Y == lastBody.Y - 1)
    {
        rotation = MathHelper.PiOver2;
    }
    else if (tailPoint.Y == lastBody.Y + 1)
    {
        rotation = -MathHelper.PiOver2;
    }
    else if (tailPoint.X == lastBody.X + 1)
    {
        rotation = MathHelper.Pi;
    }
    else
    {
        rotation = 0f;
    }

    Grid.DrawSprite(spriteBatch, tail, tailPoint, rotation);
}

We’ll tackle the IsAnglePiece method next. This method is used by the DrawBody method to determine if a given point should be drawn with the angled body piece or the straight body piece. To do this we compare the positions of the current body piece, the previous body piece, and the next body piece to determine if they make up a right angle or not:

private bool IsAnglePiece(Point current, Point last, Point next)
{
    return (current.X == last.X && current.X != next.X && current.Y != last.Y) ||
           (current.X == next.X && current.X != last.X && current.Y != next.Y);
}

With that completed we can fill in the DrawBody method. This method is also pretty simple:

private void DrawBody(SpriteBatch spriteBatch, Point current, Point last, Point next)
{
    if (IsAnglePiece(current, last, next))
    {
        Grid.DrawSprite(
            spriteBatch, 
            angle, 
            current, 
            GetAngleRotation(current, last, next));
    }
    else if (current.X != last.X)
    {
        Grid.DrawSprite(
            spriteBatch, 
            straight, 
            current, 
            0f);
    }
    else if (current.Y != last.Y)
    {
        Grid.DrawSprite(
            spriteBatch, 
            straight, 
            current, 
            MathHelper.PiOver2);
    }
}

First we check to see if the three points comprise and angle. If they do we use the Grid.DrawSprite method to render the angle texture at the current position. For the angle we utilize the GetAngleRotation method which we will be filling in later.

If we don’t have an angle piece, we then figure out whether the body piece is horizontal or vertical and use that to render the straight body piece with either zero or PiOver2 as the angle.

Finally we come to the GetAngleRotation method. This method takes three Points and determines the angle at which the sprite must be drawn in order to connect the three body pieces. Here’s the code for this method:

private float GetAngleRotation(Point current, Point last, Point next)
{
    Point negPiOver2 = new Point(next.X + 1, last.Y - 1);
    Point negPiOver22 = new Point(last.X + 1, next.Y - 1);

    Point pi = new Point(next.X - 1, last.Y - 1);
    Point pi2 = new Point(last.X - 1, next.Y - 1);

    Point piOver2 = new Point(next.X - 1, last.Y + 1);
    Point piOver22 = new Point(last.X - 1, next.Y + 1);

    if (current == negPiOver2 || current == negPiOver22)
    {
        return -MathHelper.PiOver2;
    }
    else if (current == pi || current == pi2)
    {
        return MathHelper.Pi;
    }
    else if (current == piOver2 || current == piOver22)
    {
        return MathHelper.PiOver2;
    }
    else
    {
        return 0f;
    }
}

The method begins by calculating a set of Points. Each pair of points represents one of the combinations that will result in a particular angle. This can take a little bit to wrap your head around, so if you have trouble visualizing it, I’d recommend grabbing (or making) some grid paper and drawing the points out so you can see how they all fall into place.

We then go through and compare the current point to each set of our values. If any match up, we return that value. If none match, we don’t have any rotation to apply to the sprite.

That completes the snake’s rendering system. It was a pretty big hill to take, but with it behind us we can feel good knowing that the rest of the code will be quite a bit simpler. Before we move on, let’s head back to the Game1 class to test out our new class and make sure it works.

First we’ll add a new variable for the snake:

private Snake snake = new Snake();

Next we head to the LoadContent method and make sure we call the snake’s Load method:

snake.Load(Content);

Lastly for this test we’ll just add a call to the snake’s Draw method in our DrawInGame method:

private void DrawInGame()
{
    orange.Draw(spriteBatch);
    snake.Draw(spriteBatch);
}

Go ahead and run the game now and you should see the little snake in the top-left corner of the screen along with the orange that we added earlier:

There is already one issue with our game. The orange, as it keeps repositioning, occasionally will position itself underneath the snake. We want to avoid this at all costs. To accomplish this we need to add a new method to the Snake class called IsBodyOnPoint which will tell us whether a given grid cell is occupied by one of the snake’s body parts. To do this we simply leverage the list’s Contains method:

public bool IsBodyOnPoint(Point p)
{
    return bodyPoints.Contains(p);
}

Next we will modify the Orange class’s Reposition method to take in a snake instance and use this to make sure we generate a random point not occupied by the snake:

public void Reposition(Snake snake)
{
    do
    {
        Position = new Point(rand.Next(Grid.MaxColumn), rand.Next(Grid.MaxRow));
    } while (snake.IsBodyOnPoint(Position));
}

By using the do-while loop, we ensure that we will run that code at least once. Then if the position is found to be occupied by the snake, the code will continue looping until an unoccupied space has been found.

Let’s go ahead and update our code found in the Game1 UpdateInGame method to match this new method signature:

private void UpdateInGame(GameTime gameTime)
{
    if (gameTime.TotalGameTime.Milliseconds % 1000 == 0)
        orange.Reposition(snake);
}

Now if you run the game, you’ll notice the orange will never, ever position itself underneath of the snake. We now have enough of the core to begin working on making the snake move around. Let’s head to the Snake class and add a few new methods:

public void Update(GameTime gameTime)
{ }

private void HandleInput()
{ }

private void MoveSnake()
{ }

These three methods will handle all of our update code for the snake. First we’ll start by filling in the main Update method:

public void Update(GameTime gameTime)
{
    HandleInput();

    moveTimer += (float)gameTime.ElapsedGameTime.TotalSeconds;

    if (moveTimer < MoveSpeed)
    {
        return;
    }

    moveTimer = 0f;
    currentDirection = nextDirection;
    MoveSnake();
}

The first thing our method does is call the HandleInput. Next we add the elapsed time in seconds to our moveTimer variable. Then we see if the moveTimer is less than the MoveSpeed value. If moveTimer is less than the MoveSpeed we know that enough time has not elapsed so we call ‘return’ to exit out of our update method. If moveTimer has exceeded the MoveSpeed value, we proceed on with updating. The next thing we do is reset the moveTimer. Then we assign the nextDirection as our currentDirection and call the MoveSnake method.

We’ll continue by filling in the HandleInput method:

private void HandleInput()
{
    GamePadState gps = GamePad.GetState(PlayerIndex.One);

    if (gps.IsButtonDown(Buttons.DPadDown) && currentDirection != Direction.Up)
    {
        nextDirection = Direction.Down;
    }
    if (gps.IsButtonDown(Buttons.DPadUp) && currentDirection != Direction.Down)
    {
        nextDirection = Direction.Up;
    }
    if (gps.IsButtonDown(Buttons.DPadLeft) && currentDirection != Direction.Right)
    {
        nextDirection = Direction.Left;
    }
    if (gps.IsButtonDown(Buttons.DPadRight) && currentDirection != Direction.Left)
    {
        nextDirection = Direction.Right;
    }
}

All we are doing here is finding out which DPad direction is down and using that for the next direction. We also check to make sure that the next direction is not the direct opposite of the current direction. Pretty simple.

Next is the MoveSnake method. This method takes care of two things for us. First it handles updating all the body points in the snake to move him around the grid. The second thing it handles is inserting new body pieces as requested. Let’s take a look at the code:

 private void MoveSnake()
{
    Point p1 = bodyPoints[0];
    switch (currentDirection)
    {
        case Direction.Up:
            bodyPoints[0] = new Point(p1.X, p1.Y - 1);
            break;
        case Direction.Down:
            bodyPoints[0] = new Point(p1.X, p1.Y + 1);
            break;
        case Direction.Left:
            bodyPoints[0] = new Point(p1.X - 1, p1.Y);
            break;
        case Direction.Right:
            bodyPoints[0] = new Point(p1.X + 1, p1.Y);
            break;
    }
    if (extending)
    {
        bodyPoints.Insert(1, p1);
        extending = false;
        return;
    }
    for (int i = 1; i < bodyPoints.Count; i++)
    {
        Point p2 = bodyPoints[i];
        bodyPoints[i] = p1;
        p1 = p2;
    }
}

Going through this little by little, what we first do is get the position of the head to store that for the next body part. We then use the currentDirection value to move the head to the next position it should be at.

Following that we see if we need to add in a new body piece. If we need to, we simply insert the point the head used to be at into the list behind the head and exit the method since we have filled the gap left by moving our head.

If we did not extend, we then loop through all remaining body parts (including the tail) and update them by moving them to position of the body part in front of them.

We’ll follow this up by again testing our code to make sure it all works. Head back to the Game1 class and update the UpdateInGame method to call the snake’s Update method:

private void UpdateInGame(GameTime gameTime)
{
    if (gameTime.TotalGameTime.Milliseconds % 1000 == 0)
        orange.Reposition(snake);
    snake.Update(gameTime);
}

Now when you run the game your snake will take off towards the right. You can now use the DPad of your Xbox 360 controller (or Zune if you have deployed it there) to direct the snake around.

At this point we have all the ground work in place. Let’s go ahead and make our gameplay actually goal oriented. First let’s increase functionality that lets our snake eat the oranges. For us to do this, we need to be able to see if the snake’s head is in the same grid cell as the orange. Our orange already has a position value, so we just need to add a method to see if the snake’s head is at that position. We’ll add the following method now to our Snake class:

public bool IsHeadAtPosition(Point position)
{
    return (bodyPoints[0] == position);
}

All this method does is compare the first point in our array to the position given and return if the two values are the same. With this in place, let’s fix up the UpdateInGame method to only reposition the orange when the snake eats it:

private void UpdateInGame(GameTime gameTime)
{
    snake.Update(gameTime);

    if (snake.IsHeadAtPosition(orange.Position))
        orange.Reposition(snake);
}

Our orange is now updated appropriately so that it only repositions itself if eaten by the snake. However our snake still doesn’t actually grow like he should. So we’ll add another method to the Snake class that tells our snake to extend itself:

public void Extend()
{
    extending = true;
}

We can now add this to our UpdateInGame method so that when the snake eats the orange, not only does the orange reposition itself, but the snake will also grow the next time it moves:

private void UpdateInGame(GameTime gameTime)
{
    snake.Update(gameTime);

    if (snake.IsHeadAtPosition(orange.Position))
    {
        orange.Reposition(snake);
        snake.Extend();
    }
}

Now we’re making some progress. We still have a big problem: there’s no way to lose. In the original game of Snake you would lose by either crashing into the wall of the window or by making the snake crash into itself. We can address both of these cases by adding two methods to the Snake class:

public bool IsLooped()
{
    for (int i = 1; i < bodyPoints.Count; i++)
        if (IsHeadAtPosition(bodyPoints[i]))
            return true;

    return false;
}

public bool IsHeadOffScreen()
{
    Point h = bodyPoints[0];
    return (h.X < 0 || h.Y < 0 || h.X >= Grid.MaxColumn || h.Y >= Grid.MaxRow);
}

The first method, IsLooped, tests all body pieces against the head to see if the head is on the same space as them. The second method, IsHeadOffScreen, checks to see if the head is out of the valid grid locations. Let’s head back to the UpdateInGame method and add in these tests:

private void UpdateInGame(GameTime gameTime)
{
    snake.Update(gameTime);

    if (snake.IsHeadAtPosition(orange.Position))
    {
        orange.Reposition(snake);
        snake.Extend();
    }

    if (snake.IsLooped())
        state = GameState.GameOver;

    if (snake.IsHeadOffScreen())
        state = GameState.GameOver;
}

We now have the ability to lose the game which brings us very close to having a completed game. Let’s now add some code to the start of the UpdateInGame method to let the user exit back to the title screen by pressing the Back button.

private void UpdateInGame(GameTime gameTime)
{
    if (IsNewButtonPress(Buttons.Back))
        state = GameState.Title;

    snake.Update(gameTime);

    if (snake.IsHeadAtPosition(orange.Position))
    {
        orange.Reposition(snake);
        snake.Extend();
    }

    if (snake.IsLooped())
        state = GameState.GameOver;

    if (snake.IsHeadOffScreen())
        state = GameState.GameOver;
}

We are just about done with all of the code for the UpdateInGame method. Let’s finish up by adding the ability to count the oranges that have been eaten. First we need to add a new integer variable to the Game1 class to hold the score:

private int score;

We now just increment the score every time the snake eats and orange. Inside of our UpdateInGame method, update the code for the snake eating the orange to look like this:

if (snake.IsHeadAtPosition(orange.Position))
{
    orange.Reposition(snake);
    snake.Extend();
    score++;
}

We can now focus on finishing the drawing for the DrawInGame. All we need to do is display the current score on the screen. We’ll start by adding a new string constant to the Game1 class:

private const string scoreFormat = "Oranges Eaten: {0}";

The “{0}” in there, if you haven’t worked with format strings before, is a placeholder that specifies where we want to insert our score.

Now let’s head down to the DrawInGame method and add in the code to draw the score to our screen:

private void DrawInGame()
{
    orange.Draw(spriteBatch);
    snake.Draw(spriteBatch);
    DrawText(miniFont, string.Format(scoreFormat, score), new Vector2(120f, 5f));
}

We can run the game and now see how well we’re doing:

We can now quickly fill in both the UpdateGameOver and DrawGameOver screens to simply display the results of the game and await input to return to the title screen. First we’ll add two more string constants to the game:

private const string gameOver = "Game Over!";
private const string gameOverInstructions = "Press Play to Continue";

And then we can fill in the code for our two methods:

private void UpdateGameOver()
{
    if (IsNewButtonPress(Buttons.B))
        state = GameState.Title;
}

private void DrawGameOver()
{
    orange.Draw(spriteBatch);
    snake.Draw(spriteBatch);

    DrawText(titleFont, gameOver, new Vector2(120f, 25f));
    DrawText(mediumFont, string.Format(scoreFormat, score), new Vector2(120f, 200f));
    DrawText(mediumFont, gameOverInstructions, new Vector2(120f, 225f));
}

You can see that we not only draw text in our state, but we also draw the orange and snake. This lets the user see where things were when the game ended and is a nice touch to add to the game.

The last thing we add is the code to make sure that the UpdateTitleScreen method makes sure to reset the snake, orange, and score when the user starts a new game:

private void UpdateTitleScreen()
{
    if (IsNewButtonPress(Buttons.Back))
        Exit();

    if (IsNewButtonPress(Buttons.B))
    {
        snake.Reset();
        score = 0;
        orange.Reposition(snake);
        state = GameState.InGame;
    }
}

And lastly we make sure the initial state is set to the title screen:

private GameState state = GameState.Title;

With that your game is complete! You now have a fully functional Snake clone. “But what about the Zune?”, you ask. Let’s take care of that right now.

XNA Game Studio has always aimed to be a cross-platform tool and the new Zune support is no exception. Getting our project onto a Zune is literally just a matter of clicks. First right click on your game project in the Solution Explorer and choose the Create Copy of Project for Zune menu item. When completed you will have a complete duplicate project that targets the Zune platform. The Solution Explorer should now look like this:

Next we need to build and deploy the game to the Zune. This process is also rather simple. If you went through the tutorial on the download instructions page, this will already be familiar to you. If not, we’ll cover the whole process here.

Head up to the Tools menu and choose the Launch XNA Game Studio Device Center option. You will be presented with a window that looks like this:

Click on the Add Device button and you will see the following dialog:

We want to add a Zune, so click on the Zune button. You should see your Zune appear in the window now:

Note: If your Zune did not appear in the window,make sure you have the latest Zune firmware on your device and that the Zune Player application is closed.

From here select your Zune and press the Next button. After a brief moment you will see the success screen:

Press the Finish button and then close the XNA Game Studio Device Center.

Now click on the Zune project you created earlier and go up to the Build menu and click on Deploy Zune Copy of SammyTheSnake to begin deploying the game to your Zune.

You should see the Zune screen update to show that the game is deploying. Once the text on the screen changes to ”connected” or “waiting for computer”, your game has been completely deployed.

To get to the game on your Zune, simply press the center button to exit XNA Game Studio Connect. Next navigate in your main menu to find the Games option. Inside of there will you will see your newly deployed game. Simply click Play and away you go. Enjoy the new snake game and good luck on your adventures of Zune game development with XNA Game Studio.

Your Code Sunk My Battleship!

Coding4Fun — Sun, 24 Aug 2008 21:00:14 GMT

Clarity Battleship is a multi-player game in which players code the "artificial intelligence" needed to command their fleet to victory on the high seas. The game is built using WPF and WCF.
Bryan Dougherty Bryan's Blog Difficulty: Intermediate Time Required: 1-3 hours to create your own fleet Cost: Free Software: Visual Basic or Visual C# Express Editions Hardware: Download: Download

Clarity Battleship

At Clarity Consulting we’re always looking for a little friendly competition. That’s why a few times a year we hold coding competitions that we call Tech Challenges. I recently organized one based on the classic board game Battleship.

The flow of the game is based loosely on the board game. The simple goal is to sink all of your opponents’ ships. Since we’re writing code though, I decided to step up the game play and make it a more interesting, requiring more strategy than luck. Just like the board game, the battlefield is a grid. Unlike the classic, however, multiple teams can battle at the same time. Each team’s fleet is assigned to a region of the Battlefield.

In our tournament we had six teams battle at a time and held one “Battle Royale” with eleven teams. Below you can see a sample screen shot of a game with three teams. Blocks in red indicate damage. The bottom of the screen displays messages broadcast or information about fleets that have been sunk.

Teams position ships at the beginning of the game and give ships orders to execute including:

Attacking locations on the battlefield
Performing reconnaissance on an area of the battlefield
Broadcasting messages to opponents or conspirators via an “open radio frequency” (collusion and deception are allowed and encouraged!)

Game play is pseudo turn-based. Teams are notified by the game when their ships are ready to execute an order. Teams are also notified as ships are damaged or sunk. The game ends when only one team remains.

Application Architecture

Now that you have a feel for the game play, let’s talk about the code. One reason for building this game was to give myself a fun way to learn more about Windows Communication Foundation (WCF) and Windows Presentation Foundation (WPF), new features of the .NET Framework 3.0.

WCF provides a new unified mechanism for client-server communication that greatly simplifies that amount of work necessary to by standardizing the way you build your communication pieces. I recommend reading this article as a good place to start learning about WCF.

WPF enables richer user interfaces and better integration between developer and designer through the use of XAML. As you can see by my simple (though I think pretty cool) UI, I focused my interest on WCF, but did take advantage of a bit of what WPF has to offer.

Overview

The Battleship application is divided into three parts. The Battleship.Components project is a shared assembly that contains the classes which manage the communication and the logic of the game as well as class definitions for all of the ships (i.e. AircraftCarrier, Battleship, etc.). The Battleship.Gameboard uses WPF to display the action on the battlefield. Finally, console applications are built by each team wishing to compete.

The diagram below shows how the pieces fit together.

WCF Communication

As I mentioned, my focus in development was using WCF to manage the communication between the fleets and the game. I was very interested in exploring the bidirectional communication that can be achieved with WCF because it seemed like a perfect fit for the scenario. A traditional web service can receive messages from clients and send back responses. However, it can’t originate a message on its own to send to the client. For example, with a web service I could easily have a fleet tell the game about an order to execute (i.e. “I want my Battleship to attack 7,2”). However, I can’t have that web service inform another team that its ship was just sunk.

With WCF I was able to achieve this without writing a lot of custom code. There is some complexity in the code, but most of that is because my goal was to hide the communication layer from the building of a fleet so that players could simply focus on writing the code to implement their strategy. The following sections will walk through the flow of the communication.

Server Side

While the Battleship.GameBoard is Windows Forms App, it actually should be considered the server in this application. That’s because it hosts the WCF service that the Fleets call.

To define a WCF service, you start by defining the interface for the service. Similar to the WSDL of a web service, this is going to tell consumers what the contract, or inputs and outputs, of the service are. Callers will call the different operations exposed by the service.

In this application, the IBattleshipGameService interface seen below defines the contract for the service.

[ServiceContract(CallbackContract=typeof(IBattleshipGameServiceCallback))]
public interface IBattleshipGameService
{
    [OperationContract(IsOneWay = true)]
    void RegisterFleet(Fleet fleet);

    [OperationContract(IsOneWay = true)]
    void ExecuteOrder(string shipID, Order order);
}

The interface shows that there are two methods for consumers to call, RegisterFleet and ExecuteOrder. The OperationContract attribute indicates that these are methods. The IsOneWay parameter of the attributes indicates that no response is sent back to callers. That probably seems straightforward for the RegsterFleet call, but you might expect that ExecuteOrder might return a result.

Actually what happens is that when a fleet is registered, the service holds on to a channel for calling back to the fleets. And the ExecuteOrder method only queues up an order for processing, but doesn’t immediately execute it. Before queuing it up, the game logic ensures that there aren’t already too many pending orders in the queue for the ship. This prevents a team from cheating by blasting the server with orders. We’ll delve more into how the communication back to the client is achieved later.

With the interface to the service defined, let’s turn our attention to a portion of the application configuration file.

<configuration>
  <system.serviceModel>
    <services>
      <service name="Clarity.Battleship.Components.GameSide.BattleshipGameService" 
                    behaviorConfiguration="BattleshipGameServiceBehavior">
        <endpoint address="http://localhost:8088/BattleshipGameService"
                  binding="wsDualHttpBinding"
                  contract="Clarity.Battleship.Components.GameSide.IBattleshipGameService"/>
      </service>

This shows the definition of the service. The contract attribute indicates the service will adhere to the IBattleshipGameService interface. The binding attribute indicates that the WSDualHttpBinding will be used. This is the plumbing that allows both services and clients to send and receive messages.

With the interface and configuration in place, a concrete implementation has to be built. The BattleshipGameService class provides this. This class implements the IBattleshipGameService interface described above. The actual code for registering a fleet and executing an order are therefore defined here.

[ServiceBehavior(InstanceContextMode = InstanceContextMode.Single,UseSynchronizationContext = false)]
public class BattleshipGameService : IBattleshipGameService

Note the ServiceBehavior attribute and its InstanceContextMode property that decorate the BattleshipGameService class. WCF uses this attribute to decide how to execute the operation when a call comes into the service. In this case, the attributes indicate that the service should run as a singleton. In other words, all calls will be executed by a single instance of the BattleshipGameService. You can further see this in the following code taken from the constructor of the Game class that shows how the service is actually brought to life.

Uri u = new Uri("http://localhost:8088/BattleshipService");
_gameHost = new ServiceHost(new BattleshipGameService(), new Uri[] { u });
_gameHost.Open();

The ServiceHost (which does what it sounds like and hosts the service) is created by passing in an instance of our service object and the uri for the address of the service (I know the uri seems redundant since it’s in the config, but as far as I saw I had to use this constructor). Since we know the service host will just use the single instance of the BattleShipGameService, we can track that instance through a private property for convenience and hook its events as seen in the code snippets below.

private BattleshipGameService BattleshipGameService
{
    get
    {
        return (BattleshipGameService)_gameHost.SingletonInstance;
    }
}

this.BattleshipGameService.FleetRegistered +=
   new FleetRegisteredEventHandler(BattleshipGameService_FleetRegistered);
this.BattleshipGameService.OrderExecuted += 
   new OrderExecutedEventHandler(BattleshipGameService_OrderExecuted);

This allows us to elegantly pass off the calls to the Game class. The service then acts as a simple pass through and leaves the Game class to manage the game.

Client Side

Now that we’ve covered the basics of the server side, let’s look at what happens on the client side. In each console app, a class is created that derives from the FleetCommander class (there are complete directions on how to do this with the downloadable source). The FleetCommander class exposes all of the ships of the Fleet for the team to program against.

To avoid cheating, (some would call it creative programming) each ship gets a unique identifier set by the Game at startup. That way the Game knows which orders are legitimate. To hide that id and details from the FleetCommander and make a very simple and intuitive interface, the method for executing an order is exposed off of the ship classes. The code snippet below shows how FleetCommander could react to an event indicating that a ship is ready for orders. In this case it is saying that the ship should attack the coordinate at location _targetX, _targetY.

public override void OnShipAwaitingOrders(Ship ship, Order lastOrder)
{
      Order orderToExecute = new Order();
      orderToExecute.Coordinate = new Coordinate(_targetX, _targetY);
      orderToExecute.Type = OrderType.Attack;
      ship.ExecuteOrder(orderToExecute);

Under the covers, the Ship.ExecuteOrder method raises an event which is handled by the base FleetCommander class. The FleetCommander calls the appropriate method on a WCF client class which makes the call to the BattleshipGameService.

A portion of the definition of the WCF client can be seen below. You’ll see that it is a class that derives from the DuplexClientBase. This class manages the channels that pass messages back and forth. You can think of it as similar to a web service proxy class.

public partial class BattleshipGameServiceClient : 
    System.ServiceModel.DuplexClientBase<IBattleshipGameService>, IBattleshipGameService
{

So that covers how messages are sent to the server, but you may be asking yourself “How did a FleetCommander find out it that a ship was awaiting orders?” or for that matter “How does it get notified about anything?”

Well, each FleetCommander has an instance of a listener class which receives callbacks from the game service. The way this is set up for the listener is very similarly to how we set up the service. Once again we start with an interface, in this case the IBattleshipGameServiceCallback interface.

public interface IBattleshipGameServiceCallback
{
    [OperationContract(IsOneWay = true)]
    void OnFleetUpdated(Fleet fleet, FleetUpdateReason reason);

    [OperationContract(IsOneWay = true)]
    void OnGameStateChanged(GameInfo gameInfo);

    [OperationContract(IsOneWay=true)]
    void OnOrderExecuted(string shipID, Order lastOrder);

    [OperationContract(IsOneWay = true)]
    void OnMessageReceived(string data, Coordinate c);

    [OperationContract(IsOneWay = true)]
    void OnFleetSunk(string fleetName);
}

Just like before the OperationContract attributes are used to indicate the methods available. And just like before we need a concrete implementation of the interface. Enter the FleetCommanderListener.

public class FleetCommanderListener : IBattleshipGameServiceCallback

The FleetCommanderListener is used when creating the BattleshipGameServiceClient. As you can see in the constructor definition below, a callbackInstance parameter must be passed in. The BattleshipGameServiceClient can then handle communication to the server via the IBattleshipGameService interface and also listen for communication back that adheres to the IBattleshipGameServiceCallback interface!

public BattleshipGameServiceClient(System.ServiceModel.InstanceContext callbackInstance) :
     base(callbackInstance)

The last little piece of the puzzle is the client configuration file.

  <system.serviceModel>
    <client>
      <endpoint name="Clarity.Battleship.Components.IBattleshipGameService"
                address="http://localhost:8088/BattleshipGameService"
                binding="wsDualHttpBinding"
                bindingConfiguration="BattleshipBinding"
                contract="Clarity.Battleship.Components.GameSide.IBattleshipGameService" />
    </client>
    <bindings>
      <!-- configure a binding that support duplex communication -->
      <wsDualHttpBinding>
        <binding name="BattleshipBinding"
                 clientBaseAddress="http://localhost:6088/BattleshipGameClient/">
        </binding>
      </wsDualHttpBinding>
    </bindings>
  </system.serviceModel>

As you can see from the example above, the configuration is fairly straightforward. Just like in the server config, we say we’re using the wsDualHttpBinding. The one additional piece of info is the clientBaseAddress which tell the server how to call back into the client.

The Complete Picture

So after reading all of this, you might be thinking “I thought he said there wasn’t much custom code needed.” I think that is still true in terms of the WCF. While certainly not trivial, it really boils down to building a couple interfaces, their concrete implementations, and filling out some config files. Most of the complexity came in was in building out the eventing model to simplify the interface for teams.

The following diagram helps pull everything together by showing an example of the flow of the communication for execution of an order.

1. The derived FleetCommander makes calls the ExecuteOrder method on a Ship (i.e. “I want my Battleship to attack 7,2”)

2. The Ship raises an event which is handled by the FleetCommander base class which in turn calls to the BattleshipGameServiceClient

3. This WCF client class makes the WCF call to execute the order

4. The single instance of the service raises an event to the Game class with the order information

5. The Game class which controls all the game flow enqueues the order

6. After processing an order from the queue, the Game calls the OnOrderExecuted WCF callback which gets invoked on the FleetCommanderListener

7. Finally the FleetCommanderListener raises an OrderExecuted event to the derived FleetCommander class (i.e. “Your Battleship’s attack at 7,2 resulted in a Hit”) which is turned calls the OnShipAwaitingOrders method and the cycle starts over

WPF User Interface

The last thing to cover with the architecture is the UI. It is pretty simple, but I wanted to experiment a little with WPF. The Gameboard assembly contains a class called Battlefield that is a WPF Window (comparable to a Winform Form). A Grid control makes up the main component of the gameboard. The grid lent itself to building the UI since everything stretches nicely to fit the screen, regardless of the number of teams competing.

Once the game starts, the game board is setup by adding rectangles and images to the grid control. Throughout the game, the colors of the rectangles are changed to indicate shots, recon, or hit targets.

Below is an example of some of the Battlefield code behind in which the rectangle for the location of the order is painted a different color depending on the result of an order.

Rectangle r = _rectangles[_lastOrderStarted.Order.Coordinate];
if (e.Order.Result == OrderResult.ShipHit)
{
    r.Fill = Brushes.Red;
    _rectangleFills[e.Order.Coordinate] = r.Fill;
}
else if (e.Order.Result == OrderResult.ShipSunk)
{
    r.Fill = Brushes.Red;
    _rectangleFills[e.Order.Coordinate] = r.Fill;
}
else if (e.Order.Result == OrderResult.Miss)
{
    r.Fill = _rectangleFills[e.Order.Coordinate];
}
else
{
    r.Fill = _rectangleFills[e.Order.Coordinate];
}

Conclusion

Hopefully you enjoyed this game and learned a little in process. I encourage you to download the code and build your own fleet. The download includes a document called “Clarity Battleship – Building a FleetCommander” which gives you step by step instructions. Feel free to post your own builds here for other people to challenge and good luck with your battles!

Bryan Dougherty is a Principal with Clarity Consulting, a software development consulting firm based in Chicago, IL. He is an MCP with several years of professional software engineering experience. Bryan earned a B.S. in Computer Science from Northwestern University and writes about topics related to software development on his blog.

YeahTrivia: Creating a Trivia Server/Client with WPF and WCF

Coding4Fun — Tue, 30 Oct 2007 03:01:00 GMT

In this article I'll take you along for the ride as I attack the learning curve required to create a fun, interactive application using both the Microsoft Windows Presentation Foundation (WPF) and the Windows Communication Foundation (WCF). Afterwards, you'll have a flexible trivia client/server game ready to play by yourself or against friends, coworkers and your local know-it-all. And in honor of Halloween, I've included three games of horror movie trivia.

Steve Holstad

The Bright Lights

Difficulty: Advanced

Time Required: 6-10 hours

Cost: Free

Software: Visual Studio Express, 2005, 2008 Beta 2 Microsoft .NET Framework 3.0

Hardware:

Download: Download Source

What can YeahTrivia do for me?

Glad you asked. This project started when I decided I wanted to dive headfirst into learning WPF and WCF, without hacking through countless Hello World examples. And I wanted something fun that I could improve over time as my skills developed in these new technologies. In this article I'll take you along for the ride as I attack the learning curve required to create a fun, interactive application using both the Microsoft Windows Presentation Foundation (WPF) and the Windows Communication Foundation (WCF). Afterwards, you'll have a flexible trivia client/server game ready to play by yourself or against friends, coworkers and your local know-it-all. And in honor of Halloween, I've included three games of horror movie trivia.

In case you were wondering, the "YeahTrivia" name honors my new bride & her favorite prefix. Think of it as YeeeeaaaaahhTrivia!

Basic Setup

This demo project was built using Visual Studio 2008 Beta 2, and is based on the Microsoft .NET Framework version 3.0. The game is fed by a small windows app that acts as a game server, providing game selection, user registration, question loading, response times, chat messaging and scorekeeping. The server loads a game by reading a predefined XML format, which we will look at a bit later. This dynamic load lets anyone create their own flavor of trivia game, with any number of questions.

The server app exposes one WCF endpoint, a wsDualHttpBinding channel that supports duplex (two-way) communication between the server and any number of game clients. Clients attach themselves to this endpoint and provide a callback address to the server. The server saves an instance of this callback channel and uses each client's instance to contact the clients en masse during general game flow. Enough talk, here's how to build one yourself.

Trivia Common and WCF Service Interfaces

The TriviaCommon project provides both the server and client projects access to shared objects. To keep things simple the Common project only contains two classes:

Constants.cs defines the AnswerItem enumeration, which gives easy access to the five answer options (None, A, B, C, D), and the QuestionItem struct. This structure is delivered to the client and contains question text, answer text, and the correct answer object of type AnswerItem. Notice that objects being directly passed over the wire need to be marked with the [DataContract] attribute.

The second class, Interfaces.cs is where our WCF fun begins. Take a look:

C#:

using System;
using System.Collections.Generic;
using System.ServiceModel;
using System.Text;

namespace Trivia.Common
{
    #region Interfaces

    #region Service Interface

    /// <summary>
    /// Interface that defines Trivia service contract.
    /// </summary>
    [ServiceContract(CallbackContract = typeof(ITriviaCallback))]
    public interface ITrivia
    {
        [OperationContract(IsOneWay = true)]
        void RegisterUser(string userName);

        [OperationContract(IsOneWay = true)]
        void AcceptAnswer(string userName, string answerValue);

        [OperationContract(IsOneWay = true)]
        void ChatPublish(string userName, string message);
    }

    #endregion Service Interface

    #region Client Callback Interface

    /// <summary>
    /// Interface that defines Trivia client callback contract.
    /// </summary>
    public interface ITriviaCallback
    {        
        [OperationContract(IsOneWay = true)]
        void OnGameStart(int questionCount);

        [OperationContract(IsOneWay = true)]
        void OnGameEnd();

        [OperationContract(IsOneWay = true)]
        void OnUserRegistered(string userName);

        [OperationContract(IsOneWay = true)]
        void OnPublishChat(string userName, string chatMessage);

        [OperationContract(IsOneWay = true)]
        void OnQuestionLoad(int questionIndex, QuestionItem questionItem);

        [OperationContract(IsOneWay = true)]
        void OnQuestionEnd();

        [OperationContract(IsOneWay = true)]
        void OnQuestionStatusUpdate(Int64 questionTimeRemaining);

        [OperationContract(IsOneWay = true)]
        void OnScoreboardUpdate(Dictionary<string, Int64> scoreboard);

        [OperationContract(IsOneWay = true)]
        void OnGameServerStopped();
    }

    #endregion Client Callback Interface

    #endregion Interfaces
}

VB:

Imports System
Imports System.Collections.Generic
Imports System.ServiceModel
Imports System.Text

Namespace Trivia.Common

#Region "Interfaces"

#Region "Service Interface"
    
    ''' <summary>
    ''' Interface that defines Trivia service contract.
    ''' </summary>
    <ServiceContract(CallbackContract:=GetType(ITriviaCallback))> _
    Public Interface ITrivia
        <OperationContract(IsOneWay:=True)> _
        Sub RegisterUser(ByVal userName As String)

        <OperationContract(IsOneWay:=True)> _
        Sub AcceptAnswer(ByVal userName As String, ByVal answerValue As String)

        <OperationContract(IsOneWay:=True)> _
        Sub ChatPublish(ByVal userName As String, ByVal message As String)
    End Interface
        
#End Region

#Region "Client Callback Interface"

    ''' <summary>
    ''' Interface that defines Trivia client callback contract.
    ''' </summary>
    ''' <remarks></remarks>
    Public Interface ITriviaCallback
        <OperationContract(IsOneWay:=True)> _
      Sub OnGameStart(ByVal questionCount As Integer)

        <OperationContract(IsOneWay:=True)> _
        Sub OnGameEnd()

        <OperationContract(IsOneWay:=True)> _
        Sub OnUserRegistered(ByVal userName As String)

        <OperationContract(IsOneWay:=True)> _
        Sub OnPublishChat(ByVal userName As String, ByVal chatMessage As String)

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionLoad(ByVal questionIndex As Integer, ByVal questionItem As QuestionItem)

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionEnd()

        <OperationContract(IsOneWay:=True)> _
        Sub OnQuestionStatusUpdate(ByVal questionTimeRemaining As Long)

        <OperationContract(IsOneWay:=True)> _
        Sub OnScoreboardUpdate(ByVal scoreboard As Dictionary(Of String, Long))

        <OperationContract(IsOneWay:=True)> _
        Sub OnGameServerStopped()

    End Interface

#End Region

#End Region

End Namespace

A few items of interest here. Notice we're importing the System.ServiceModel namespace. This is the key assembly when using WCF, so don't forget to add a reference to your project. The first interface, ITrivia, defines the operations the server is required to implement, which handle basic user actions: Register a team, accept an answer and accept a chat message. Easy.

The second interface, cleverly named ITriviaCallback, lays out the callback contract a client must fulfill in order to play nicely with our server. The operations listed here describe events the server will publish. These aren't actual events, but the naming convention "OnX..." helps you remember that these are server published activities.

Notice that the [OperationContract] attribute notifies WCF that each method is part of a service contract. The IsOneWay flag gives us "fire-and-forget" behavior (the app shouldn't wait around for a response). So now that the common objects are ready, let's move on to...

Building the Trivia Server

The YeahTrivia Server is a simple utility app, but don't let the plain looks fool you; I thought about calling this the BrainStumper Pumper, but this is a family site. This app lets a user (anyone acting as game admin) start the service, select the desired game, await team registrations, and then start the game. If this were to become a larger scale project, I would make this an IIS hosted service that manages multiple games and provides more autonomy. Until those sports bar royalty checks start rolling in, however, a utility app will do just fine.

The only form, GameServerDashboard, simply provides user interaction with the GameServer class. On startup, the form inits an instance of GameServer and tells it to start the service. It also loads all trivia question sets from the Games directory, and displays them in the list.

GameServer is the brain behind YeahTrivia. The attributes below set up the GameServer for action:

C#:

[ServiceBehavior(ConcurrencyMode = ConcurrencyMode.Reentrant
        ,InstanceContextMode = InstanceContextMode.Single)]
    public class GameServer : ITrivia

VB:

<ServiceBehavior(ConcurrencyMode:=ConcurrencyMode.Reentrant, InstanceContextMode:=InstanceContextMode.Single)> _
    Public Class GameServer
        Implements ITrivia

ConcurrencyMode.Reentrant prevents deadlocks between the apps by stating that while this service is single-threaded, callbacks are allowed to invoke new operations.

InstanceContextMode.Single sets the service as a singleton, so that all messages are delivered to the same object instance.

These are advanced topics if you're new to WCF, so I'll include some links at the end that helped clarify some of this for me. Let's keep moving forward by looking at a few activities of the game server:

Start the Service: Passes in the configured base address as a Uri, inits and opens a new ServiceHost.

C#:

public void StartService()
{
   // Set base address and open service host
   Uri baseAddress = new Uri(ConfigurationManager.AppSettings[CONFIG_KEY_BASEURI]);
   _serviceHost = new ServiceHost(new GameServer(), baseAddress);
   _serviceHost.Open();
}

VB:

  Public Sub StartService()
     'Set base address and open service host
     Dim baseAddress As New Uri(ConfigurationManager.AppSettings(CONFIG_KEY_BASEURI))
     _serviceHost = New ServiceHost(New GameServer(), baseAddress)
     _serviceHost.Open()
  End Sub

Register a new team: Saves off the callback, adds it to the callback collection and scoreboard containers, notifies the user of a successful registration, and notifies all game clients of the new team.

C#:

 public void RegisterUser(string userName)
 {
     _currentCallback = OperationContext.Current.GetCallbackChannel<ITriviaCallback>();

     // Store callback
     if (!_callbacks.ContainsKey(userName))
     {
         _callbacks.Add(userName, _currentCallback);
         _scoreboard.Add(userName, 0);

         // Notify user of registration
         _currentCallback.OnUserRegistered(userName);

         // Notify clients of new user
         foreach (string userKey in _callbacks.Keys)
         {
            _currentCallback = _callbacks[userKey];
            _currentCallback.OnPublishChat(GAME_USERKEY, string.Format(FORMAT_USER_REGISTERED, userName));
         }                
     }
     else
     {
         // User already registered, throw exception
         throw new Exception(ERROR_USER_ALREADY_EXISTS);
     }
 }

VB:

Public Sub RegisterUser(ByVal userName As String) Implements ITrivia.RegisterUser
   _currentCallback = OperationContext.Current.GetCallbackChannel(Of ITriviaCallback)()

   'Store callback
   If Not _callbacks.ContainsKey(userName) Then
      _callbacks.Add(userName, _currentCallback)
      _scoreboard.Add(userName, 0)

      'Notify user of registration
      _currentCallback.OnUserRegistered(userName)

      'Notify clients of new user
      For Each userKey As String In _callbacks.Keys
         _currentCallback = _callbacks(userKey)
         _currentCallback.OnPublishChat(GAME_USERKEY, String.Format(FORMAT_USER_REGISTERED, userName))
      Next
   Else
      'User already registered, throw exception
      Throw New Exception(ERROR_USER_ALREADY_EXISTS)
   End If
End Sub

You can start to see how the server is able to handle incoming calls and process them back to the clients using the duplex channel. I'll leave the rest of the server actions for you to examine on your own.

Building the Game Client (WCF)

Address, Binding, Contract. These are the ABC's of WCF. The client's app.config file handles connecting to the service and specifying the channel and contract used to interact with it. Examine the client portion of the client .config:

<client>
   <endpoint address="http://localhost:8088/Trivia" binding="wsDualHttpBinding"
      bindingConfiguration="WSDualHttpBinding_ITrivia" contract="Trivia.Common.ITrivia"
      name="WSDualHttpBinding_ITrivia">
   </endpoint>
</client>

The address points to the exposed service endpoint. The binding sets the channel as "wsDualHttpBinding" (our http duplex channel). The bindingConfiguration attribute is an optional pointer to another group of configurations for the binding, and finally, the contract sets the interface with which our client will be interacting.

Next it's time to generate a proxy class. Memorize this: Svcutil.exe is your friend. The client needs a proxy class that it can use to interact with the service model. The utility is a bit tricky at first, because of the wealth of optional flags, but stick with it, it's better than coding the proxy class by hand! You can generate your client code by starting the service and running a command line similar to this:

svcutil /language:cs /out:ServerProxy.cs http://localhost:8088/Trivia

Add the generated class to the client project and you can begin to interact with the service. The svcutil is available as part of the Windows SDK. Check out the referenced site below for more information on this handy utility.

Building the Game Client (WPF)

Building the WPF portion of the client app was really a learning experience, and it will be the priority for me to improve in a later version. Learning to program in XAML markup can seem daunting, and it requires a large paradigm shift on your part in order to grasp the new concepts. Microsoft Expression is powerful tool for XAML work, but this time I coded all of the XAML by hand in order to fully see what was taking place inside.

A deep discussion of WPF is beyond the scope of this article, but take a look at the example code to get an idea of the layout. An excellent book to start with is WPF Unleashed by Adam Nathan. An easy read (for a programming book), and solid examples to get you rolling.

I've set up the client using a instance of the Window class, which is shown below:

<Window x:Class="Trivia.Client.GameClient"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="YeahTrivia" MinHeight="620" MinWidth="620" 
    WindowStartupLocation="CenterScreen" WindowState="Normal"  Style="{DynamicResource MainWindowStyle}"
    Background="{DynamicResource MainWindowBackgroundBrush}">

The window class sets up the outermost container of the app, and includes two default namespaces. I've also set a few other properties here: a min height and width, window startup location & state, and two styling attributes set by dynamic resources.

Resources are a great way to further separate form & function, allowing a programmer to handle the behavior of an app, while a designer can work simultaneously on the look, all without stepping on too many toes. As a 2.0 task for this project, I would remove all inline styling and move them into resource dictionaries. A dictionary contains styles and control templates (a skin) that can be loaded & switched at runtime.

ResourceDictionaries are linked to your XAML in the App.Xaml file. Once you've set up the reference, the example above show how to reference the current dictionary: The Background and Style properties are set as dynamic resources by naming the Keys specified in the ResourceDictionary (DefaultResources.xaml):

<LinearGradientBrush x:Key="MainWindowBackgroundBrush" StartPoint=".45,.45" EndPoint=".55,.55" SpreadMethod="Reflect">
   <GradientStop Offset="0" Color="DodgerBlue"/>
   <GradientStop Offset=".8" Color="DarkSlateBlue"/>
</LinearGradientBrush>

<Style TargetType="{x:Type Window}" x:Key="MainWindowStyle">
   <Setter Property="FontFamily" Value="Trebuchet MS"/>
</Style>

Not quite as easy as CSS, but for a Forms project, it's a nice feature. The sample ResourceDictionary includes a button control template for all of my buttons, based on Rob Eisenberg's excellent article (link below).

One other interesting feature to point out: Take a look at the code-behind class MarshalToUIThread method, which accepts a SendOrPostCallback parameter. This is where the client is transferring actions from the sync thread back to the UI thread. In each interface method implementation (OnX..), you can see how I wrap any UI-directed code and assign it to the postCallback field. Passing this to the MarshalToUIThread method simply issues a SynchronizationContext.Post call, and the UI thread executes as expected.

Creating a New Trivia Game (XML)

New trivia games can be added at any time using the simple XML format shown here. After installing the server application, simply drop the new .XML file into the Games directory ([Server Install Location]\Yeah Trivia Server\Games). This demo comes pre-loaded with Geek Trivia, and a special Halloween Trivia version in case you're feeling festive.

<TriviaQuestionDataSet xmlns="http://tempuri.org/TriviaQuestionDataSet.xsd">
  <TriviaQuestion>
    <QuestionText>Name the highest grossing Monty Python creation.</QuestionText>
    <AnswerTextA>A) Holy Grail</AnswerTextA>
    <AnswerTextB>B) The Life of Brian</AnswerTextB>
    <AnswerTextC>C) Shrubbery</AnswerTextC>
    <AnswerTextD>D) The Meaning of Life</AnswerTextD>
    <CorrectAnswerKey>A</CorrectAnswerKey>
  </TriviaQuestion>
  <TriviaQuestion>
    <QuestionText>Ferris Bueller's best friend was _________.</QuestionText>
    <AnswerTextA>A) Sloane Peterson</AnswerTextA>
    <AnswerTextB>B) Edward R. Rooney</AnswerTextB>
    <AnswerTextC>C) Charlie Sheen</AnswerTextC>
    <AnswerTextD>D) Cameron Frye</AnswerTextD>
    <CorrectAnswerKey>D</CorrectAnswerKey>
  </TriviaQuestion>
</TriviaQuestionDataSet>

It's Time to Play YeahTrivia

Install both the Server and Client applications. First, fire up the server, and then start your game client(s). Once everyone has registered a team, select your game and hit "Start Game". You're off...

Game Over

So there you have it. We've seen how WCF manages communication between objects, extracting complicated service protocols away from your code. And just a small subset of the WPF functionality has shown us how quickly a rich, XAML-based UI can come together. And maybe, just maybe, you've learned why a CD is 74 minutes long... but I'm not telling.

I challenge you to improve on this initial version of YeahTrivia: Crack open the XAML and add animations, images, video, music & more. Create a self-maintaining server to run multiple games at once. Add a High Score storage system. Extend the WCF settings to enable other communication channels. Add a new skin. Create new question files to share with us. Whatever you do, have fun and go nuts. YeahCoding4Fun.

Download source files

Download compiled demo (C# and VB)

About The Author

Steve Holstad works as a software consultant for Clarity Consulting in Chicago. He blogs at The Bright Lights, and is available via email at sholstad@claritycon.com

References

wcf.netfx3.com/
wpf.netfx3.com/
Generating a client proxy class
ConcurrencyMode
SvcUtil.exe Tutorial
Rob Eisenberg's WPF control template

Special thanks to Bryan Dougherty for the WCF jumpstart, Kevin Marshall for the Halloween Trivia and Jay Garmon, creator of TechRepublic's Geek Trivia.