Animating a walk cycle with HTML 5 and canvas.

Posted On 02.08.2011

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, as well as the lowest frame rate and the highest frame rate. We cached the page in each browser, then let it run for 15 seconds and recorded the values.

Give this a test on your computer and let us know how your browser performs
http://digitalsurgeons.com/labs/html5/canvas/zombies/

Chrome and Safari performed as well as we expected. With their hardware accelerated canvases and optimized Javascript engines they chomped through this test.

Firefox also did about like we expected. The test ran fine for the most part, but hang ups here and there hurt the overall score.

Conclusion

Any more than these 5 zombies on the screen would make viewing in Firefox an unpleasant experience without any optimization. I definitely think that using sprite sheets would perform much better.

The canvas tag, when paired with a modern browser, can do impressive things. We will continue our zombie research and will post our findings. In the meantime drop us a comment with your test scores.