Sprite sheet Animation
A sprite sheet is a bitmap image file comprised of a series of smaller images that usually portray an animation sequence. You can say that a sprite sheet is a movie in itself. An example of a sprite sheet is show below:
Each smaller image is 221 pixel wide and 154 pixels high (I include this information in the file name for ready access). Generally, the sequence is repeated when the animation plays like in a walk sequence for example. Repetition is the default operation for sprite sheets.
The following animation was created using KoolMoves (or KoolShow) Html5 animation software using two which originated as animated gifs downloaded for free from an online library. There are many sources of animated GIFs online, varying in quality. Adding a sprite sheet to the stage is like adding a regular image or text to the stage.
Notice the curved motion path of the bird. It was achieved using a quadratic motion path with the auto orient feature turned on which causes the bird to orient along the path of its motion.
Several videos and tutorials on the topic of sprite sheets in the context of our software are:
- Sprite Sheets and Motion Paths
Another more complex example is shown here. The animation of falling letters is created with the assistance of Box2dWeb physics engine. The visual appearance of the object is supplied by the sprite sheet using the CreateJS library and the position and angular information is supplied by the physics engine.