HTML and CSS Reference
In-Depth Information
Simple Cell-Based Sprite Animation
With a tile sheet of images, it is relatively simple to create what seems like cell-based or flip-
book animation. This technique involves rapidly swapping images over time to simulate an-
imation. The term
flip-book
comes from the age-old technique of drawing individual cells of
animation in the top-left corner pages of a topic. When the pages are rapidly flipped through,
the changes are viewed over time, appearing to create a cartoon.
Cell-based animation
refers
toasimilarprofessionaltechnique.Individualsame-sizedcells(orpages)ofimagesaredrawn
to simulate animation. When played back rapidly with special devices in front of a camera,
animated cartoons are recorded.
We can use the
drawImage()
function and the first two tiles on our tile sheet to do the same
thing.
