Text Performance

[mcdonasm]

I am building an app which renders polaroid like objects, which contain some text in the bottom blank part of the polaroid, to the screen and then tweening them to a new location on the screen with some scaling and rotation.

I implemented this by making a canvas the size of the screen and then I create 2 image bitmaps, 2 text objects, and a shape object and put them all inside a container. I then tween on that container. My tween FPS is set to 60.

My target hardware is a minimized linux os on a flash memory card with very low specs so performance is a major concern for my design, but I am developing and initially testing on my laptop which is substantially more powerful, and all mentions to poor performance are based on tests on my laptop.

I noticed major performance slow down when I was tweeing just 3 of these objects at a time. I did a lot of testing and deduction and found that it was the text objects that were causing the slow down.

I was able to very smoothly tween 50 containers all with 2 image bitmaps and a shape object inside with no problem, but when trying just 50 text objects, with and without the container, it ground to a halt.

I took out the scale and the text performed much better, though still not as good as the whole polaroid while scaling and rotating, minus text of course. So it appears that scaling text causes a major performance hit.

I was wondering if you knew of this performance hit/had any tips for how to work around it.

[lannymcnie]

You can cache Text instances in order to provide better performance.

[garybronson]

I have this issue. Can you tell me how to cache Text instances?

[lannymcnie]

var bounds = textInstance.getBounds();
textInstance.cache(0,0,bounds.width,bounds,height);

[gskinner]

Ideally, you would also include the x/y of the bounds, and also add a bit of padding since text bounds aren't perfect (especially in the y direction). Something like this:

var bounds = textInstance.getBounds();
textInstance.cache(bounds.x-2, bounds.y-10, bounds.width+4, bounds,height+20);