AS3: SpriteSheet Class – Extracting Sprites

If you haven’t already read the intro to this tutorial, you can find it here. In it we are introduced to sprite sheets, what they are, and some examples for where to use them.

One of those examples included combining many assets into a single sprite sheet. We can then extract a portion of this bitmap as its own unique element and use it as if we had loaded it separately. This kind of sprite sheet could be used for a variety of things. Maybe you’re designing an interface and you want to group similar UI elements in order to load them all at once. You could also find yourself developing a game in which there are many items for the player to collect and you need an easy way to organize them. The example below shows such a sprite sheet:

Images © Nintendo

Extracting Sprites

Like we mentioned above, this kind of sprite sheet would be the most useful to us if we had a way to extract an individual element from it. Thankfully with the help of some code and a little Triforce of Wisdom we can do just that.

Note: From here on out I’ll be referring to my SpriteSheet class. It is available here for reference.

This example uses the same sprite sheet that we first looked at in this tutorial. Click an area of it to extract it and blow it up, showing off its 16-bit glory. In the code below we will attempt to extract a sprite in the same way.

Actionscript

You will need to import the custom SpriteSheet class like this in order to have access to it, along with these other imports.

Actionscript

What we do here is:

1. Instantiate a copy of the SpriteSheet class
2. Extract tile ‘0’ with the DrawTile function
3. Add the extracted sprite to the stage

Pretty simple huh?

Actionscript

If we have imported the SpriteSheet class then we can create a new copy of it and access all of its functionality. The constructor takes 3 parameters:

SpriteSheet(tileSheetBitmap:Bitmap, width:Number = 16, height:Number = 16)

• tileSheetBitmap: the Bitmap of the sprite sheet we will use
• width: the width of  tiles in the sheet
• height: the height of tiles in the sheet

Assuming we have loaded and have access to our sprite sheet Bitmap, we pass it to our new class as variable ‘sheet’.

The width and height parameters need to be set to the size of the sprites in the sprite sheet (not the entire sprite sheet). In this particular example both dimensions are 20 pixels.

Note: Each tile in your sprite sheet must have the same dimensions in order to work properly.

Actionscript

Here we create a new blank Bitmap to contain the pixel data of the sprite we’re going to copy. Next we call the DrawTile function of our recently created SpriteSheet class and pass it an integer. In short, this tells the class to locate an area of the sprite sheet Bitmap based on the parameter we just sent, and extract a rectangle of pixels from it determined by the width and height that we specified in the constructor. We then hand off this data to our blank Bitmap as its new bitmapData.

After that we simply attach the new Bitmap to the stage, which now displays sprite ‘0’, to use how we please.

Numbering of a sprite sheet:

In the example above we extract from our sprite sheet by passing the drawTile function an integer of ‘0’. This number represents a particular tile on our sprite sheet. When numbering our sprites we start at the top-left and increment by one for each tile down a row progressively. Since we’re starting the count with zero we need to offset the tile’s number by one (tile number – 1). Therefore with ‘0’ our example is effectively extracting the very first sprite.

Sometime in the next couple of days I will post an article with tips for creating sprite sheets.

Concluding..

This example may have been a little trickier than some in the past because it involves using a custom class, so feel free to download the complete Flex project to the top example!

Stay tuned for the next tutorial which covers sprite sheet animation!

Ben

The post AS3: SpriteSheet Class – Extracting Sprites appeared first on Ben Silvis.