It’s not a game you know

I’ve been promising to get my son’s game running on a mobile phone for some time. When he was younger we spent some time writing a version of PacMan that we could run on his Nintendo DS, though this had to be written in C and we needed to use an R4 chip to allow us to boot the game on the hardware. He’s older now, with much grander ideas, so I spent some time looking at writing a game for Windows Phone 7 using Silverlight. The XAML skills I would have picked up doing this would have been useful, but the lack of portability to other platforms has been holding me back.

HTML5 could be the answer. The idea of writing one version of the game, and then being able to run it on several mobile phone variants is certainly attractive, and PhoneGap is a recent technology that has promised this ability, to take a HTML5/Css/Javascript application and move it easily on to another platform.

PhoneGap is great in that it offers a standard library which runs on the different variants of mobile phones, simulating library functions when they aren’t available natively. It still leaves the nagging question of how PhoneGap is actually implemented, so this weekend I pulled out Reflector and did some investigation.

The PhoneGap project that comes as a Visual Studio template is fairly straightforward. As a user of the the template, you simply place your assets (html, css and javascript) into a directory (www). At build time these assets are added as resources into the resulting application, and the PhoneGap runtime takes care of unpacking and starting the code inside the browser instance that it manages.

phonegapproject

The finished project runs inside the web browser instance, which is managed by the C# code in WP7GapClassLib.dll. PGView is the user control which wraps the web browser.

reflectoronpgobegap

In order to understand exactly what it was doing, I wanted to write my own version, so I took a standard Silverlight project for Windows Phone, added a web browser control to it, and changed the property of the browser to make it scriptable.

appXaml

The trick that PhoneGap uses, is to write the data from the resources into isolated storage, so that they are then accessible to the browser. We do the same in the following code, effectively simulating the PhoneGap start sequence.

constructor

Then all we need are a couple of event handlers, one that calls into the javascript to start it running, and another that handles the callback from the javascript into the managed code.

eventhandlers 

With that it place, we have an application that displays a count in javascript and displays the same value in a TextBlock in the managed world.

finaldisplay

Unfortunately we only have the ability to pass strings across the language boundary, so we may need to do some marshalling to interoperate with rich data types. Having the ability to jump out into the multi-threaded managed world might be useful for some applications, if the single threaded Javascript world doesn’t have the necessary power for the application code. This means we have the option at a later stage of forgetting about portability in order to get better performance.

This does sound like a very viable way to write an application though and I’m keen to start writing – I’ll let you know the result.

Advertisements
This entry was posted in Computers and Internet. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s