HTML5 Pirates Love EaselJS

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.

Pirates Love Daisies

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.

EaselJS

EaselJS is a JavaScript library that allows you to target the HTML5 canvas element in a rich and meaningful manner. Its audience is developers who are accustomed to work with sprites, graphics primitives, and input event handling (i.e. mouse events). It provides all of the building blocks for HTML5 games in canvas, without resorting to the 2D context API. In fact, a lot of the pitfalls with HTML5 canvas (i.e. pixel positioning) can be easily avoided through this framework.

Here’s the description from the EaselJS page:

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The Easel Javascript library provides a retained graphics mode for canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

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.

WBP

The World’s Largest PAC-MAN was coordinated through Microsoft Australia and built by the talented folks at Soap Creative in Australia. It features a (virtually) never-ending, crowd-sourced super-maze for you to play one of the best arcade games ever created. It was built using a number of JavaScript libraries like Modernizr and jQuery. However, the bulk of the heavy-lifting was done by EaselJS.

WBP - 2

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!