Flash rendering performance and optimization
During the creation of our flash game (carefully - contact!), At some point we ran into a performance problem.
FPS began to fall even on very productive systems ... The problem was typical of all flash games - a large number of vector graphics. As you know, vector graphics are a very resource-intensive thing. Indeed, when rendering, the player has to re-calculate a variety of tricky curves, etc., which clearly loses in speed with raster graphics. At what - loses an order of magnitude (or even several orders of magnitude).
According to the good old tradition, Google was taken in the teeth and the search for a solution began ...
The first thing you stumble upon is the “cache as bitmap”. Let's first deal with this option.
You must enable this option for each clip separately. This is done either in the Flash itself - by selecting a clip in the "Properties" panel by setting the checkbox of the same name. Or dynamically - in AS3 code by setting MovieClip's “cacheAsBitmap” property to “true”.
By enabling this mode, we tell the flash to save our vector MovieClip in memory as a raster image and then to display it if necessary - display it already as a raster, which gives a noticeable performance boost.
The question arises - so why is this method not enabled by default?
Everything is simple here. The fact is that if the cached clip changes (animated), or if you want to rotate / scale / change the transparency - for this, the flash will again have to use the vector "source" of the clip to cache the already updated image. Thus, if we have a clip that changes every frame, then the player will have to constantly re-cache it, which, on the contrary, will lead to a drop in performance.
In short, “cache as bitmap” can be safely enabled for all static movie clips. If, for example, you have a background in the game, which consists of a static substrate and animated clips (for example, moving plants superimposed on a static forest landscape), then you should separate the static part into a separate movie and set caching for it.
So, what is good / bad in this method:
+ Turning the method on to disgrace is simple. In addition, the user will not detect any difference in viewing (micro-nuances can occur only when using non-integer coordinates of the clip).
+ The method is ideal for static movie clips of any complexity (with any number of gradients, curves, etc.)
- The method should not be used for animated, rotating, clips, as well as clips with changing transparency. Naturally, you will not get any graphic artifacts - everything will still be beautiful. But on the contrary, you can lose productivity.
- The method eats up a certain amount of memory (well, without it - nowhere ... the player must store the rasterized image somewhere).
- According to some developers, with large clips (10,000 x 10,000), slowdowns can still occur.
Solution for animated clips.
It turns out that there is also a solution for animated clips. The essence of this solution is to take an animated clip and rasterize all its frames in advance and store them as bitmapData. And then to operate with a clip-raster copy of the original.
Say it's hard? In fact, a bicycle has already been invented before us. You can use the ready-made solution posted on the Touch My Pixel blog . There is also an online example that will allow you to evaluate the performance of the method.
The difference in using and not using animation caching is very significant:
Pros and cons of this method:
+ The method is suitable for animated clips and allows you to significantly increase productivity.
- The decision is not “out of the box”, i.e. will have to "screw" third-party code.
- The method requires preliminary rendering of the entire animation (i.e. a slight delay before starting the flash drive).
Our graphics are something like this:
(the monster in the center was created by the user, so don’t beat for his “beauty” :)
As a result of the inclusion of the standard “cache as bitmap” for statics, FPS, which dropped to 12, rose to the standard 30.
Now we are thinking about how to correctly apply caching for animated graphics.
I hope this article helps you improve the performance of your flash drives!
Useful materials on the topic:
- An article by Anton Karlov about animation performance - experiments with the above class for rasterizing animated clips are just described here
- Why cacheAsBitmap is bad is another article about cacheAsBitmap and hand rasterization.