There have been some questions as to why some of the graphics in Bowmaster Winter Storm are more detailed than they need to be (see this forum post). This prompted me to share my findings on Flash’s automagical ability to optimize graphics.
I’ve done various graphics performance tests and experiments over the years but haven’t really shared my observations. One of the tests was to determine how much the Flash player optimizes graphics on its own without the use of developer code (e.g. cachAsBitmap) or graphical modifications (e.g. Modify >> Shape >> optimize).
In this demo the frames per second is displayed to indicate performance. The native flash fps setting published for this animation is 35 so the fps reading will never go above this number.
The animations displayed use both lines (red) and fills (black) and have lots of point data (more detail than you can see at the default zoom level). The animations use both shape and motion tweens. The motion tweens change the scale, rotation and color properties. No code or graphics techniques have been used to attempt to optimize these animations.
What this experiment will demonstrate is Flash’s ability to optimize graphical performance without the use of any additional developer tricks.
These experiments require that you perform the steps mentioned in order to see the expect results. Specific results will vary depending on your CPU speed but you should still be able to notice trends.
Experiment 0: Observer Animation As-Is
Expected Results: FPS should be below 35
Conclusion: The graphics are too much for the CPU to process at the optimal speed.
Experiment 1: Off Screen Performance
Steps: click-hold-drag animation off screen
Expected Results: The FPS should jump up to 35
Conclusion: Flash does not use up CPU to render graphics that are off screen.
Experiment 2: Scaling and Performance
Steps: Click “reset” button. Scroll the mouse wheel to change the size of the animations. Expected Results: When the animation is made really small the performance increases. When the animation is made really big, the performance my also increase as other animations no longer fit on the page (similar to Experiment 1) or decrease as more detail is visible for the animation that is still on the page.
Conclusion: Flash optimizes graphical processing according to the size of the graphics. Even if the graphics are highly detailed natively, if they are made really small then Flash is able to use less CPU.
Experiment 3: Adjusting the Built-In Quality Settings
Steps: Click “reset” button. Click on the quality toggle button labeled “high” by default.
Expected Results: The performance will increase significantly (without moving or scaling the animation) as the quality setting is decreased.
Conclusion: Flash is able to reduce the processing load of graphics by reducing the quality of the graphics. What is significant about this is that the quality settings can be changed on the fly with a simple line of code. In other words, it is very easy for a developer to make a global change to graphics to improve performance without having to manually change the native graphics (which can be a time consuming process).
We can see that Flash does a lot to optimize graphics on its own. Flash seems to perform some sort of culling to reduce CPU load by not rendering graphics that are off screen. Flash also seems to optimize graphics that are still on screen but have been scaled down in size. It’s as if the extra detail that exists in the native graphics that is too small to see is not being processed by the CPU. And finally, we see that by changing Flash’s built in quality settings we can drastically change both the performance and graphical quality of a Flash animation.
Every project is different and it is no trivial task balancing quality and performance. If the project is light on animation but heavy on graphics then performance can be sacrificed to improve graphical quality. But with game development users want both. Game developers must determine how to spend their time (a limited resource) and understanding Flash’s built in graphical optimization functionality is essential for determining how to prioritize application development efforts.