In my last post, I wrote about gameQuery; since then, I have tried out EaselJS, a similar Javascript library. Unlike gameQuery, however, EaselJS uses HTML5 canvas; gameQuery uses DOM manipulation.
I tried building the same game from my last post with EaselJS and Backbone.js. To my surprise, working with EaselJS was somewhat similar to coding in ActionScript 3 – there was a stage (the root level container for a display list) and there was”addChild(),” which is used to add display objects to containers. In fact, many of the methods in Container reminded me of AS3’s DisplayObjectContainer, so coming from a Flash background, I found EaselJS’s concept of a display list and working with it easy to grasp.
Left: EaselJS in a Backbone.js View; Right: gameQuery in a Backbone.js View
In the above code screenshot, it took less than half as many lines in gameQuery to load images. However, from a readability perspective, I could understand what’s going on in the EaselJS code without having to look it up in the documentation. Also, I like the flexibility of EaselJS in that I have the ability to add event listeners for when the images have been loaded. gameQuery was more about setting images and their properties to certain DOM nodes. Furthermore, I would rather go with EaselJS, since it is still being actively updated and maintained. And, last but not least, EaselJS is part of a suite of Javascript libraries – CreateJS – which has libraries for tweens, sounds, and preloaders. This means easy integration with these other libraries. There is even a way to integrate EaselJS with Box 2D for physics, which I have yet to explore.
So in my quest to find a Javascript library for graphics and animation, I will be going with EaselJS. I’ve quickly looked at Crafty, but its documentation seemed a bit lacking, and its features seemed comparable with EaselJS… although it isn’t in a suite of other library goodies like EaselJS. 🙂
Check out my source code for EaselJS with Backbone.js here.
melkybee 