AS3: Intro to Using Sprite Sheets

5 Replies

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.

  1. SpriteSheet Class – Extracting Sprites
  2. SpriteSheet Class – Sprite Sheet Animation (coming soon)
  3. 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

5 thoughts on “AS3: Intro to Using Sprite Sheets”

  1. tellioglu

    Thanks.
    Please write the others
    SpriteSheet Class – Sprite Sheet Animation (coming soon)
    SpriteSheet Class – Image Compositing and Level Creation (coming soon)

  3. Pingback: Using Sprite Sheets in AS3 | NNGAFOOK.com | Blog

Leave a Reply

Your email address will not be published. Required fields are marked *