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.
To give you an example of EaselJS sprite handling, the following parameters set up the frame sets for the SpaceAnglers “absuctee” character:
"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!