HTML5 Logo by W3CThe 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.

Demo at the Georgia Tech Game CampGame Campers at Work/PlayCambridge Game Camp DemoersDemoing a Game

imageThe 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.

HTML5 Presentation ResourcesLearning HTML5


Implementing HTML5


IE Test DriveInternet Explorer & HTML5


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 Frameworks & Tools


imageInternet 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


Web Standards Update for VS2010Visual Studio 2010 Extensions


Expression Web 4 HTML5 Support


Session 3 – HTML5 Graphics

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

SVG-oids gameSVG


Canvas PadCanvas


HTML5 Blizzard DemoSVG & Canvas


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.

List of Game EnginesJavaScript Game Engines

  • List of Game EnginesBefore 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


Galactic Demo3D in 2D


Game Dev Resources


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:

  • SkyDrive ShareHTML5 – 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