Blit vs MovieClip : Introduction

What the hell is this Blit thing I've been banging on about ?  Well Wikipedia goes into a lot of detail about the origin, purpose and method of Bit Blitting but it doesn't really describe the process in AS3 clearly.

In essence Blitting is copying a bitmap from memory to another bitmap for display.  You may remember in an earlier post that I realised I made a total cock up by creating a new Bitmap for each object.  Generally only one bitmap should be used for display although multiple bitmaps can be used to create layers. The bitmaps that are drawn from memory should be stored as efficiently as possible so its a good idea to use BitmapData's.  These can be anything from static objects to animated characters and effects.

Now it's important to understand that to blit properly in AS3 you will be dropping a lot of a the display list functionality that makes life so much easier.  BitmapData doesn't extends DisplayObject so the only DisplayObject that you will be using is the bitmap that you'll be drawing to.  A lot of this functionality can be replicated using the parameters in method we're going to look at : copyPixels() while others can be simulated in other ways.  I'll go over this once I get around to doing it myself :)

It might seem crazy but the improvement in performance is excellent.  In tests (which I'll write up later) show that blitting is around 3 times faster in FPS and allowed the player to render around 10,000 animating and moving objects to stage (it was only 4/5 FPS but try getting that many movieclips on the stage with out the player crashing!).

Right, the concept then.  You'll have a sprite sheet :

source

So you have 25 tiles, each one is essentially a single frame in movieclip.  Playing one after the other will give you an explosion.  Now there are a couple of different methods for storing this bitmap and/or each tile and the guy at 8bitrocket did some nice experiments and examined the benefits of the different types.  The way I see it is that you can cut up the tiles and store individual bitmapData's or store the original bitmapData and the pre-calculated co-ordinate of each tile.  For now we'll talk about storing a point for each tile to make it easier.

You'll also need a bitmap to draw each frame to, I think most people call it a canvas.  As mentioned before this will be the main display and all objects will be drawn to it.  You'll need to clear and redraw it every frame otherwise you'll be left with residual images.  From this bitmap you'll be calling copyPixels()s : 

copyPixels(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, alphaBitmapData:BitmapData = null, alphaPoint:Point = null, mergeAlpha:Boolean = false):void

So you'll be passing it the stored bitmapData, a rectangle that defines the tile shape and pre-calculated position and the point it needs to be copied to.  If it is an animation like above you'll be changing the position of the rectangle each frame to animate it.  The destPoint is important as it will allow you to decide where the object will be displayed on canvas.

What a daft picture that is!  I think it took me about as long to write this post to actually get around to making that thing :)

So although the performance is so much better the work you need to put into creating the framework that is going to support blitting is quite extensive.  Once the framework is in place though you'll be laughing at how much more your games can do compared to standard display list games :)

There will be more posts on SpriteSheets discussing how I actually did it myself and the results from the test.  I also thought of a couple more things I could look into, simple mouse tools, some mathematical tools (Vectors, distances, angles), and some different methods of collision detection (hopefully Separating Axis Thereom and bitmapData.hitTest).  Fun times!