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.

A FindResource implementation for Silverlight

Here’s an interesting omission in Silverlight that I stumbled upon today: Silverlight doesn’t provide you with a way to do a hierarchical resource look-up in code.

You can do it in XAML. Write

<Grid>
    <Grid.Resources>
        <Style x:Key="MyStyle>
        </Style>
    </Grid.Resources>
    <DockPanel>
        <Button>
            <TextBlock Style="{StaticResource MyStyle}"/>
        </Button>
    </DockPanel>
</Grid>

and the TextBlock will find the appropriate style in the Grid’s resource dictionary, even though it’s several layers up the hierarchy. And if the resource isn’t found in any of the parent elements, StaticResource will then look in the Application’s Resource Dictionary.

But, whereas WPF provides the TryFindResource method to do the same kind of look-up in code, the best you can do in Silverlight is

element.ResourceDictionary[“MyStyle”]

and that returns null if the resource isn’t in the element’s own ResourceDictionary. 

No matter. It’s easy to a proper lookup yourself:

public static class FrameworkElementExtensions
{
    public static object TryFindResource(this FrameworkElement element, object resourceKey)
    {
        var currentElement = element;

        while (currentElement != null)
        {
            var resource = currentElement.Resources[resourceKey];
            if (resource != null)
            {
                return resource;
            }

            currentElement = currentElement.Parent as FrameworkElement;
        }

        return Application.Current.Resources[resourceKey];
    }
}

With that in place

textBox.TryFindResource("MyStyle");

will do what you expect.

Which of course makes me wonder why this was omitted from Silverlight in the first place. Am I missing something?

(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.