Getting started with Windows 8 Metro Style HTML5/JS Games…

I spent a fair amount of time over the past few months working with Windows Phone games using XNA.  With Windows 8, we now have the option of creating metro style games using HTML5/JS.  My recent history has focused more on XAML/C# apps using mostly Silverlight.  Although I have been working with HTML and the web since the beginning I’m not a very experienced JavaScript developer, and this will be my first attempt at creating Windows 8 Metro Style HTML5/JS apps of any kind.

I have a problem of wanting to blog things only after I have figured them out.  This time, I’m going to try a different approach and blog as I go.  That means I’ll probably have to correct myself at some point in the future.  But if you want to learn along with me, then you’ll have to experience the bumps and sharp turns with me as well. 

For this blog post I am just going to list links off to the resources I am using as I go through the learning process.  From my initial review, I think I will start looking at creating an HTML5/JS game using the “JavaScript and HTML5 touch game sample” from Microsoft.  Once I have completed that, I plan to start over using “EaselJS” which is part of the “CreateJS” suite.

Microsoft Resources:
(At the current time, 06/19/2012, many of the documents listed here are preliminary and subject to change or move)

Creating a Metro Style game using JavaScript” – This is a starting page in the preliminary Windows 8 documentation.  It has links off to other topics (some incomplete) for getting Started as well as working with graphics, audio, and input.

"Designing great games for Windows” – High level guidance for developing games on Windows 8.  Uses “Cut the Rope” and “Tankster” as examples.

Developing games” – General overview of building games for Windows 8, including links to C++ and DirectX topics.  I’ll be ignoring the C++ / DirectX game development options in this series.

How to draw on an HTML5 canvas” – The basics of drawing on the HTML5 canvas.

JavaScript and HTML5 touch game sample” – Sample application that can be used as a starting point for your own game.

Tutorial: create a basic JavaScript game using our game template” – A tutorial based on the “JavaScript and HTML5 touch game sample” listed above.

3rd Party Resources:

EaselJS” – A JavaScript library to help with sprite management, and other game related tasks.  Part of the “CreateJS” suite.

HTML5 Gaming: animating sprites in Canvas with EaselJS” – The first in a series of blog post by David Rousset where he uses the EaselJS library to port his XNA based platformer game over to HTML5/JS.

CraftyJS” – another open source JavaScript library for gaming

ImpactJS” – a commercial JavaScript gaming engine

Feel free to get started on your own.  I am going to do the same.  When I have something useful to post, I’ll do so!

Leave a Reply