Samstag, 17. September 2016

Blitting - The art of fast Pixel drawing

Back in 2009 I had a blog about flash game development. After taking it offline I've got some requests to put some content back online. Today I found a backup of the blog and some posts still seem to be interessting to me. So I'll repost some of them here. This is one of them.

To display objects on screen in flash games Movieclips or Sprites are used very often. Sure this is the easiest way to handle it and if there are not much objects this is OK. But when performance comes in play there is a much better way to display objects - blitting. Blitting reduces the overhead of managing display objects in the flash player and allows you to use the saved CPU power to display more objects or to use it where you really need it.


Blitting stands for BLock Image Transfer and describes a technique of drawing pixels on screen. The idea is quite simple. Instead of creating tons of MovieClips we create one Bitmap and paint all objects on it. So the flash player has just to manage one object. With flash 8 (I think) the BitmapData object was introduced. This object allows direct access of pixel data in images. And this is what we are going to do.

For this I'll write the same application one version with MovieClips and a second version with blitting. The application will be very simple. It will create moving objects on screen and as long as a certain FPS count isn't reached flash will add one object. If the FPS count falls to much one object will be removed automatically.

The average number of objects on screen will indicate which version runs at a better performance.

I'll not describe how to create MovieClips, but I'll explain how blitting is done.

First we need the BitmapData object. The BitmapData object represents the content of a Bitmap object. It gives us direct access on pixel basis. Additionally we need a Bitmap object. This object represents the display object we can add to stage, we also link our bitmapData object to it. This is the way our pixels comes on screen.

======================== AS3-Source code:begin
import flash.display.BitmapData;
import flash.display.Bitmap;
var screenData:BitmapData = new BitmapData(640,480,true,0x00000);
var screen:Bitmap = new Bitmap(screenData);
======================== AS3-Source code:end

The BitmapData object offers different ways to manipulate its pixel content. The fastest was to bring something to it is the function copyPixels. With this functions we can transfer pixel data from one BitmapData object to another one. We also can determine the position where pixels will appear. For this we need an additional BitmapData object holding the data we want to show on screen. To do this we are simply drawing a MovieClip on it.

======================== AS3-Source code:begin
import flash.display.MovieClip;
var mc:MovieClip = new Unit(); // Unit is the MovieClip in the Library
var objectData:BitmapData = new Bitmapdata(42,42,true,0x000000);
objectData.draw(mc)// this draws mc to objectData
======================== AS3-Source code:end
Technically this is all we need to do.
X and Y describes the point where objectData is drawn in screenData.

For more information about BitmapData object follow this link:

 demofile using MovieClips: Demo with Movieclip
 demofile using blitting: Demo with blitting
 Here you can download the source of the demo files: Source code for demo files

Keine Kommentare: