Last week, I had just attended a user group meeting for DCDNUG, hosted by G. Andrew Duthie, a Technical Evangelist for Microsoft. The topic was “Developing Games for the Windows Store with HTML5 and JavaScript” and was a great introduction to creating games for Microsoft’s new platform using familiar web technologies.

I downloaded Andrew’s Community Megaphone app for Windows 8 after the meeting, and learned about the interactive event, Game Development for Beginners, at Microsoft’s Reston VA office. This is one of many free Game Dev events from Microsoft listed in the app.

I jumped at the chance to attend the event on May 25, and was pleasantly surprised at how quickly I could get a multiplatform HTML5 game up and running. We had started off with plain JavaScript, then proceed to use popular libraries and frameworks, and wrapped up with an HTML5 game creation tool that does not require any coding.

During the session, we learned about the following:

• HTML5 Canvas: You can draw everything in your <canvas>, but also consider drawing HTML elements (e.g. buttons) using actual HTML tags outside the canvas. Check out Microsoft’s HTML5 Canvas Pad.
• Game loops and frame rates: Sure, you can use setTimeout to run your game loop, but you should use requestAnimationFrame() instead.
• CreateJS: HTML5 libraries and tools, at http://www.createjs.com
• ImpactJS: JavaScript game engine for HTML5 games: http://impactjs.com/
• WeltMeister ⁽¹⁾: a level editor for ImpactJS: http://impactjs.com/documentation/weltmeister
• WebMatrix: free from Microsoft, useful for running WeltMeister from ImpactJS: http://www.microsoft.com/web/webmatrix/
• Atari Arcade: Classic games, reimagined for HTML5 (works best in IE): http://atari.com/arcade
• Jesse Freeman’s HTML5 games: http://jessefreeman.com/category/games/
• Inkscape: free open-source tool for graphics editing: http://inkscape.org/
• Bfxr: 8-bit game sound effects: http://www.bfxr.net/
• Construct 2: HTML5 game creator: https://www.scirra.com/construct2

Andrew demonstrated how to use Construct 2 to create HTML5 games that can be viewed and played in any modern browser. You can also export to Windows 8 and Windows Phone 8.

By the end of the class, I had followed all the steps to create a simple platformer and also a 2D “runner” game. Think of Temple Run, but in 2 dimensional side-scrolling mode. Fortunately, I also had my sprite sheet from my last Indie game project “Angry Zombie Ninja Cats“.

I created a Windows8 app version of my runner game within minutes. I also published a web version immediately, which I was able to test on various smartphones, tablets and computers without any issues.

Here’s a short URL for the web version so that you can try it for yourself:

http://tinyurl.com/shahedRunner

Simply touch or click to jump over the gaps. Enjoy! 🙂

web version of Ninja Cat Runner

⁽¹⁾ To use Weltmeister with IIS Express and WebMatrix, you’ll need to download and configure the Impact IIS Backend files, which can be downloaded here: http://code.google.com/p/impactjs-iis-backend/. The configuration requires a little trial and error in IIS Express to get the path working, but it does work.