Animating a walk cycle with HTML 5 and canvas.

We’ve worked with Flash for a long time… Don’t worry this isn’t a Flash vs HTML article. We’d like to draw a comparison before we get started… In the early days of the internet, Flash designers could only get away with a few animations happening at the same time without seeing a dramatic drop in performance because of the lack of powerful computers at the time.

  As computers got faster and the Flash Player matured, designers were able to push the boundaries further and further. Being part of that movement was an awesome opportunity. We learned first-hand what we could get away with. Some ideas were too big for the current technology, but now we can gauge the feasibility of a project based on our knowledge of those boundaries.

  HTML 5 has generated some serious hype. Rightfully so, it’s amazing. The web is reaching more and more places. HTML 5 will be the de-facto standard for developing content for upcoming platforms that have access to the internet. Technology for in-dash computers and set top boxes will start out only having the processing capabilities of those early computers. Consumers are expecting their experiences on those screens to compete with what they have come to expect on their desktops and laptops. Adobe is already working on a HTML 5 animation suite codenamed ”Edge” which aims to be a powerful tool for creating animation and transitions in HTML 5.

  This brings up some questions: How much code can we throw at Javascript without the browser screeching to a halt? What are the options for bringing animation out of the plug-in and into the browser?

Why zombies?

  Why not? There’s not a better feeling then fending off an army of the undead in a zombie game. A recurring theme with zombies is that there are a lot of them. So, how many zombies can we put on the screen at the same time? What are the options for making them walk? And what can be expected from the canvas tag in future projects?

Picking the right Javascript Library

  We needed the ability to rotate an image around a pivot that is not at the very center of the image. Raphael’s implementation of the rotate() method has parameters for defining the location of the origin of rotation.

  Raphael is very elegant. It takes over the creation and management of the canvas tag and any class method you call does the hard work for you.

The set up

  Since the goal of this experiment was to see how much processing we could get away with, we made a full walk cycle of a zombie in Flash. The walk cycle consisted of 10 different images attached to an armature. A function traced out each image’s x, y, and rotation for every frame of the animation. This generated a big array for each part of the zombie which we would be letting Javascript handle without the need of the armature.

  In our Javascript, the zombie can be scaled too so there is a bit of math being processed in addition to what’s already going on inside of Raphael for canvas management.

Testing

  We loaded up the zombie test page on several computers and recorded the ranges of the frame rates we got. The test page has 5 zombies on it. Each zombie starts its walk cycle at a different time. The page also has a statistics monitor on it. We’re using Stats.js from Mr Doob’s Blog. The stats monitor records the current frame rate