HTML5 Platformer game PhoneGap'ed onto Windows Phone 7.1(5)
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...
- PhoneGap: a framework filling the gap
- Let’s create our first PhoneGap project
- Review of a complete sample with the HTML5 Platformer game
- Forcing the landscape orientation
- Handling various resolutions
- Loading the levels with calls to the file system instead of using XHR
- Modification of the gameplay to use the accelerometer
- Screenshots of the result and FPS on some phones
- Complete Visual Studio Solution to download
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
Please note by the way that the PhoneGap support for Windows Phone is now totally complete since the recent 1.3.0 version:
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
Here are the very first steps you need to follow:
- Download the Windows Phone SDK: Windows Phone SDK
- Download the last version of Phone (1.3.0 today) on their site: http://phonegap.com/
- Unzip the downloaded file
- Copy the PhoneGapStarter.zip and PhoneGapCustom.zip files into \Documents\Visual Studio 2010\Templates\ProjectTemplates
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:
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.
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
- Full Support for PhoneGap on Windows Phone is Now Complete!
- PhoneGap on Windows Phone Tips from Glen Gardon who has written several very interesting tutorials to follow
- Lot of good tutorials in the Wiki section of PhoneGap: http://wiki.phonegap.com/w/page/35501397/Tutorials
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.
Here’s a few more links you might find interesting:
- XNA Platformer, HTML5 Style
- Simply create a PhoneGap application for Windows Phone 7.5 in Visual Studio 2010