The goal of this tutorial is to give some information how one can create a spritesheet at runtime to achieve things like fast performing glowing blurred objects.

See example of this tutorial in action

Sometimes we would want to use the real fancy stuff like blurring, coloring and nice glows in our games. It can be a very (processor) costly task to just use these filters and colorTransforms on the sprites in our game at runtime.

But there is a way to speed things up.

We can render the needed effects/animations into an array of BitmapData objects - the frames – and simply attach those frames to a SpriteSheetComponent using the function SpriteSheetComponent.initializeFromBitmapDataArray(spriteSheetFrames);

It will cost some initialization time before the game can start, but we only have to BitmapData.copyPixels instead of use Sprites with filters or transforms. This can be done for all kinds of purposes; rotating, scaling, exploding, glowing etc etc.

In our sample we load one PBE logo png image file and from that ImageResource we will create 360 frames of animation.

Some code:

Normally we load a spritesheet from disk and use a divider to provide the frame information

// Create the SpriteSheet
var animatedSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();

// By assigning the SpriteSheetComponent.ImageFilename, the image will be automaticly loaded
animatedSpriteSheet.imageFilename = sheetFileName;

// Create a CellCountDivider to specify the number of columns and rows of our spritesheet
var spriteSheetDivider:CellCountDivider = new CellCountDivider();
spriteSheetDivider.xCount = cellXCount;
spriteSheetDivider.yCount = cellYCount;

// Hook up the SpriteSheetDivider
animatedSpriteSheet.divider = spriteSheetDivider;

In the case of having created our own array of frames

var spriteSheetFrames:Array = new Array();

** Fill array with BitmapData objects **

// Create the SpriteSheet
var animatedSpriteSheet:SpriteSheetComponent = new SpriteSheetComponent();

// because we have generated out frames we dont need to set the filename
// or create a divider, we just call initializeFromBitmapDataArray
animatedSpriteSheet.initializeFromBitmapDataArray(spriteSheetFrames);

See example of this tutorial in action

resource for this tutorial is the PBE logo
( put these in the folder of your compiled swf )

Download the code for this tutorial.

Did you know that using the makeyourflashgame.com website you can easily create an animation’s spritesheet from a number of frames? Read it in this post

Tags: PBEngine, Tutorial

This entry was posted on Friday, September 11th, 2009 at 4:10 pm and is filed under makeyourflashgame.com. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.