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

• IE 9 Developer Tools Deep Dive – Part 1: Introduction
• IE 9 Developer Tools Deep Dive – Part 2: Working with HTML and CSS
• IE 9 Developer Tools Deep Dive – Part 3: Debugging JavaScript
• IE 9 Developer Tools Deep Dive – Part 4: Profiling JavaScript
• IE 9 Developer Tools Deep Dive – Part 5: Network Performance and Debugging

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:

• On demand - MSDN Webcast: A Lap Around HTML5: Meet the Players (Level 200)
• On demand - MSDN Webcast: A Lap Around HTML5: Adding Fun(ctionality) and Style with JavaScript and CSS3 (Level 200)
• Dec 20th - MSDN Webcast: A Lap Around HTML5: HTML5 Graphics (Level 200)
• Dec 22nd - MSDN Webcast: A Lap Around HTML5: Bringing it Together - Creating an HTML5 Game (Level 200)

Enjoy creating those games!

-Chris