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.
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?
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
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