Congratulations to the Winners of the WP7 Competition

So after a delay of more than a month, and some speculation that the judges might have taken the 3 x $10,000 kitty and done a runner, Red Gate have finally announced the winners of the Windows Phone 7 App Competition.

Sadly, Simon Squared, my little puzzle game wasn’t amongst the finalists.

But congratulations to Richard Fennell, Simon McKenzie, and Mark Rendle who scooped a prize each.

I was particular impressed with Mark Rendle’s app, Pocket C# which lets you write code on your phone (syntax highlighting and all), then uses a Windows Azure back-end to compile and run it. Perfect for racking up your StackOverflow rep on the move.

Let’s synchronize our watches: Determining Clock Skew with Christian’s Algorithm and the Reactive Framework

In every playground race, there’s always one child who sets off somewhere between “On your marks” and “Get set”, gaining an unfair advantage over the honest ones who wait for “Go!”. I faced a similar problem in the design of my Windows Phone 7 multi-player game, Simon Squared, though it was unsynchronized clocks and network latency that were to blame rather than cheats.

The multi-player mode in the game relies on puzzles being shown to all players at the same time, and players race to complete them. Since some puzzles can be solved in a matter of seconds, players who get to see them even slightly sooner than their competitors stand a good chance of getting to the solution first. So I needed a plan for avoiding the digital equivalent of playground squabbles.

Any such plan has to take into account network latency: an unpredictable amount of time can elapse between the server shouting “Go!”, and the phones hearing the message. So I got my server to send out a message announcing that it would shout “Go!” at time T, where T is 4 seconds on from the time on the server’s clock (and broadcast in UTC obviously). This gives even the most far-flung phone plenty of time to receive the message, check its own clock, and then start a count-down.

Bet you’ve spotted the flaw in that straight-away! What if the server’s clock and the phones’ clocks are out of sync?

An Overview of Christian’s Algorithm

That’s where Christian’s algorithm comes in. It gives us a simple method of broadcasting the time at the server to a client whilst allowing for network latency. It works like this:

1. Client sends a message to the server: “What’s the time?” [adding ‘Mr. Wolf’ is optional]. Crucially, it notes the time that it sent the message (call it T_sent)
2. Server responds as quick as it can, giving the time according to its own clock, T_server.
3. When Client gets the message, it notes the time of receipt (call it T_received). Then it does some maths: the round-trip time, RTT, is T_received – T_sent . So assuming that the server responded instantly, and that the network latency was the same in both directions, that means that the server actually sent the message RTT/2 seconds ago. Thus, at the instant Client receives the message, the time at the server is T_server + RTT/2. Then the Client can compare with its own clock and determine the difference – the clock skew.

Since network latency can vary with each request we can get an improved result by trying the whole exercise several times then cherry picking the result which had the shortest round trip time, since that minimises the error in our estimate of the network latency.

So what does that look like in code?

The Server Side – with WCF REST

Well first we need the server to be able to serve up the time:

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
[ServiceContract]
public class TimeService
{
    [WebGet(UriTemplate = "/?timeAtClient={clientReportedTime}")]
    public TimeCheck GetTime(string clientReportedTime)
    {
        return new TimeCheck()
                   {
                       ClientReportedTime = DateTimeOffset.Parse(clientReportedTime, CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal),
                       TimeAtServer = DateTimeOffset.UtcNow,
                   };
    }
}

This is making use of WCF 4’s REST capabilities. Notice the WebGet attribute on the method, with it’s UriTemplate. If I add the appropriate route  to my Global.ascx file,

routes.Add(new ServiceRoute("Time", new WebServiceHostFactory(), typeof(FeedbackService)));

that will ensure that HTTP GET requests like http://localhost/MyApp/Time/?timeAtClient=2011-03-17T20:19:30.2196972Z get routed to the CheckTime method with the appropriate part of the query string passed into the clientReportedTime parameter.

So that's the server side done.

RestSharp and Rx for Asynchronous Web Requests

Then the client needs to be able to call the server. I’ve been making use of the excellent RestSharp library here:

_restClient = new RestClient(ServerUrl);

...

private IObservable<TimeCheck> GetServerTime()
{
    var request = new RestRequest("Time?timeAtClient={timeNow}");
    request.AddUrlSegment("timeNow", DateTime.UtcNow.ToString("O"));

    return ExecuteRequest<TimeCheck>(request);
}

private IObservable<TResult> ExecuteRequest<TResult>(RestRequest restRequest) where TResult : new()
{
    var subject = new AsyncSubject<TResult>();

    _restClient.ExecuteAsync<TResult>(restRequest, response => HandleResponse(response, subject));

    return subject;
}

private void HandleResponse<T>(RestResponse<T> response, AsyncSubject<T> subject)
{
    subject.OnNext(response.Data);
    subject.OnCompleted();
}

This is where things start hotting up. The first part of GetServerTime is obvious enough: in lines 7-8 I’m constructing a RestRequest consisting of a url and the appropriate query string parameter. Then I Execute it. Now since we’re talking Windows Phone here, I can’t make synchronous web requests – the phone UI has to remain responsive. So I can’t wait and then return the response from the method.

Instead I return an IObservable, an interface you might not be familiar with. This creature is the brain-child of the clever folks on the Reactive Framework team. They like to call IObservable the mathematical dual of IEnumerable. And what they mean is this: IEnumerable is used when you want to pull elements one by one out of a collection. IObservable is used when you want elements to be pushed one by one to you. You can think of an IObservable as being a stream of events. And just like you can build queries on top of IEnumerable, using Where and Select, so you can build queries on top of IObservable.

Here I’m using an IObservable as the channel to push back the result of the Web request when it becomes available – you can see that happening in the HandleResponse method, which is the callback that RestRequest calls when it gets a response back from the web server.

Finally – the Algorithm

Finally we get to the implementation of the algorithm itself: and with the underpinnings in place, it turns out to be one big LINQ query:

public IObservable<TimeSpan> DetermineClockSkew()
{
    var timeOffset = (from tick in Observable.Interval(TimeSpan.FromMilliseconds(100)).Take(5)
                      from timeCheck in GetServerTime().Timestamp()
                      let estimatedOneWayLatency =
                          (timeCheck.Timestamp.UtcDateTime - timeCheck.Value.ClientReportedTime).
                              TotalMilliseconds/2
                      let estimatedTimeAtServer =
                          timeCheck.Value.TimeAtServer + TimeSpan.FromMilliseconds(estimatedOneWayLatency)
                      let predictedClockSkew = estimatedTimeAtServer - timeCheck.Timestamp
                      select new {predictedClockSkew, estimatedOneWayLatency})
        .MinBy(p => p.estimatedOneWayLatency)
        .Select(p => p.predictedClockSkew);

    return timeOffset;
}

Let's step through this line by line:

• Line 1: We start things off by generating a stream of 5 tick events, at 100 millisecond intervals – we’re going to ping the server 5 times, and use the result with the shortest round trip time
• Line 2: Each time we hear a tick we fire off a what’s-the-time request to the server using GetServerTime which we discussed above. The Timestamp() method will stamp each response that we get back from the server with the time at which we received it.
• Line 3: For each response we get back from the server we estimate the one-way latency from server to client by taking half of the round-trip time (when we send a request to the server we send our own time, and the server echoes this back in the ClientReportedTime property of the message)
• Line 4: Now that we have an estimate of how long the message took to get from the server, we can estimate the time at the server at this precise moment.
• Line 5: We can now figure out the difference between the clock on the phone and the server’s clock by comparing the time at which we received the server’s response with our estimate of the server’s time at that moment.
• Line 6: We stash our estimate of the latency, and the estimate of the clock skew into an anonymous type
• Line 7 - 8: We look over all 5 attempts at estimating the clock skew, and we take the one which had the smallest latency. Notice how MinBy returns an IObservable rather than an actual value as it might in good old Linq-to-Objects: it has to be this way, otherwise the whole method would block waiting for all the web requests to complete, rather defeating the our use of asynchronous calls elsewher.

So there you have it: thanks to Christian, the WCF REST framework and the Rx team, a neat and elegant way of determining clock skew between server and phone.

See it in Action

Remember, for a limited time only you can see this in action by downloading my game to your phone or Emulator (for free!) and playing with your friends. Full source code to the whole game is also available.

Finally, judging for the Windows Phone 7 app contest finishes on March 31st, so make sure you check out the entries, and be sure to tell Red Gate what you think of mine!

Developers: try out Simon Squared, my multi-player Windows Phone 7 game, for free

If usage is like oxygen for ideas, then my Windows Phone 7 game, Simon Squared, must be pretty blue in the face right now. It’s not on the Marketplace yet, you see. Sure, nearly 25 people have download the source code. But how many of them will have bothered to compile it? Well, as of now, I’m demolishing your excuses: here is the Xap file - so you developers out there with unlocked phones can deploy the game and try it out.

Remember, the game has a multi-phone multi-player mode: and I’ve pre-configured the Xap file to run against our Windows Azure hosted server. So challenge your office mates! It doesn’t matter where in the world they are.

Let me know what you think – but don’t do it here: write your comments on the Simon Squared competition entry page so Red Gate can see what you think.

A reminder: Deploying Xap files to your phone

Building a project in Visual Studio and having it deployed to your phone is straightforward enough. Deploying a Xap file by itself is not quite so obvious, so here’s a reminder of how it’s done:

1. Remember to fire up the Zune software
2. Browse to C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Tools\XAP Deployment – drop the (x86) if you’re not on Windows 64-bit
3. Load the XapDeploy tool, select Windows Phone 7 Device as the target, browse for the Xap file, then hit deploy.

Unpacking Simon Squared: My mini framework-independent animation library

Animation is the trick a computer uses to make math come alive. Our minds are wired to see movement. A video game where the characters and props jumped instantly between the positions where the math says they ought to be would be incomprehensible and unplayable. Which explains why I spent a good part of the few precious days I had building Simon Squared on developing a little animation framework.

I’m pretty pleased with the result. It’s by no means polished or complete, but it makes it very easy to implement one-off animations, and to schedule groups of animations together. Best of all, it’s not tied to the XNA framework – you could use it to implement animation in Windows Forms if you so desired!

Fluent Animations

Here’s one example:

_storyboard.Plan()
    .AfterDelay(TimeSpan.FromSeconds(0.5))
    .Begin(b => b.Animate(this, (Shape target, float value) => target.RotationY = value)
                 .From(RotationY)
                 .To(RotationY + MathHelper.Pi)
                 .In(TimeSpan.FromSeconds(MovementAnimationTime)));

This shows off several aspects of the framework.

First, the Storyboard class. This is responsible for keeping track of all the animations that are currently in flight, or scheduled for later on. In my Game’s Update method I call

_storyboard.AdvanceTimeTo(gameTime.TotalGameTime);

and that takes care of updating all the animations that are in progress. 

The Plan() method returns a StoryboardPlanner which is used to schedule animations using a fluent interface. No prizes for guessing what AfterDelay does: it leaves a gap of what ever duration you specify before starting subsequent animations. These animations are scheduled using the Begin method: you pass it a function which uses the AnimationFactory it supplies to fabricate animations to your exact specifications.

Most important of all is the Animate method. In the definition of the Animate is the secret sauce that makes this animation framework independent of whatever framework it is you’re trying to animate. It works like this:

1. you set up an animation, RotationY goes from Pi to Pi/2 in 2 seconds, for example;
2. the animation framework calculates values as the animation progresses;
3. every time it calculates a new value, it calls the lambda function that you’ve provided, so that you can update the appropriate object with the new value.

The first parameter I’m passing to Animate is the object that has the property I want to animation, RotationY. Then I pass in a lambda function that receives both the target object, and the value that should be assigned to the target property or field¹.

How the animations work

When it comes to the actual animations, I’ve abstracted the majority of the animation logic into a couple of base classes, which makes it very easy to add animations for different types.

Here are the critical parts of the Animation base class:

public abstract class Animation
{
    // snip

    public void UpdateForTime(TimeSpan currentElapsedTime)
    {
        var normalisedTime = GetNormalisedTimeInAnimation(currentElapsedTime);
        if (normalisedTime.HasValue)
        {
            SetValueForTime(normalisedTime.Value);
        }
    }

    protected abstract void SetValueForTime(double normalisedTime);

    protected double? GetNormalisedTimeInAnimation(TimeSpan currentElapsedTime)
    {
        var normalisedPosition = 0.0;

        var millisecondsAfterStart = currentElapsedTime.TotalMilliseconds - StartTime.TotalMilliseconds;
        if (millisecondsAfterStart < 0)
        {
            return null;
        } 
        else if (millisecondsAfterStart > Duration.TotalMilliseconds && RepeatMode == RepeatMode.None)
        {
            return 1;
        }
        else
        {
            var quotient = millisecondsAfterStart / Duration.TotalMilliseconds;
            var integerPart = Math.Floor(quotient);

            normalisedPosition = quotient - integerPart;

            if (AutoReverse && (integerPart % 2) == 1)
            {
                normalisedPosition = 1 - normalisedPosition;
            }
        }

        return normalisedPosition;
    }
}

Start at the top: UpdateForTime is called by the Storyboard on every frame, to inform the animation of the time, and to give it an opportunity to update its target.

The first thing Animation does then is to work out the normalised time – that is a value between 0 and 1 indicating the progress through the animation. If the clock says that we’re bang on the animation’s start time then we return 0; halfway through (however long the animation lasts), and the normalised time is 0.5; and a clock time of StartTime + Duration gets a normalised time of 1. All this is calculated by GetNormalisedTimeInAnimation. Notice from the code how it is also smart enough to handle animations that repeat over and over, and animations that cycle -  repeating, but reversing when they get to the end value.

Once the normalised value has been calculated it is passed to SetValueForTime which is an abstract method on the Animation base class.

Next level down in the hierarchy we have SetterInvokingAnimation: 

public abstract class SetterInvokingAnimation<TValue, TTarget> : Animation where TTarget : class 
{
    public TValue StartValue { get; set; }

    public TValue EndValue { get; set; }

    private WeakReference _target;
    private readonly Action<TTarget, TValue> _setter;

    public SetterInvokingAnimation(TTarget target, Action<TTarget, TValue> setter)
    {
        _setter = setter;
        _target = new WeakReference(target);
    }

    protected override void SetValueForTime(double normalisedTime)
    {
        var value = GetValueForNormalisedTime(normalisedTime);
        var target = _target.Target as TTarget;
        if (target != null)
        {
            _setter(target, value);
        }
    }

    protected abstract TValue GetValueForNormalisedTime(double normalisedTime);
}

This is the class that takes care of pushing calculated values to the target - though it doesn't actually calculate any values itself – it leaves that to derived classes, by way of the GetValueForNormalisedTime abstract method.

And here is one of those derived class, FloatAnimation. Since it is descended from some hard-working ancestors, there’s little it has to do – just a simple mathematical interpolation between the StartValue and EndValue of the animation:

public class FloatAnimation<TTarget> : SetterInvokingAnimation<float,TTarget> where TTarget : class 
{
    public FloatAnimation(TTarget target, Action<TTarget, float> propertySetter) : base(target, propertySetter)
    {
    }

    protected override float GetValueForNormalisedTime(double normalisedTime)
    {
        var delta = EndValue - StartValue;
        var value = StartValue + delta * normalisedTime;

        return (float)value;
    }
}

So there you have it: a whistle-stop tour of my mini-animation framework.

See it for yourself

You can see the full source code - in use - in my Simon Squared game up on Codeplex. And if you shout loud enough, I might pull it out of there and stick it in a NuGet for easy consumption in your own games.

Go check it out – and then make sure you tell Red Gate how much you love it, over on my Simon Squared competition entry page!

---

1. I could have defined Animate like this:

   Animate(value => this.RotationY = value);

   which would have looked a lot neater. But that has the downside of capturing a reference to my target object in a closure and smuggling it down into the animations which are held by the Storyboard; and since my Storyboard is longer-lived than many of the objects that I’m animating, this would have had the effect of keeping my target objects alive when they would otherwise have been Garbage Collection. So I pass in the target object separately so that I can hold it using a WeakReference, and then I use a lambda function that is, in effect, a static method.

   Another way, of course, would be to remove animations from the Storyboard explicitly (and it does support that). But I'm lazy, and it's much easier to use this fire-and-forget approach!

Want to see inside a Windows Phone 7 game? I’ve opened-sourced Simon Squared

The deed is done: I’ve thrown my hat into the ring. Simon Squared is now officially standing for election as the App developers will love most. Go and vote for it here.

Why does it deserve your vote? Because, not only is it a thoroughly addictive little puzzle game, with a multi-phone-multi-player mode that will have you coming back for more, but I’ve just released the source code! It’s all there on CodePlex, released under the GPL v2 license. Build it, try it out, and let me know what you think.

Over the next little while I’m intending to publish some posts highlighting the points of interest in the source code. In the meantime:

• Take a look at my mini animation framework, under Flatlings/Flatlings/Animation – I’m quite fond of that fluent interface
• See how I implemented Christian’s algorithm using the Reactive Framework: Flatlings/Flatlings/GameServerClient.cs – DetermineClockSkew()
• Discover how easy it is to fix the WCF HTTP CTP so that it uses the DataContractSerializer: FlatlingsServer/Infrastructure/ DataContractXmlProcessor.cs

If you visit my blog, you’ll find a new page dedicated to Simon Squared. I’ll be updating that as I blog about the source code; and I’ve also indexed all the posts I made during development – bookmark it, because I’m sure you’ll want to go back and re-live those hectic days!

It only remains for me to thank everyone who has spurred me on over the last few months with comments, tweets and links, and to remind you all to go and exercise your democratic right.

Simon Squared – We have Multi-player: Days 4, 5 and (ahem!) 6

OK. So you let me have one more day, and I took 3. But I got it working. After 6 days of work, I can show you Simon Squared in all its Windows Azure powered multi-player glory:

Simon Squared Multi-player, nicely showcasing my Multiple-instances-of-the-WP7-emulator hack

So what took me so long? Surely after getting the Windows Phone 7 emulator to talk to the Windows Azure emulator, finding a UI library for XNA and enabling multiple instances of the WP7 emulator to run at once, everything else should have been easy? If only!

Here’s what happened.

Day 4

9:00 Start by setting up a Windows Azure subscription, making use of my MSDN subscription benefits: it's pretty generous: 750 hours/month of Compute Time, 10 GB storage, 7/14 GB traffic in/out.

I get a little worried when the sign up screen tells me that I'll receive an activation email "within 24 hours" - but I'm relieved to see that within a couple of minutes of being redirected to the Azure management console (very swish Silverlight app) my subscription appears, and I can start creating deployments.

10:11 Got side-tracked into a discussion with my boss about possibilities for future products and offerings based on the work we've been doing here

12:45 Implemented the phone side behaviour for running the count down to the games beginning. Making heavy use of the Reactive Framework (which comes built into WP7) for hiding away the messiness of asynchronous calls.

13:45 Problem with WCF REST: if I return a derived type of message from my operation, the client only receives the properties defined on the base type. This is the problem that the KnownType attribute solves elsewhere in WCF, but it doesn’t seem to be working for WCF REST.

15:22 Discovered that WCF REST uses XmlSerializer by default rather than DataContractSerializer - so KnownTypes woudn't work. Also discovered that RestSharp is using XmlSerializer when sending data to the server, so not serializing inherited types in the way that DCS is expecting.

15:39 Now got inherited message types passing correctly: WCF Rest and RestSharp are both pretty pluggable, so I was able to implement a custom ISerializer in RestSharp, and a custom MediaTypeProcessor in WCF Rest, both using DataContractSerializer instead of XmlSerializer

17:30 Caught out by Http response caching. The symptom was that I’d launch a fresh HttpWebRequest,  but get back stale data. Investigation showed that the requests weren’t ever leaving the phone – it never showed up in Fiddler. I spent ages prodding my Reactive Framework query, convinced that it wasn’t issuing the requests properly. Then I remembered Http Caching. In my haste, and newbie-ness, I solved the problem by putting a NoCache on all the responses on the server side. A better way would probably have been to set the WebRequest.CachePolicy.

Day 5

09:00 Thought occurs to me that I might get on faster if I don't have to keep waiting for the Azure Emulator to start up and shut down every time I build my server. Why not just run my server project directly in IIS? I try it – and WCF Http stops working. I eventually discover that the CTP bits I’m using don’t yet support HTTPS, and I had a HTTPs binding configured on my default Website in IIS.

10:30 Fortunately Cassini works - why did it take me an hour and half to discover that!

10:43 Start work on refactoring puzzle generation, so I can do it on the server side. The goal is that the server will generate rounds of 5 puzzles, and send them out to all the players in advance. Within a round, the server will send out a message saying “start puzzle X at Time T” – and thus synchronize the experience of each of the players

12:00 Working on updating the Phone side to play the puzzles that server sends out.

13:16 Finished refactoring the Game screen so that it is backed by a GameController - allowing me to implement a SinglePlayerGameController and MultiPlayerGameController.

17:20 Got some simple state machines working on the client and server. It looks something like this:

17:40 With two instances of the emulator running, I can now see the same puzzles displayed on each. The problem is, they’re horribly out of sync – player 1 might get the puzzle two seconds ahead of player 2, which for small puzzles means he’s certain to win!

Day 6

09:21 Implemented Christian’s algorithm to estimate the clock skew between server and phone. The implementation is pretty straight-forward using the Reactive Framework, and quite elegant, if I do say so myself. Remind me to show you, sometime.

10:33 Couldn’t figure out why changes I was making in the code weren’t having any effect when I ran the game. Then discovered that Visual Studio had some how set itself to “Never Build on Run”.

12:00 It’s working! Multiple players now receive the puzzles beautifully in sync, one after another. As soon as one player completes a puzzle, it vanishes from all the other players screens, and the count-down to the next puzzle begins

13:20 Implemented a scoreboard to show the position at the end of each round

14:30 Having deployed the game to my phone, I challenge Vinod to a dual – me on the emulator, him on the phone. I now discover a serious downside to being a games developer: once a game reaches playability, you inevitably get sucked into playing when you should just be testing.

15:35 Use Expression Design 4 to recreate a game logo that Neil designed using Word. What do you think?

17:05 Spitting and polishing. Tidying up the various screens. I might not have time to make them pretty, but at least I can make the buttons big enough to touch. That’s the downside of testing with an emulator using a mouse – it doesn’t alert you to the imprecision of fat fingers!

17:30 Waiting for Windows Azure to deploy the server. Visual Studio 2010 is supposed to be able to package and deploy your project straight into the cloud, but I couldn’t get that to work (something about it not being able to resolve the URL of my storage account). Instead, I uploaded the package manually.

17:45 Still waiting for Windows Azure to start up my role instance. Give up and go home.

21:00 Wife gives me permission to interrupt our traditional Thursday evening film (The Prestige last night, – recommended) to see whether the Azure role has started up yet. It hasn’t, so in the time-honoured way I tell it to reboot – and that fixes it. A few minutes later, she’s thrashing me – mainly because she’s using the phone, and I’m using the emulator over Remote Desktop (my laptop is old, and doesn’t support XNA games in the emulator) – in that setup the emulator doesn’t respond to my mouse moves!

What I need is another phone.

Ah, what’s this I see – the Windows Phone Marketplace Developer Newsletter, announcing Windows Phone 7 Handsets for Developers. The Newsletter says that local evangelists have codes for free phones to give away. I think Mike Ormond is the WP7 evangelist for the UK …

Multi-player enabling my Windows Phone 7 game: Day 3 – The Server Side

I’m building a game to enter in Red Gate’s Windows Phone 7 App competition. I built the core of the game in 3 days from a standing start. Now I’ve challenged myself to make the game multi-player in 3 days, using Windows Azure for the server side.  Day 1 was spent getting up to speed with Windows Azure and networking on WP7. On Day 2 I got the UI sketched out. Here’s Day 3:

8:30 Begin the day with excellent news. With barely any badgering at all Red Badger have kindly offered me an non-expiring build of their XPF UI library for XNA. Thanks chaps!

And thanks to everyone who's shown support by tweeting the last couple of blog posts. I can't tell you how motivating it is as I set to work again this morning.

8:45 Microsoft have released the January 2011 Update to the Windows Phone Developer Tools (on the 4th of February mind, but I'll let that pass). This is the one that brings the promised Copy-Paste support and some performance updates. Being the good boy I am, I install it before beginning anything else.

9:32 Staring work on the server. I've never designed anything RESTful before, so I've taken a quick look at a couple of articles: one at quite a high level, and one in a little more detail.  A logical place to begin is starting a game. So what I think I need to do is define a /Game resource on my server, and make it respond to POST requests.

11:45 Hooked up AutoFac on the server so that I can inject dependencies into my REST services.

12:00 A good chunk of the day gone, and I still haven't implemented starting a game. WCF isn't playing nice at the moment: I can't get it to respond to the POST request I'm making to my Service.

12:01 Writing the above fixed the problem! Well, not quite. As soon as I had written that, I thought of fiddling with the UriTemplate on the WebInvoke attribute. Since I was posting a request to the /Games resource, and I had registered my Games service using routes.AddServiceRoute<GamesService>("Games", serviceConfiguration) I thought I could get away without specifying a value for UriTemplate on WebInvoke. Turned out I needed to specify "/"!

12:05 Next: list all available games, so that a player can choose one to join.

12:45 Done! I can now create several games through the Start a Game screen, and see them all listed on the Join a Game screen.

16:15 The afternoon passes in a blur. I’ve added several operations to my service, so that the basic game setup screens are working. This is what I’ve got on the server side:

Resource	Http Method	Meaning
/Games	POST	Start a Game
/Games	GET	List existing games
/Games/{id}/Players	POST	Join a game
/Games/{id}/Players	GET	List players belonging to a game

Notice any conspicuous absences? That’s right: there are no operations to support actually playing a game. Where has the time gone? But before I can move on, I should at least check that this service works if multiple devices connect to it.

16:25 Fustrated: the Microsoft Windows Phone 7 emulator is single-instance. How can I test a multi-player game if I can only run one copy of it?! I’ve got to find a way round this.

17:30 Eureka! After a journey deep into the bowels of the Microsoft.SmartDevice.Connectivity API and its associated XML datastore I’ve found a way to have multiple instances of the emulator running at once, and even debug them simultaneously.

Hey! Hang on just a minute: there’s already a post on my blog about that – is someone with a time machine playing around with me here?

But never mind that. My 3 days are up, and all I’ve got to show for it are the game sign-up screens. So where do we go from here? Well, I’m going to make my excuses and plead for an extra day – just one more day, and I’m sure I can get it working!

My excuses:

• It took me ages to get the Windows Phone 7 emulator talking to the Windows Azure emulator: the good folks at Microsoft haven’t connected the dots here.
• A good two hours or more of my first day was taken up with the hunt for a working UI library for XNA. Thanks to Red Badger for saving me further frustrating hours.
• Running multiple instances of the emulator really shouldn’t be that hard.

So what do you think? Can I have another day?

How to deploy to, and debug, multiple instances of the Windows Phone 7 emulator

I’m developing a multi-player Windows Phone 7 game. Now I don’t know about you, but I find it hard to test a multi-player application when I’m only allowed to run one instance of it. And that seemed to be the case with Windows Phone 7 applications. Microsoft provide an Emulator, but it’s a single-instance application: however many times you click its icon, you only get the one window.

Googling found me a useful article on how to run multiple instances of the emulator. But it didn’t tell me how to deploy applications to them, or how to debug those applications. There was however, a post in the forums, somewhat reminiscent of Monsieur de Fermat scribbling's, that gave me hope that what I wanted to do was indeed possible.

So I set out on a journey of discovery.

About an hour later, I had this,this, and this

Step by Step instructions

Disclaimer: what I am about to show is completely unsupported by Microsoft or me. Continue at your own risk. Here be dragons.

1. Open the folder [Your Drive Letter]:\ProgramData\Microsoft\Phone Tools\CoreCon\10.0\addons
2. Locate the file ImageConfig.en-US.xsl
3. Take a copy of it, leaving it in the same directory, and name it something like ImageConfig.en-US 2nd Instance.xsl
4. Open the copy in your text editor of choice.
5. Locate the element DEVICE
6. Change the Name attribute, and assign a new value to ID – you can use the Online Guid Generator if you can’t think of one off the top of your head.
7. Scroll down the file to locate the part that says PROPERTY ID=”VMID”:
8. Put a new Guid inside that element – make sure though that you use capital letters rather than lower case.
9. Save the file
10. That’s it. Re open the XAP deployment tool, or Visual Studio, if you already have them open, and you’ll see your new Emulator instances.

A Bonus Visual Studio tip

To debug multiple instances of your Windows Phone 7 application you can do the following:

1. Start the first instance as usual.
2. Change the Deployment Device to your newly-minted 2nd Emulator:
3. To start the 2nd instance, right-click on your project, go to the Debug menu item, then select Start new instance:

4. Prepare a wet towel and a darkened room in preparation for the multi-player debugging experience.

Multiplayer-enabling my Windows Phone 7 game: Day 2–Building a UI with XPF

I’m building a game to enter in Red Gate’s Windows Phone 7 App competition. The first challenge I set myself was to build the core of the game in 3 days from a standing start. Then Red Gate moved the goal posts. So I’ve set myself a new challenge: make the game multi-player in 3 days, using Windows Azure for the server side.  Day 1, was spent getting up to speed with Windows Azure and networking on WP7. Here’s Day 2:

9:00 Decided to take the plunge and go with Red Badger's XPF framework for the UI - what else can I do, if I want to get this thing done in three days? I’m going to need TextBoxes, ListBoxes and the like, and I certainly wouldn’t be able to write them from scratch in the time I have. On Red Badger’s roadmap, there’s no word on a likely release date. I wonder if I can badger them into at least giving me a build that won’t expire before the competition gets judged?

9:43 Got my first "Hello World" screen working using XPF. For ages I couldn't get buttons to respond to clicks, until I noticed from a sample that I needed to supply an InputManager instance to the RootElement.

10:47 Created a TextBox control using XPF. They've done a good job of mimicking the Silverlight API. And in some ways, their DependencyProperty implementation is even better! It uses generics for a start. And the key classes are actually called ReactiveProperty and ReactiveObject because their change notification is based on IObservable from the Rx Framework (which, by the way, comes in the box on WP7). Text input on XNA is pretty limited. Your only option is to call Guide.BeginShowKeyboardInput, which is an async method that takes care of showing the soft keyboard as well as the editor, and then returns to you the text that was entered.

11:40 Refactored my game so it now has Screen classes to represent the states that it can be in - Showing the Game, Showing the Welcome Screen, Showing Help, etc. It’s nice that XNA has the concept of Components and Services built in.

14:21Got a simple dialog working:

14:36 Borrowed the Messenger code from Laurent Bugnion's MVVM Light Toolkit to enable me to pass messages in a loosely coupled way between my screens.

15:06 Seeing strange behaviour in XPF where clicks on a button seem to be handled twice: once by the button, and then by widgets on the following screen (which is made visible by the button click). Realise that this is what comes of changing one screen for another in the middle of handling events. I'm going to have to implement a mini message queue so I can queue the change of screen after the button event has been handled.

15:15 Implemented the message queue, and magically another bug goes away too! That bug was most odd – after I clicked one button, moved to a different screen, then moved back again, all the other buttons would stop working. It turned out that the first button was capturing the mouse events, so the other buttons didn’t get a look in. Making sure that events completed before changing screens obviously fixed the mouse capture problem too.

16:05 Dialogs are coming on nicely now, but it sure is tedious building up a control hierarchy in C#. Oh XAML, how I miss you!

17:21 Got a very basic ListBox working on top of XPF. The time I’ve spent delving around in WPF and Silverlight certainly helps out here!

17:30 I think that’s enough of the multi-player UI done for now. That leaves me with one day to implement the multi-player logic, and the server.

Do you think I can do it?

Multiplayer-enabling my Windows Phone 7 game: Day 1

I’m building a game to enter in Red Gate’s Windows Phone 7 App competition. The first challenge I set myself was to build the core of the game in 3 days from a standing start. Then Red Gate moved the goal posts. So I’ve set myself a new challenge: make the game multi-player in 3 days, using Windows Azure for the server side. Here’s Day 1:

9:00 Started researching networking capabilities in WP7. MSDN has a useful summary. In short, HttpWebRequest and WebClient are supported, as are parts of WCF. One notable absence are Duplex Services – so it looks like I’ll be doing my own client side polling. ChannelFactory.CreateChannel is not supported, so service proxies cannot be generated dynamically - they have to be created using Add Service Reference, or slsvcutil on the command line. Since I’m not a great fan of all the boilerplate that the Add Service wizard spits out, I think I’ll give WCF on the client side a miss. This gives me the idea of creating a RESTful service that I can call using plain old HttpWebRequests.

9:16 Given the recent hoo-ha  over Windows Phone 7 data leaks, I think I should do my bit to save bytes and minimise data usage. I'Since I’m quite keen on Google’s Protocol Buffers format, I’m pleased to discovered that ProtoBuf.Net, Marc Gravell's implementation of the Google Protocol Buffers format supports WP7.

9:22 Starting work on a Windows Azure project for testing communication between client and server. It’s neat how the Cloud project in VS 2010 has a Windows Azure emulator.

10:38 Downloaded and built Microsoft's WCF Web APIs Preview 3. This extends the REST support that WCF has, as of .Net 4.0. Using this, and helpful blog post from Jesus Rodriguez, got a test service sending back responses using Protocol buffers. One thing that caught me out was failing to decorate my data contract classes with the [ProtoContract] and [ProtoMember] attributes. The serializer just returned an empty stream without that. Now to get the phone talking to the server.

11:05 An interruption: the boss arrives back in the office with an HTC HD7 for me to test the game on!

Signed up for a developer account to allow the phone to be unlocked for testing my apps. To my dismay, I discovered that I can't unlock the phone for deploying test apps until the publisher verification process has been completed. What?! I can understand why Microsoft would want to check that our company is who it claims it is before it lets us submit Apps to the market place; but to my own phone? I think I know who I am!

11:39 Encountered my first real problem: Windows Azure compute emulator only listens on the loopback address, 127.0.0.1; this means that the Windows Phone 7 emulator can't talk to it. Seems I’m not the first to have encountered this. I tried a number of solutions:

• Using NCat, a Port fowarding tool. No joy with this at all.
• TcpTrace, another kind of port forwarding tool, worked, but not when Fiddler was listening in.

13:00 Thanks to some suggestions from Phil Haack I discovered that Fiddler will do the job on its own (is there anything it can’t do?). Following these instructions, I set up Fiddler as a reverse proxy. This means my WP7 app can connect to MyMachine:8888, and Fiddler will shuttle the traffic to and from the Azure emulator.

13:10 Discovered RestSharp, a library that builds on top of HttpWebRequest to simplify making calls to RESTful services. In particular, it can deserialize the Response bytes into objects for you.

13:17 Trying to write a ProtoBuf deserializer for RestSharp, but Protobuf is throwing  MissingMethodException. It looks like I might have to use pre-built Serialization assemblies

14:40: Following Mark Gravell's post on using Protobuf-net with WP7, I mange to get deserialization of messages working on WP7 by pre-building a serialization assembly. I have to resort to subterfuge to get the resulting Serializer assembly added to my WP7 project: The Add Reference dialog refuses to do it, claiming that the assembly is not a bona-fide WP7 assembly, so have to add it to the .csproj file by hand.

15:00 In order to allow users to setup multiplayer games, I’m going to need to show some kind of UI. WP7 doesn’t allow you to mix and match Silverlight and XNA within one App. I don’t really fancy rolling my own UI library, so I start casting around for one. A helpful post on the XNA forums provides a list libraries for XNA in general, though only a couple of them support WP7.

15:35 Start investigating Nuclex UserInterface library, a UI library for XNA that claims support for WP7. Initially it looks quite promising: I can get it to render a couple of buttons. But I can’t make the buttons respond when I tap them.

17:15. I give up on Nuclex, and look for something else. The most promising looking framework is XPF, from Red Badger. It’s ambitious: it aims to replicate some of the core features of Silverlight for the XNA framework, including layout, data binding and animation. They have nightly builds available now, but they’re only valid for 30 days from the build date, and there’s no word yet on a release date, or indeed what the cost of a license will be. Do I take a chance on it?

What are your thoughts? Have I missed a framework that will save me hours? Get in touch: @samuel_d_jack on Twitter, or by email.

(Simon Squared) x n: The Multi-player Challenge

A new year, a new challenge.

The end of 2010 found me scrambling to build a Windows Phone 7 game in 3 days using the XNA framework, spurred on by a competition deadline and the potential reward of a $10,000 prize. The challenge was to “build something that developers will love”, and who doesn’t love reading of a race against the clock?

Well, I got the game done (Ok, maybe not done done – it will still stand some polishing) only to find the deadline moved by two months, and thus my unique selling point rendered an unlovely shade of void. So I need a new challenge, a bigger, a bolder challenge.

How about making a multi-player version of the game?

Using GPS to locate players nearby?

In 3 days?

Oh, and I nearly forgot the geeky dessert topping: I’ll be using Windows Azure to pull it all together.

Now, just to be clear, my calendar doesn’t contain three consecutive day-sized gaps, so these 3 days will have to be spread out over the next couple of weeks. In betweenwhiles, I can’t guarantee that my eye won’t stray to the MSDN pages about Windows Azure, or that my brain won’t allocate a background thread to designing message protocols. But I will promise to keep my Visual Studio solution firmly shut whilst the clock is not ticking.

Say hello to Simon Squared, my 3.5 day old WP7 Game

So I finished my “Build a Windows Phone 7 Game in 3 days” challenge, and in just 3.5 days! Only to find, when I went to the competition website a few hours ago, that they’ve moved the goal posts: the deadline is no longer this coming Sunday, but February 28th 2011.

So, if I can convince myself that it doesn’t go against the spirit of my own challenge, I can now spend a bit more time polishing the game, and adding things like sound effects, tombstoning, leaderboards, etc.

But what does it actually do?

I’ve called it Simon Squared, in homage to Simon, an electronic game popular in the 1980s. I’m too young to remember it, but it was a game that flashed coloured lights in sequence, and you had to remember the sequence and play it back. Simon Squared shows you a tiled shape, and then explodes it before your eyes, twisting the pieces one by one. You have to remember the moves it has made, then put the pieces back together.

Since this is Windows Phone 7, you do this by touching the pieces, dragging left and right, up or down to flip them horizontally or vertically, or dragging diagonally to rotate them. Once they’re in the correct orientation, you double tab them to send them sliding back into place in the puzzle.

Here’s a short video to demonstrate¹:

What do you think? Does it look like 3 1/2 days work?

---

1. I was hoping to have a longer, more polished video, but Windows Live Movie Maker kept blue-screening my computer when I tried to render it.

Day 3.5 of my “Build a Windows Phone 7 game in 3 days” Challenge

Red Gate’s Windows Phone 7 App competition ends in three days time. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1, Day 2 and Day 3. Sundown of Day 3 found the game to hard for me to play. This was the result of an extra half day I found scrunched up in my coat pocket:

09:30 Trying to find ways to make the game easier!

09:56 Figured out how to draw translucent, alpha-blended models: set BasicEffect.Alpha to something less than 1, and remember to set GraphicsDevice.BlendState = BlendState.AlphaBlend before rendering. Oh – and objects have to be drawn in reverse order – those at the back first. Now the original puzzle is shown along with exploded pieces – I think I am able to play it now!

10:06 Added a little bump to the front of the tile model, so that you can tell when shapes have been flipped on their backs:

10:55 Implemented a more mathematical way of checking if a shape is back in its home orientation: Take the Vector (1,1) and apply the same sequence of X,Y, and Z rotations to it as to the shape, and check if it still equals (1,1).

11:00 Trying to figure out an algorithm for increasing puzzle hardness gradually.

11:34 Started using SpriteBatch to draw text on top of my game, but 3D objects started rendering weirdly. As ever though, Sean Hargreaves had the answer: SpriteBatch changes several of the GraphicsDevice properties which need to be reset the next time round before drawing the 3D stuff.

12:18 Got a scoring system working, with the score being drawn up on screen

13:19 Added a help button, and a help screen on application startup. Now all I need is a logo, and I think I’m done.

Day 3 of my “Build a Windows Phone 7 game in 3 days” Challenge

The deadline for Red Gate’s Windows Phone 7 App competition is three days away. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1 and Day 2. This was Day 3:

8:50 Further work on the Csv ContentImporter to make it do more of the work in processing the shape data, saving some time in the game.

9:20 Having sorted out the skin of the game, and given it some rudimentary muscles, I now have to introduce mind, or at least, a Brain Stem: I need game logic.

11:12 Made some changes to my content importer, and it no longer works. Now to learn about debugging the content pipeline! Turns out to be pretty easy, thanks to this. Problem is fixed moments later.

11:15 Actually, it’s not. Pressure is starting to get to me. Finding myself guessing at fixes and hitting F5 to see if it works, then repeating the cycle when it doesn’t. Calm down!

13:00 Got first bit of game logic working – deciding whether a shape is orientated correctly for snapping back to the home position.

13:54 Decided to try using radial layout to arrange the exploded shapes on screen –. Now how do I do that? Found an F.A.Q on polar coordinates, and a few minutes later:

14:40 Roped Vinod into creating some levels for the games. He’s taken my Excel level editor spreadsheet to the next level by adding VBA code to generate puzzles automatically.

17:30 Got something looking gamish. Puzzle now knows when it has been completed, and animates off screen. New puzzle animates on. Only problem is, it’s too hard for me to play! Can’t fix that now though – off to the company Christmas dinner.

22:30 First feedback on the game from a friend who volunteered for testing: “The idea is cool, …, very cool!”

I wonder if I can borrow a bit of extra time?

Day 2 of my “3 days to Build a Windows Phone 7 Game” challenge

The deadline for Red Gate’s Windows Phone 7 App competition is four days away. I’ve set myself the challenge of building an XNA game in 3 unplanned days I have in my schedule. Go read about Day 1. This was Day 2:

10:05 – Caught the lurgy. Not feeling well enough to concentrate on real work, and family poorly too. But I might be able to get a bit of the game done.

10:22 - starting work on better gesture processing. Decided on horizontal drag to flip shape in Y axis, vertical to flip in X axis, and diagonal drag to rotate left or right around the Z axis. Double tap will be used to snap the shape into its final position.

10:37 - my little boy wants to use the dining room table to do some colouring, so I head upstairs to sit on the bed. Optical mouse works surprisingly well resting on the duvet.

11:30 - Completed work on gesture recognition. To get overall drag movement, need to store the first FreeDrag sample, and the last, then process them both when a DragCompleted sample is read.

11:35 - Now to work on Hit Testing my shapes when the user touches them. Apparently the term to google for is "3D Picking". XNA helps out here with the ViewPort.Unproject method. There’s also a sample showing how it's done.

14:40 - Hit testing working nicely now. I was impressed with how quickly it came together following the sample (and borrowing some of its code!).

15:13 - Found out how to change the colour of the material: set the DiffuseColor property of BasicEffect on each mesh in the model before rendering. Rather weirdly, DiffuseColor is a Vector3, but if you want to work with something more normal you can do

effect.DiffuseColor = new Color(255, 0, 0).ToVector3();

15:31 - Got shapes rendering with tiles of different colours:

17:10 Built a “level editor” for defining puzzles. Uses Excel to create a CSV which is then imported using a custom XNA ContentImporter. My content importer converts the lines of CSV data in Level objects, Level being a class I defined. The XNA Content Pipeline then takes care of serializing this into binary form and packaging it with my game. Within the game I can just do

var levels = Content.Load<Level[]>("Levels\\Levels");

and XNA will automatically deserialize it. I have to say, I'm very impressed with the XNA content pipeline, and how easy it is to extend it.

Build a Windows Phone Game in 3 days – Day 1

After an unpromising start, Day 1 of my 3 day Build a Windows Phone 7 game challenge ended very satisfactorily. Here's how it unfolded:

9:16 - installed WP7 tools, downloaded XNA book, setup a BitBucket Mercurial repository, and created a Solution. We're off!

9:32 - trying to render my first 3D shape - found a great roadmap to XNA tutorials.

10:07 - Got a 3D spaceship animating on screen following this tutorial

11:12 - thrashing around a bit trying to find a modelling tool to build my own 3D shape. Tried TrueSpace and Autodesk's SoftImage Mod Tool. They all have such arcane and obtuse interfaces - might have spotted a gap in the market here! Found a tutorial on CodeProject about using Blender to create XNA models.

12:10 - at last, my own model bouncing around on screen. Created it using Wings3D - which isn't exactly an intuitive tool, but (to pay it a huge compliment) has the least difficult to use interface of any of the tools I've tried this morning. The results: Move over Electronic Arts!

14:16 - started researching how to extract the Mesh from my tile Model, so that I can combine them into Models representing shapes consisting of multiple tiles. Instead found a great insight from Sean Hargreaves: Models are archetypes: you only need one of each kind, and you can then draw it at multiple places with different transformations (I might have called them 3D Stencils, but I think "stencil" has a different meaning in the 3D community). With this guidance, created a Tile class with a reference to the Tile model, plus an Offset vector which can be used to generate a Translate transform to position the Model correctly when it is rendered on behalf of that Tile.

15:16– figured out how to transform shapes consisting of multiple tiles so that they move as a unit. It all boils down to Matrix multiplication. To position a particular Tile, first multiply together the matrices representing its own translations within the shape, then multiply the result by the matrix representing the transforms of the shape as a whole.  Or as one post in the forums very usefully put it:

Matrix Order = Scale x Local Translation x Local Rotation x World Translation x World Rotation

Isn’t Maths magic? Now look what I’ve got:

16:09 – Thanks to the Input.Touch namespace I now have the shape responding to gestures. It will flip and spin at the swipe of a finger! Only trouble is, when the gesture is a Drag, the shape flips, then keeps on flipping. Turns out the problem is that in each call to my Update method I’m only reading one gesture from TouchPanel.ReadGesture, and the other multiple gestures that are generated by that single swipe get queued up -  only to be interpreted by my Update method in subsequent calls as further gestures. From the examples in Charles Petzold’s book I learn that in each call to the Update method I should ReadGesture until IsGestureAvailable returns false

17:05 – feeling rather chuffed. Just implemented a simple Storyboard class that allows me to schedule a series of animations, then play them back at the appropriate point as time progresses. I’ve now got multiple Shapes doing a little dance on screen.

Can I build a Windows Phone 7 game in 3 days?

Red Gate Software launched a competition three weeks ago: three prizes of $10,000 to be won for the best Windows Phone 7 application, as judged by panels of developers. Now I’ve always had a hankering to write a game, particularly one involving 3D graphics. Microsoft made me hanker some more when they released the XNA framework a few years back. And, would you believe it, you can use the XNA framework to write 3D games for the Windows Phone 7.

Now it just so happens that I have 3 unplanned days in my schedule between tomorrow morning¹ and the competition deadline on December 19th. And my colleague Vinod has had an idea for a memory game with a twist.

Taking stock, what do we have?

• An incentive. Provided by Red Gate ü
• The Tools. Cheers, Microsoft ü
• The Windows Phone 7 Programming bible. Thanks, Charles Petzold ü
• A germ of an idea. Nice one, Vinod ü
• And 24 hours clear in the calendar …

So, what do you think? Can I learn the XNA framework, and produce an award winning game in just three days? There’s only one way to find out.

On my marks … Get Set … Go!

---

1. Yes, I am writing this at 1 o’clock in the morning. I couldn’t sleep for excitement. Sad, am I not?