Realistic animations using sprite sheets! 🎥
Hi, *|USERNAME|*!
The techniques behind animating things on a screen have been around for millions of years, if we were to use the timeline from (spoiler alert) Battlestar Galactica. The basic idea involves having a strip of pictures, a light source, and a mechanism that would cycle the strip of pictures very quickly. This is the gist of a film strip and how movies used to get onto the screen in a theater:
With computers and more modern animation tools and runtimes, the film strip got abstracted away. A lot of the animations we deal with involve us just specifying a starting point and an ending point. The animation system takes care of creating all the in-between points that would traditionally have been represented by our strip of film. Now, this isn't to say that having a strip of pictures for animating went away in our modern computer age.
Many animations, even today, can only be represented by the equivalent of a digital film strip or a series of pictures that need to quickly be played sequentially:
These series of images, especially in the context of animations, are better known as sprite sheets. Because you aren't limited in what you can represent in these individual sprites (they are just images after all), you have the ability to create really elaborate visualizations and movie-like representations that wouldn't be possible using other techniques.
To help you better understand how to create animations using sprite sheets, there are two tutorials on the site with your name on it. If you are in the world of the DOM and are looking to create a sprite sheet animation using CSS, this tutorial has you covered. If you like to work at a lower level using the canvas, this other tutorial covers how sprite sheet animations can work in this code-to-pixel world instead.
TILL NEXT TIME!
As always, before I leave you to it, I would love to hear from you on things I can do better, topics you'd like me to write about, and more. Don't be shy! The easiest way to contact me is via Twitter or by posting on the forums like it is 1999.
Cheers,
Kirupa 😃