HTML5 Game Development Resources

Article
12/15/2011

The first series of HTML5 Game Camps concluded yesterday, helping attendees to learn HTML5 by diving in and writing games. Here’s a summary of links and resources for anyone who would like to get started.

The events featured introductions to the underlying technologies (HTML5, JavaScript, graphics) then a look at engines that can make game development easier. The second half was hacking time followed by a chance for everyone to demo their creations. It was great to see what could be made in just a few hours!

Thanks to everyone who participated, and let me know if you’ve continued working on your creations after the events!

Session 1 – A Tour Around HTML5

This session focuses on a brief introduction to HTML5, CSS3, standards, and browser support.

Learning HTML5

List of HTML5 Presentation Resources – Earlier post with many links for this session
HTML5 at W3C – Specifications and learning materials
HTML5: Edition for Web Authors – Focused subset of the specification for web devs
HTML5 on the Internet Explorer Learning Site – Videos, tutorials, articles
HTML5 Demos from Giorgio Sardo – HTML5, CSS, JS, etc.
HTML5 Doctor – HTML5 articles, Element Index, and resources

Implementing HTML5

CanIUse.com – Details support by browser for HTML5, CSS3, and other technologies
Modernizr – HTML5 & CSS3 feature detection made easy
HTML5 Cross Browser Polyfills – Helpful for implementing features while supporting a range of browsers

Internet Explorer & HTML5

Internet Explorer Test Drive - IE9 & IE10 resources
IE Blog – Windows Internet Explorer Engineering Blog
Beauty of the Web – Shows IE and HTML5 in action

Session 2 – Adding the Fun(ctionality) with JavaScript and Tools

The focus is on a few resources for learning JavaScript, libraries to make things easier, and support in developer tools.

General JavaScript

JavaScript Fundamentals – MSDN reference
Eloquent JavaScript – Introduction to JavaScript programming (published online under an open license)
W3Schools JavaScript Introduction
JSLint and JSHint – Tools to help identify problems in your JavaScript
jsFiddle – Tool for testing snippets of JavaScript, HTML, and CSS

JavaScript Frameworks & Tools

jQuery – JavaScript library to help with common functionality with cross-browser support
jQueryUI – Effects, widgets, and themes with cross-browser support
The Big List of JavaScript, CSS, and HTML Development Tools, Libraries, Projects, and Books – A helpful list from scriptjunkie

Internet Explorer Developer Tools (built in to IE 8+) – See also Firebug for Firefox and the Chrome Dev Tools

WebMatrix 2 Beta

WebMatrix 2 Beta - Free, lightweight, and supports HTML5/CSS3, ASP.NET, and PHP development

Visual Studio 2010 Extensions

Visual Studio Web Standards Update – Adds HTML5 & CSS3 support to VS2010
Web Essentials Extension – Many new CSS, HTML and JavaScript IDE extensions for VS2010
CSSCop Extension – Uses CSS Lint to help detect issues in your CSS

Expression Web 4 HTML5 Support

HTML5, CSS3, and More with Expression Web 4 SP1 – Post describing CSS3 & HTML5 support added in SP1 (now on SP2)

Session 3 – HTML5 Graphics

Focused on 2D graphics with SVG and Canvas and choosing between them.

SVG

“Modernizing Your Website: SVG Meets HTML5” – Mix11 session by Jennifer Yu
UN Systems Org Chart – Shows the effects of zooming with SVG
SVG-Oids – Simple SVG game example
Inkscape – Open Source SVG editor

Canvas

Canvas Pad – Great way to see/learn canvas capabilities
“Deep Dive into HTML5 <canvas>” – Mix11 session by Jatinder Mann
How to Use Canvas to Create a Space Game – MSDN resource
Paper.js – Open source framework for vectors on canvas

SVG & Canvas

How to Choose Between Canvas and SVG to Create Web Graphics – MSDN resource
HTML5 Blizzard – Demo featuring Canvas, SVG, Audio, WOFF, and CSS
“HTML5 Blizzard: Full Hardware Acceleration in Action” – Describes the creation of the HTML5 Blizzard demo
Programming Simple Games Using Canvas or SVG – Very basic MSDN sample game

Session 4 – Creating an HTML5 Game

At this point, the survey of the moving parts (HTML5, JavaScript, graphics, etc.) is done, so it’s time to pull it all together and make games! So many choices, but to keep things simple the focus was on leveraging game engine libraries already out there.

JavaScript Game Engines

List of Game Engines – Before you start, take a look at this list to see what’s already out there
EaselJS – Canvas-based JS library by gskinner.com. Used in some of the demos during the session.
Akihabara Tutorials – A nice tutorial series by Boston locals Darren Torpey and Darius Kazemi

Audio

Getting Started with the HTML5 Audio Element – MSDN resource
SoundJS – Helps make it easier to work with HTML5 audio

3D in 2D

ThreeJS – A way to add 3D to your 2D games
Galactic Demo – Built using ThreeJS
“Galactic: Building a 3D Solar System with HTML5” - Describes how ThreeJS was used in Galactic

Game Dev Resources

IGDA – Find a chapter near you and network with game developers
Game Development Podcasts
Game Development on MSDN – Targets XNA & Silverlight, but the Education Catalog has some interesting tutorials and starter games that could inspire your HTML5 work

The Slides

Much of the time was spent in code and demos, but the slides we did use are up in a presentations folder on SkyDrive. The relevant files are:

HTML5 – Practical First Look
HTML5 Camps – Scripting
HTML5 Game Camp – Graphics
HTML5 Game Camp – Games

Webcasts

Missed the in person events? Fortunately, it isn’t game over! The content is being brought to you online via these webcasts:

Enjoy creating those games!

-Chris