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:
- Can I manipulate the DOM
- Is the <canvas> element supported in the HTML project type
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.
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.
Manipulating the interface
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.
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:
Outside the browser
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");
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
The complete code for this project is in HTML5App1.zip on my SkyDrive – http://sdrv.ms/Y0cKTD