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
• Sprite Sheet Animation Using Javascript
• Sprite Sheets and Javascript to Control Objects

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.

In another example shown here, a sprite sheet is animated in two ways using javascript. On mouse click, the sprite sheet animation sequence changes to the jump sequence (which was defined in the properties of the sprite sheet object). On animation tick, the sprite sheet moves laterally across the stage. The software provides a environment for animation scripting that merges the scripting with objects added to the stage manually. The sprite sheet image was from a CreateJS demo example.

It is easy to create sprite sheets from animated GIFs using this online free website ezgif.com/gif-to-sprite. To covert from SWFs, this link should prove helpful www.createjs.com/zoe.