blog.joa-ebert.com – Blog of Joa Ebert

With Flash8 you have got all that nice stuff. Since every release Macromedia anounces more performance. In most cases this is true, but just try the following code in Flash7 and Flash8

[as]var i: Number = 0;
var sum: Number = 0;
var sin: Function = Math.sin;
while ( i++ < 100000 ) sum += sin( i );[/as]

You won't get much differences in speed because Flash is way to slow to handle 100000 iterations. So if you want to do draw a 100x100px image by using something like this you won't have any chance of a good framerate (even if there are just 10000 iterations).

[as]var i: Number = 0;
var j: Number;
while ( i < 100 )
{
j = 0;
while ( j < 100 )
{
x.setPixel( i , j , calculateColor(i, j));
j++;
}
i++;
}[/as]

Of course you can see the 100x100 iterations here. You get the idea. Using loops to iterate through every pixel is not fast enough. This is and was slow since the release of Flash3. So where is all that performance they are talking about? Let's try to find out.

The best example in my eyes is a tilemap engine or so called pixel-scroller. Strille developed long time ago an object-based scroller. You can find it here and read about the technique here. The framerate of about 40fps (on my machine) was a huge step forward and very impressive. Now we have all that nice filters and BitmapData stuff and it should be possible to get more fps. Of course the filters won’t help us here.

The idea of a Flash8 pixel-scroller is very simple: Load all tiles and draw them into one big BitmapData. Then scroll only this one object instead of attaching, removing and repositioning tiles every frame.

The first thing you have to do is drawing all tiles into the BitmapData. This should not be to hard, because there is the function copyPixels() which makes it easy. But there is a very silly problem. The maximum size of a BitmapData object is 2880x2880px (I think). A simple map with 16x16px tilesize and a width of 200 tiles makes 16px * 200 = 3200px which is more than 2880px. What you have to do is to split the map up into several objects.

There is a simple workaround to solve this problem. Even if the maximum size of a BitmapData object is 2880x2880px the maximum size of a MovieClip is unknown to me. So what about splitting up the map into some BitmapData objects and draw all tiles by using copyPixels. Then using attachBitmap() to draw all bitmaps into MovieClips and putting them together. I have done this in two classes called BitmapComposer and TileComposer. What you see on the figure is the composition of all bitmaps and the pink rectangle is the viewport.

The last problem is the scrolling. How to scroll for example 4 very large MovieClips without losing performance? A simpls solution is using a mask. But do not forget we are using Flash8. And there is such a great feature which is called scrollRect. You just have to use the flash.geom.Rectangle to set which area is displayed. This makes scrolling very fast.

What are the problems of this method:

• Your map is static – no animations
• Tiles can not be removed or attached dynamicaly
• It might be hard to understand how to split the map

But this is very great for background-scrollers. Imagine a game which is not tile-based but has got a scrolling background which is tile-based. I would recommend you to use this technique because the performance loss is to bear. Most games I have seen do not have any animated tiles. You could also combine this scroller with another one that is able to deal with animated and dynamically created tiles.

• Experiment
• Thread on FlashKit
• BitmapComposer
• TileComposer

Maybe I will write another post about this because tomsamsom asked me to automate the composition part which is a bit wired. Just a simple explanation here:
[as]var comp: Array = [[[0,1],[0,1]],[[0,1],[1,2]],[[0,1],[2,3]]];
/*
[
[[0,1],[0,1]], // first bitmap. from y 0 to 1 and x 0 to 1
[[0,1],[1,2]], // second bitmap from y 0 to 1 and x 1 to 2
[[0,1],[2,3]] // third bitmap from y 0 to 1 and x 2 to 3
];
*/
var tilemap: BitmapComposer = new BitmapComposer(
mc, // mc to draw
320, // viewport width
240, // viewport height
comp, // composition array
map, // map array
flash.display.BitmapData.loadBitmap(“blocks”), // tiles
0×80, // tiles in x-direction per bitmap-object
0×20, // tiles in y-direction per bitmap-object
4 // tilesize is 1 << 4 = 16
);

tilemap.render( 100 , 100 ); // x and y
[/as]