AS3 Sprite Sheets

Question

I have an image mySprite.png. The image is a 5x5 grid of 32x32 px sprites. This image has been loaded into the project's library.

Assuming I have a render() function inside a class, how would this class draw itself as a single sprite from this sprite sheet resource?

Answer 1

The short answer is that you will want to use BitmapData.copyPixels() to copy only a small section from your source sprite sheet to your display sprite that is actually on the screen.

Something like:

private function DrawSpriteIndex( displayBitmap:Bitmap, spriteSheet:Bitmap, spriteIndex:int ):void {
  var spriteW:int = 32;
  var spriteH:int = 32;
  var sheetW:int = 5;

  displayBitmap.bitmapData.copyPixels(spriteSheet.bitmapData, 
                                       new Rectangle( (spriteIndex % sheetW) * spriteW, Math.floor(spriteIndex / sheetW) * spriteH, 32, 32),
                                       new Point(0,0)
                                      );
}

You may find these links helpful -- they helped me when I was learning this:

• http://www.8bitrocket.com/2008/07/02/tutorial-as3-the-basics-of-tile-sheet-animation-or-blitting/
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=13430
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=14591
• http://www.8bitrocket.com/newsdisplay.aspx?newspage=15967