AS3: Intro to Using Sprite Sheets

In this post I would like to introduce you to a custom class I wrote for working with sprite sheets. Now “what’s a sprite sheet?” you might ask. Well, while I’m not going to delve into much of the theory or the speed benefits from using them, you should know a few things:

A sprite sheet is a collection of sprites arranged into a single image, where each sprite represents a frame of an animation, an asset, a part of an image, or something to that extent. The idea of a sprite sheet has been utilized for a long time, namely in early gaming systems like Atari and Nintendo. In recent times they are most often used for efficient bitmap animation and are extremely useful in tile based games for level creation.

When loading external assets, many times you will find that it is much more time and code efficient to load many in one state – Not to mention that when used effectively this can save memory. Also, once you start animating many objects in a scene you will see a real performance spike when compared to regular Flash keyframe animation. Props to 8bitrocket for some useful info.

SpriteSheet Class

Enough explaining for now – In the following 3 tutorials I will describe how to utilize specific features of this class to achieve different results with your sprite sheets.

SpriteSheet Class – Extracting Sprites
SpriteSheet Class – Sprite Sheet Animation (coming soon)
SpriteSheet Class – Image Compositing and Level Creation (coming soon)

Actionscript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

package com.bensilvis.spriteSheet
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.geom.Point;
import flash.geom.Rectangle;

public class SpriteSheet extends Sprite
{
private var tileSheetBitmapData:BitmapData;
private var canvasBitmapData:BitmapData;

private var tileWidth:int;
private var tileHeight:int;
private var rowLength:int;

private var tileRectangle:Rectangle;
private var tilePoint:Point;

public function SpriteSheet(tileSheetBitmap:Bitmap, width:Number = 16, height:Number = 16)
{
tileSheetBitmapData = tileSheetBitmap.bitmapData;
tileWidth = width;
tileHeight = height;

rowLength = int(tileSheetBitmap.width / width);

tileRectangle = new Rectangle(0, 0, tileWidth, tileHeight);
tilePoint = new Point(0, 0);

canvasBitmapData = new BitmapData(tileWidth, tileHeight, true);
var canvasBitmap:Bitmap = new Bitmap(canvasBitmapData);
addChild(canvasBitmap);

drawTile(0);

addEventListener(Event.REMOVED_FROM_STAGE, remove);
}

public function drawTile(tileNumber:int):BitmapData
{
tileRectangle.x = int((tileNumber % rowLength)) * tileWidth;
tileRectangle.y = int((tileNumber / rowLength)) * tileHeight;
canvasBitmapData.copyPixels(tileSheetBitmapData, tileRectangle, tilePoint);

return canvasBitmapData.clone();
}

public function tileBoard(boardIndex:Array):BitmapData
{
var wide:int = boardIndex[0].length;
var tall:int = boardIndex.length;

canvasBitmapData = new BitmapData((tileWidth * wide), (tileHeight * tall), true);
var boardCanvas:Bitmap = Bitmap(getChildAt(0));
boardCanvas.bitmapData = canvasBitmapData;

tileRectangle = new Rectangle(0, 0,(tileWidth * wide), (tileHeight * tall));
for (var i:int = 0; i < wide; i++) {
for (var j:int = 0; j < tall; j++) {
tilePoint = new Point((tileWidth * i), (tileHeight * j));

drawTile(boardIndex[j][i]);
}
}
return canvasBitmapData.clone();
}

public function remove(e:Event):void
{
tileSheetBitmapData.dispose();
canvasBitmapData.dispose();
}
}
}

Edit: Added a disposal method thanks to some excellent suggestions

Ben

Be Sociable, Share!

Tweet

custom class, SpriteSheet
October 16, 2009 at 1:10 am

4 comments »

November 26, 2010 at 12:37 pmtellioglu

link

Thanks.
Please write the others
SpriteSheet Class – Sprite Sheet Animation (coming soon)
SpriteSheet Class – Image Compositing and Level Creation (coming soon)
June 25, 2011 at 8:01 pmTep

link

Yes. Please write the missing two Tutorials!
January 8, 2013 at 8:15 amzach

link

Awesome!
Please do the animation tutorial

Trackbacks/Pingbacks

Ben Silvis