Animator 1.5 Sencha Docs

Concepts and Workflow: Sprites

Animation through sprites is a technique that has been around since early days of computer graphics. Thanks to expanding specifications of CSS3, it is now also possible to easily create sprite animations for the web with Animator.

A sprite is in essence nothing more than an image. Animating through sprites is achieved by quickly advancing through a sequence of images. For a succesful animation, there should be at least 12 sprites per second, but for smoother animations more should be used. Using less than 12 sprites per second will make the animation appear very choppy. On the other hand, you should be wary that the higher the more sprites per second, the more resource intensive the animation will be, which may result in animation running slower or choppier than it should on some systems. Because this depends on many factors (frame rate, size of the picture, compression, browser that the animation is played in), the best advice is to test the created animation as much as possible.

In order to create a sprite animation with Animator, first the sprites should be prepared and then arranged in a so-called sprite-sheet.

spriteexample

Above you can see an example of a sprite-sheet. It consists of 6 50x50px images that when played in order from left to right should view as a bouncing ball. With 6 sprites, this animation should not last longer than 0.5 seconds. Sprite-sheets can have the images in any order left-right and top-down are the most common ones because these orders are easiest to work with, as they require shifting of just a single coordinate when animation is running.

Once you have created your sprite-sheet, follow these steps to create a sprite animation with Animator:

  • Import your sprite-sheet in the assets.
  • Create a new object. Set its size to the size of a single sprite.
  • Set the sprite-sheet as the background image of the object.
  • Create two keyframes that will mark the beginning and end of the animation. At first keyframe sprite #1 will be visible, while at the last keyframe the last sprite in the sprite-sheet will be visible.
  • At the second keyframe, set the position of the background to be shifted in such way that the last sprite in the sprite-sheet is visible. For example, if the sprite-sheet contains 6 sprites, the sprite size is 50x50 and they are ordered from left to right, the position of background should be set to x = 250 (n-1 * 50), y = 0.
  • Set the easing property for the first keyframe to Steps(x,start). A dialog will pop up; enter the number of sprites minus 1 (n-1) in the sprite-sheet to be equal to the number of steps. The first sprite is equal to initial condition, so it is only necessary to specify number of times that the sprite-sheet should be shifted.

This will result in background of the object moving through the sprites as the animation plays.