HTML5 Platformer game PhoneGap'ed onto Windows Phone 7.1(5)

Description

Today's Mobile Monday takes us to a project type that I've not covered before, using PhoneGap (aka Cordova) to build Windows Phone 7.1(5) apps. The promise of PhoneGap is that you can write a single app and deploy it to many different phone platforms, from iOS to Android and Windows Phone 7.

That's cool, what's even cooler is that this project takes a HTML5 project we've covered before,XNA Platformer, HTML5 Style and using the magic of PhoneGap puts it on Windows Phone...

How to create HTML5 apps on Windows Phone with PhoneGap

We will first see in this article what the added values of PhoneGap for HTML5 applications are. We’ll then discover how to create our very first project where we will retrieve the accelerometer’s values from our JavaScript code. At last, we will review a complete HTML5 gaming sample almost ported as-is to PhoneGap to use the accelerometer available on the Windows Phones.

  1. Introduction
  2. PhoneGap: a framework filling the gap
  3. Let’s create our first PhoneGap project
  4. Getting the accelerometer’s values from JavaScript
  5. Review of a complete sample with the HTML5 Platformer game
    1. Forcing the landscape orientation
    2. Handling various resolutions
    3. Loading the levels with calls to the file system instead of using XHR
    4. Modification of the gameplay to use the accelerometer
    5. Screenshots of the result and FPS on some phones
    6. Complete Visual Studio Solution to download
  6. Conclusion

The article provides a good getting started guide and gets you quickly up and running with PhoneGap. One thing to note is that the PhoneGap project moves very fast. The current version is v1.7.0 and while this article is only a few months old it's on v1.3.0. The good news is that everything pretty much works, no matter the version.

PhoneGap: a framework filling the gap

While waiting on real standardized specifications, we don’t have the choice: we need to create some bridges between JavaScript and the native code of the targeted platform to have access to its capabilities. The idea is then the following one: taking the native languages of each platform (C#, Objective-C and Java) and creating a framework with these languages that will expose interfaces to the JavaScript developer.

This is exactly what PhoneGap is doing. Let’s take the Windows Phone case which is the main topic of this article. A Windows Phone’s PhoneGap project is simply a Silverlight application hosting the WebBrowser control (and thus IE9) as well as a Silverlight Assembly written in C# which does the job to access to the accelerometer, GPS, contacts, camera and so on. In this way, as a JavaScript developer, you will use a DLL named WP7GapClassLib.dll (the PhoneGap core runtime) without even knowing it via the usage of the code embedded in the phonegap-1.3.0.js file. This DLL contains some C# code which does calls to the Silverlight runtime available on the phone. As the runtime has access to all the capabilities of the phone, the JavaScript will do also. The JavaScript library will then act as a gateway between both worlds. Moreover, the good point of using this library is that your code will most of the time works as-is on the PhoneGap versions of Android or iOS. PhoneGap offers then an interesting form of portability.

Please note by the way that the PhoneGap support for Windows Phone is now totally complete since the recent 1.3.0 version:

image

The article then moves onto a "Hello Phone" app, showing you how to start your first app and how to get started using the accelerometer.

Let’s create our first PhoneGap project

Prerequisites

Here are the very first steps you need to follow:

  1. Download the Windows Phone SDK: Windows Phone SDK
  2. Download the last version of Phone (1.3.0 today) on their site: http://phonegap.com/
  3. Unzip the downloaded file
  4. Copy the PhoneGapStarter.zip and PhoneGapCustom.zip files into \Documents\Visual Studio 2010\Templates\ProjectTemplates
File->New project

Once the previous steps are done, you will be able to create your first PhoneGap project. Start Visual Studio 2010, select the "Visual C#" templates and filter them via the "Gap" keyword. You should then see a new type of project named PhoneGapStarter:

...

Getting the accelerometer’s values from JavaScript

We’re going to see here how to get the values sent back by the accelerometer (of the emulator or the real device) in a very simple way.

Open the "index.html" page and change its default body by this one:

...

Then, best of all, starts talking about the port of the HTML Platformer game, including tweaking it to use accelerometer to control the movement (i.e. tilt the phone to the left to run to the left, right to run to the right).

Review of a complete sample with the HTML5 Platformer game

Let’s now review a more complex sample. My idea was to start from the game I’ve written before. It’s exposed in this article: HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS . I wanted to see what I should do to make it works on the phone.

First step is to simply copy/paste the different .js, .png, .css files into the "www" directory and to mark them as "Content". Here are the others steps to follow.

...

image

image

Complete Visual Studio Solution to download

You’ll find the complete source code of the HTML5 Platformer for PhoneGap here: HTML5GapPlatformer.zip

Other useful resources

Conclusion

PhoneGap offers interesting perspectives to help you writing applications on the phone. It lets you using your existing skills in JavaScript, HTML and CSS. PhoneGap won’t necessary cover all the scenarios currently available with the native development stack (Silverlight or XNA). But this could be something to have a look to if you’d like to capitalize on the HTML skills of one of your team. You will have to pay attention to properly identify the kind of project to work on.

You can also think about mixing both environments to create hybrid experiences: the main branch would be written using "HTML5" and some specific parts into native code. Using this idea, some plug-ins have been created to push a bit further the integration into the Metro UI: PhoneGap Plug-ins for Windows Phone . You’ll find for instance one of them allowing a JavaScript code to update the Tiles.

At last, PhoneGap and HTML5 could allow a relative portability to other platforms… with some limitations. But this is a vast subject with passionate debates that would need a complete dedicated article.

If you're thinking about developing app's for Windows Phone 7, but are also interested in other mobile platforms and are not afraid of HTML5 and JavaScript, then you should check out PhoneGap today...

 

Here’s a few more links you might find interesting:

The Discussion

Comments closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to send us feedback you can Contact Us.