Using Stage.quality = LOW to boost your performance

I’ve mentioned this in previous tutorials, but I keep forgetting to make a point out of it.

One great performance trick when using gpu renderMode on mobile, is to add this single line of code:
stage.quality = “low”;

On Android and Playbook, this can almost double your framerate without comprimising image quality at all. (Provided you use bitmap’s to render everything :p). On iOS the effects seem to be negligible. you can get a huge boost on older devices such as iPad 1 or 3GS, but the difference on newer devices like the iPad 2 seemed to be negligible from my testing.

Rather than charts I will simply give you two screenshots from my Galaxy Nexus:

The only difference in these two apps is the stage quality. And as you can see, they look identical.

The reason’s this works is because LOW stage quality still allows textFields to be rendered perfectly, and it also respects a bitmap.smoothing = true, or a draw() call with smoothing set to true. So text looks perfect, bitmap’s look perfect that’s almost everything… all that’s left are those pesky vector’s animations.

To render Vector’s with LOW stage quality, there’s an easy trick:

• set stage.quality = HIGH
• cache vector to bitmapData
• set stage.quality = LOW

Like So:

0
1
2
3
4
5
6
7
8
9
10

stage.quality = StageQuality.HIGH;
var asset:Sprite = new LibraryVectorAsset();
var bitmapData:BitmapData = new BitmapData(asset.width, asset.height, false, 0x0);
bitmapData.draw(vectorAsset);
 
//Here's our smoothly rendered vector :)
var cachedVector:Bitmap = new Bitmap();
addChild(cachedVector); 
 
//Lets get that performance boost back
stage.quality = StageQuality.LOW;

This can be expanded upon by passing a matrix to pre-scale the vector to any size you see fit, just make sure to set smoothing=true in your draw() call.