At MIX11, I attended the HTML5 Canvas Mastery boot camp, featuring fellow Canucks, Lanny McNie (@astrostyle) and Shawn Blais from gskinner.com. These are the folks who built Pirates Love Daisies, a tower defense game built in HTML5.
If you haven’t done so already, drop everything and check it out. It’s a great example of what’s possible with HTML5.
As part of the development process for this game, the developers at gskinner.com built a framework called EaselJS, which abstracted the 2D context API of the HTML5 canvas. Why? Well, because – frankly-speaking – the 2D context API can be a bit gnarly, especially for those folks who don’t have a background in game development. While the HTML5 canvas is great for pushing pixels, it’s an immediate-mode drawing API, which means that nothing is retained in-memory; you are responsible for managing and maintaining the drawing surface. And, while that’s great for things like performance (especially for browsers like IE9, which feature hardware-acceleration for things like the HTML5 canvas), it can be pretty challenging for web developers wanting to do this themselves. For these reasons, the folks at gskinner.com built EaselJS.
Here’s the description from the EaselJS page:
So, what’s possible with this framework? Lots. The folks from gskinner.com have posted a number of examples, which you can check out for yourself: game, sparkles, drag & drop, localToGlobal, globalToLocal, sprites, graphics, bar graph. However, one of my recent favourites is The World’s Largest PAC-MAN.
Again, I think examples like this, built with awesome frameworks like EaselJS, really demonstrate what’s possible with HTML5 today.
For a good primer of EaselJS, check out Mike Chambers’ excellent blog post, Getting Started with the Canvas Element and EaselJS.
Miguel Carrasco (@miguelcarrasco) happened to catch me coming out of the HTML5 Canvas Mastery boot camp and asked what I thought about the session:
If you’re interested in finding out more, go check out EaselJS and start cranking out some games. Even better: Submit an entry to the Dev Unplugged Contest we’re running. There’s a category for games and we want your entries!