By Kshitiz Gupta
7 June 2012
In this post, I will explain a little about how Cache As Bitmap can impact Anti Aliasing of your content.
Let’s start with a definition. To put it very simply, I will say that anti aliasing is what gives smooth look to your content. Anti Aliasing is a way to make content look smoother by drawing certain pixels to avoid jaggedness.
For iOS applications, there are two render modes – cpu and gpu. Let us look at what all can happen with this seemingly harmless change. For all further purpose please assume that we have set the render mode as gpu within application descriptor.
Before I start, look at the two ellipses in the diagram. If you stare hard enough you will agree with me that the left image loses out when compared to the one on right in terms of quality. The right one looks like a smoother version of the left one. If you had difficulty defining anti aliasing then this image should help clear the definition. The right one is anti aliased better or is smoother.
The left image is a sprite that has an ellipse
var s:Sprite=new Sprite(); var circle:Sprite=new Sprite(); circle.graphics.beginFill(0x0000ff); circle.graphics.drawEllipse(0,0,325,1020) circle.graphics.endFill(); s.addChild(circle);s.cacheAsBitmap=true addChild(s)
Let’s leave out the right one for right now. Let us take out that cacheAsBitmap=true and see how things get rendered. I will revisit the content on the right again keeping it same. Lets just look at the content when cacheAsBitmap=true is taken out.
Again convince yourself that the left image is much better than what it was earlier and now looks better. The right image is still the same. The only different between the code is that the cacheAsBitmap statement has been removed. Now I will try to explain the difference and what is being drawn on the right side.
The right ellipse is a Bitmap that has been drawn using the bitmapdata.draw call and then this bitmapdata has been used in a Bitmap to be displayed.
Now here is the why part. Cache As Bitmap renders to an offscreen texture. Certain gpus do not allow anti aliasing for off screen textures. Behind the scenes, within gpu rendermode CAB uses open gles calls to render to an offscreen texture. So any vectors that have CAB set to true and renderMode as gpu may have some jaggedness around the edges.
Also different gpus may have different implementation for anti aliasing which can cause same vector content to get anti aliased differently on different devices. This will cause your content to look a little different across different devices.
The workaround to above issues (if the jaggedness is an issue) is to use the call Bitmapdata.draw call. Bitmapdata.draw always uses cpu to make the bitmap irrespective of the render mode specified. Use bitmapdata.draw to create a bitmap from your vector content. Then proceed to add this bitmap to the display list. This way you get the consistency of cpu mode and fast rendering of the gpu mode. Obviously there will be a cost associated with the bitmapdata.draw call but then you can have these bitmaps cached initially in the life cycle of your application.