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

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.

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