I just started to develop our upcoming space shooter game. We want to push graphics/look as much as we can.  For this reason I needed to find fast BitmapData methods to draw things on screen. I did some benchmarks with some common methods.

Also, while benchmarking i had chance to discuss these results with Engin Erenturk at Yogurt. He was wondering if any faster way to draw vector graphics on BitmapData.  Then we find a nice way to do this up to 300% faster.

A quick note

These are not scientific benchmarks. The results here can vary on environment (most with browser choice).

Environment Specs

MacBook with 2 GHz. Intel Core 2 Duo, 2 GB. of memory and Flash Player version is 10.1.53.64. Browser is Safari. SWF Debug Mode is On

Canvas BitmapData is 320 x 240 and next BitmapData is 1.000 x 1.000.

I tried to limit copying size to 100 x 100 but some methods also tested with variations.

Many iterations done 100.000 times to get precise results.

copyPixels()

According to documentation it’s a fast method to copy a rectangular area of pixel data between BitmapDatas with no stretching, rotation, or color effect. As the documentation suggests it’s a really the fastest method between in methods which i have been tested.

But the first thing we will notice is the size is matter. As we double copy size we going to need around a double time to process. Data with alpha is slightly increases time. If we merge alphas we get longest time required by this method to process.

setVector() and SetPixels()

Second method we look is setVector. A newer method integrated with Flash Player 10. It uses Vector to to read and write each ARGB pixel in rectangular region.

When we add alpha channels into process it really gets huge increase over required time. I didn’t test with bigger sizes since this method works pixel by pixel. Thus i think process time will increase as we pass bigger data.

Lets continue with similar method SetPixels. Which uses a ByteArray data to fill rectangular area with ARGB values.

As we can see when alpha channels are processed it gets similar with SetVector results. However, data without alpha channel is 300% slower then SetVectors case.

draw()

The most common method to populate DisplayObjects on BitmapDatas is the draw method. Unlike SetVector and SetPixels, by using this method or constructing bitmap representation and using copyPixels method we can transfer DisplayObjects on top of existing BitmapData; without replacing old pixels. Draw method also provides matrix and color transformations, blend modes. Which is very handy options.

Keep in mind, every thing has a cost and if you are using such a rich featured method it can get really slow.

First we going to take a look at regular draw calls with BitmapData.

Compared to other methods its slow. Interesting to note, in some cases smoothing increases performance as it shown at table.

Now lets try with vector graphics and improving it. Draw method by itself a method for copying pixels. Right? What happens if we use something cached by player? Can this improve our draw?

Let me explain what I mean by “cached”. Every DisplayObject inside Flash Player has a property called cacheAsBitmap. If this property is enabled Flash Player constructs a bitmap copy of our DisplayObject and caches until it needs to reconstruct. Reconstruction only happens if Flash player detects any change in contents. Then every time Flash Player’s renderer tries to render this DisplayObject; it uses this cached fast version rather then processing original one again and again. Its very useful if we have complex vector drawing.

And the idea behind this optimization was to try pushing Flash Player to use this cached bitmap data rather then letting Flash Player to reconstruct bitmap representation of this vector graphic every time we call the draw method. Here is what we get after enabling and disabling this option with sprite (a vector graphic we draw in it.).

We can see enabling cache improves drawing speeds up to 300%. Also if we compare this table with BitmapData drawing we can see vector drawing is faster then BitmapData drawing even if cache is disabled. To do this , we created a sprite instance and created a circle (in this case 100×100) by using Graphics API then we enabled cacheAsBitmap property. I added this Sprite into some where off to stage  (negative width or height). The tricky part is we need to wait for Flash Player to construct a bitmap cache for this Sprite before we start drawing it. To do that I waited one frame to be passed. Then we can safely start using this fast drawing method with this Sprite.

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.utils.getTimer;

	public class DrawMethodTest extends Sprite
	{
		private var m_sprite		:Sprite;
		private var m_bitmapData	:BitmapData;
		private var m_frameCount	:uint;

		public function DrawMethodTest()
		{
			stage.align							= StageAlign.TOP_LEFT;
			stage.scaleMode						= StageScaleMode.NO_SCALE;

			m_sprite							= new Sprite();
			m_bitmapData						= new BitmapData(300, 300, true, 0xFFFFFFFF);
			m_frameCount						= 0;

			m_sprite.graphics.beginFill(0xFF0000, 1);
			m_sprite.graphics.drawCircle(20, 20, 20);
			m_sprite.graphics.endFill();

			// Try removing this line to see without cache.
			m_sprite.cacheAsBitmap				= true;

			m_sprite.x							= -m_sprite.width;

			addChild(m_sprite);

			addEventListener(Event.ENTER_FRAME, handleEnterFrameEvent);
		}

		private function handleEnterFrameEvent(_event:Event):void
		{
			m_frameCount++;

			if(m_frameCount == 2)
			{
				removeEventListener(Event.ENTER_FRAME, handleEnterFrameEvent);

				test();
			}
		}

		private function test():void
		{
			var _iterationCount	:uint	= 100000;
			var _startTime		:uint	= getTimer();

			m_bitmapData.lock();

			for(var i:uint = 0; i < _iterationCount; i++)
			{
				m_bitmapData.draw(m_sprite, null, null, null, null, false);
			}

			trace((getTimer() - _startTime) / _iterationCount);

			//0.09856 cache as bitmap False...
			//0.03746 cache as bitmap true...
		}
	}
}

Lets see what happens if we use Bitmaps (not BitmapData’s).

Interesting to not that if we use Bitmaps (not BitmapData) with cache enabled draw calls really gets slower. Also Bitmaps are also draw faster then BitmapDatas.

The Winner, Conclusion

Actually there is no winner. Every method has it own advantages and disadvantages. But for me I quite like copyPixels speed.  I think they still need some improvements.

I hope these info’s are helpful and will improve our bitmap operations.

Demo Swf Info

copyPixels around 10.000 per frame at 40-60 fps.

In this post im going to discuss with you this new exciting tool Yogda.

Yogda is a low level Actionscript byte code editing suite. Developed by veteran developer Korhan Kaya (he also composes great musics  ). Korhan currently at Yogurt technologies; a high tech company located at Istanbul, they also pioneering 3d online game development in Turkey.

Yoga supports all types of compilers that outputs a SWF file, including mxmlc, haxe, air and alchemy.

Its allows us to :

Learn more about AVM2 instructions and experiment them on fly:

While working with editor pane, Yogda allows us to view help on instructions we select; by right clicking into any one of them we can either view bytecode info or Tamarin Code reference.

We can also edit any instruction and alter related parameters.

Edit Byte codes:

Optimize your application: