Things got a little crazy around here. Promoting Windows 8, preparing for a little event called TechEd (shameless plug: I will be doing a game dev talk so register! Early Bird Registration still open) and never ending emails causing me to slip behind schedule on my game dev. So this is my “Catch-up post” just to show that I have not forgotten about this competition.

Learning what is possible

I don’t know much about the Windows Phone platform and a little less around what version 8 has to offer. This article is a great starting point for all the new features in Windows Phone 8 for developers. But nothing beats actually trying to get some code to work. Here is what I wanted to achieve in my first Phone-Dev-Spike:

  1. Can I manipulate the DOM
  2. Is the <canvas> element supported in the HTML project type  
  3. Can I execute arbitrary JavaScript using buttons in the AppBar

Short and simple…for now.

Creating the project

In Visual Studio 2012 do a File->New->Project (or just type CTRL+SHIFT+N). Select Windows Phone and the ‘Windows Phone HTML5 App’ template.

image 

This creates a C#/XAML based solution with a WebBrowser wired up on the MainPage. So we are not getting a “native” HTML5/JavaScript app but rather a typical C#/XAML based Phone app with a browser control neatly wrapped for us. We still need some understanding of C# and XAML to integrate with Phone features. The bulk of our game logic will be built using HTML, CSS and JavaScript.

If you ever add a WebBrowser control to your Phone project make sure the ID_CAP_WEBBROWSERCOMPONENT capability is selected, most templates have it selected by default.

image

Manipulating the interface

I wrote something really simple just to see that I could use standard JavaScript to update the DOM. Here is the code:

Then it was time to put down a canvas element and draw a square. Also simple stuff. Don't forget to change fillStyle / colours used as the default is black and if you did not notice Phone 8 default to the dark theme with a black background.

Here is how it looks using the included emulator, which is seamlessly integrated into Visual Studio.

image

 

Now we know we can write plain old HTML & JavaScript and it just works, nice to have IE10 built into the phone. You can also get IE10 for Windows 7. But everyone reading this is running Windows 8…right!?!?!

Our game is going to run in landscape so we want the app to start-up in that mode. It is real easy to change that. In the MainPage.xaml we just need to set the following attributes for the main tag:

SupportedOrientations="Landscape" Orientation="Landscape"

Outside the browser

Now its time to add a button to the application bar and see if we can run some JavaScript to get the square to bounce. For now I am writing all my JavaScript inline – not something I would recommend. As we flesh out our game a better structure will be needed.

Putting the XAML below between the ApplicationBar element in MainPage.xaml sets-up the new button. wiring up BounceApplicationBar_Click as the method to run when the button is clicked.

<shell:ApplicationBarIconButton IconUri="/Assets/AppBar/appbar.bounce.png" IsEnabled="True" Text="bounce" Click="BounceApplicationBar_Click"/>

And the click method has one line in it: Browser.InvokeScript("bounceRect");

We are expecting the JavaScript function bounceRect, which is defined in index.html to be executed when the button is clicked. And it is.

For now our animation code is really naïve. It will have to be improved. This is just to make sure we can do what we want.

Getting down to work

Now that we know we can write our game using HTML, CSS and JavaScript its time to buckle down and start coding. Next post will be about displaying sprites and getting useful animation going.

Complete project

The complete code for this project is in HTML5App1.zip on my SkyDrive - http://sdrv.ms/Y0cKTD