ActionScript 3 Animating a sprite sheet


Example

A sprite sheet by definition is a bitmap that contains a certain animation. Old games use grid type sprite sheet, that is, every frame occupies an equal region, and frames are aligned by the edges to form a rectangle, probably with some spaces unoccupied. Later, in order to minimize the bitmap size, sprite sheets start to be "packed" by removing extra whitespace around the rectangle that contains each frame, but still each frame is a rectangle to simplify copying operations.

In order to animate a sprite sheet, two techniques can be used. First, you can use BitmapData.copyPixels() to copy a certain region of your sprite sheet to a displayed Bitmap, producing an animated character. This approach is better if you use a single displayed Bitmap that hosts the entire picture.

var spriteSheet:BitmapData;
var frames:Vector.<Rectangle>; // regions of spriteSheet that represent frames
function displayFrameAt(frame:int,buffer:BitmapData,position:Point):void {
    buffer.copyPixels(spriteSheet,frames[frame],position,null,null,true);
}

The second technique can be used if you have a lot of Sprites or Bitmaps on the display list, and they share the same sprite sheet. Here, the target buffer is no longer a single object, but each object has its own buffer, so the proper strategy is to manipulate the bitmaps' bitmapData property. Prior to doing this, however, the sprite sheet should be cut apart into individual frames.

public class Stuff extends Bitmap {
    static var spriteSheet:Vector.<BitmapData>;
    function displayFrame(frame:int) {
        this.bitmapData=spriteSheet[frame]; 
    }
    // ...
}