html5 graphics with svg & css3,HTML5 Game Development Resources

HTML5 Game Development Resources

12/15/2011

5 minutes to read

In this article

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

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

Eloquent JavaScript – Introduction to JavaScript programming (published online under an open license)

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

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

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 ” – Mix11 session by Jatinder Mann

Paper.js – Open source framework for vectors on canvas

SVG & 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.

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

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

Game Dev Resources

IGDA – Find a chapter near you and network with game developers

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