Today’s tutorial covers how to implement animated sprites and use the related APIs. While this might seem like a rehash of previous tutorials, several key improvements have been implemented since the current sprite system was introduced earlier this year. In addition, many developers are still confused about how to implement sprites in Corona because, in fact, there are two approaches leading to a similar result:
The old (and now depreciated) sprite.* library.
The current sprite APIs that work cohesively with image sheets and the display.* library.
While Corona is technically “backwards compatible” with the depreciated sprite.* library, we strongly encourage that you use (or migrate to) the current sprite methods. If you haven’t implemented the current methods or haven’t ever used sprites in Corona, this tutorial will walk you through the process.
For those already familiar with basic animation in Corona, this tutorial introduces the full array of sprite event listeners and how to implement them.
What exactly is a image sheet? Imagine it as a sheet of paper on which you draw the individual frames for your animated object(s). Other technical terms include texture atlas, image map, or sprite sheet. In Corona, we’ll simply refer to it as an image sheet, because its usage is not limited to either static or animated objects — you can, and often should, use image sheets for both purposes: static images picked from a portion of an image sheet, and animated sprites utilizing multiple frames from a sheet.
Detailed technical notes and usage examples for the graphics.newImageSheet() API are located here, but in this tutorial we’ll discuss how to use image sheets for animated sprites.
Pictured below is a sample image sheet for a running cat. If you want to use this image sheet to follow through the entire tutorial, you can copy the hi-resolution version from here. This sheet consists of eight “frames” in a specifically ordered sequence. By default, the animation will begin at the top-left frame, proceed to the next frame (to its right), wrap to the next row when it reaches the end of the current row, and finally stop (or repeat) when the entire sequence is complete.
Let’s proceed with how to configure this image sheet in Corona. First, set up an indexed table for a basic image sheet of uniform-sized frames. You can (and often will) set up an image sheet using frames of different sizes packed in a tight, optimized arrangement (seedocumentation), but in this tutorial we’ll use a basic image sheet.
24 Responses to “Tutorial: Animated Sprites and Methods”