Space Anglers: An Experiment in HTML5 Video Games

Join the Space Anglers tournament and compete for the highest score! Grab as many humans as you can before your energy runs out. Space Anglers is my first production in HTML5 <canvas>. It started out as an exploration of the various <canvas> libraries and eventually morphed into a full video game. The goal was to push the limits of HTML5 and create an arcade style game on par with what is typically done in Adobe Flash.

CreateJS

HTML5 <canvas> is quickly becoming an attractive platform for animation. Thanks to a number of evolving JavaScript libraries, it’s much easier to work with than it had once been. I’ve reviewed the PaperJS library, and experimented with several more, but the CreateJS library has a feature set which is distinctly suited for game development. CreateJS is the umbrella name for a suite of JavaScript libraries. Combined, they handle: <canvas> rendering, motion tweening, sound, and asset preloading. EaselJS, the CreateJS library which handles <canvas>, has very powerful controls for sprite based animation. I found this particularly useful in game development. Easel JS makes it very easy to create and manage sprite sheets, or single image files composed of many animation frames. Load a sprite sheet into EaselJS, define your frame grid and label your keyframes. It’s as simple as that.

To give you an example of EaselJS sprite handling, the following parameters set up the frame sets for the SpaceAnglers “absuctee” character:

“frames":
{
    "width": 44, 
    "height": 58,
    "regX": 22,
    "regY": 0,
    "count": 17
}
“animations":
{
    "walk": [0, 9, "walk"],
    "stun": [10, 15, "stun"],
    "splat": [16, 16, "splat"]
},

Controlling the animation is as simple as gotoAndPlay(“walk”). EaselJS can create a mirrored copy of your sprite sheet as well. This eliminates the need for separate right and left movement sprites. Call addFlippedFrames() during initialization to add the mirrored frame sets. Now you can call gotoAndPlay(“walk”) when moving the sprite left or gotoAndPlay(“walk_h”) when moving right. Adding icing to the sprite handling cake, CreateJS also comes with a tool, Zoë, to convert an Adobe Flash swf into a png sprite sheet.

Thoughts on HTML5

There are, of course, drawbacks to HTML5 in its current form. Rendering speed differs with each browser. Being a Chrome user, I was surprised to see some of the best animation performance come from Firefox, especially on less powerful computers. Sound support is extremely inconsistent. SoundJS relies on a Flash fallback for browsers which do not support Google’s web audio api or Mozilla’s audio data api. Browsers on Apple’s iOS platfrom are left crippled in terms of sound.

I label Space Anglers “an experiment” because it was more of a learning experience than a full production. The game comes from a much larger concept, originally meant for flash, distilled down to a mini-game. Space Anglers has proved to me that not only can Flash quality game be created in HTML5, but it can be done with about the same amount of time and effort.

Play the game now at spaceanglers.com and get on the high score board!