Recently at FITC Amsterdam I presented a session Tips and Tricks for Mobile Development. The part of the presentation that generated the most interest was about optimization tips. So I thought I’d post some of my findings here.
Redrawing Takes Time
To improve rendering, it’s a good idea to see what Flash is redrawing when your project plays. For instance, if one vector shape even slightly overlaps another one then both are redrawn. Luckily you can see the redraw regions in Flash Pro by testing the SWF and selecting View > Show Redraw Regions. Or you can do it using ActionScript and even change the color like I did to make it easier to see: flash.profiler.showRedrawRegions (true,0x33ff00);
Out of Site is Not Out of Mind
One technique developers sometimes use is placing graphics off the stage until they needed. If the graphics are off stage then they won’t be rendered but they’re still part of the display list. So Flash checks each frame to see if it’s still off the stage. This does take CPU cycles so it can be just best to remove it alltogether.
It’s about Performance, not Stage Quality
When dealing with mobile screens, you can get away with less image quality, especially if it increases performance. One technique is to change the StageQuality. You’d be surprised at how dropping the quality helps performance and you really don’t notice the difference:
StageQuality.LOW:Does not use anti-aliasing.StageQuality.MEDIUM:Applies some anti-aliasing but does not smooth scaled bitmaps.StageQuality.HIGH:Favors appearance over playback speed and always uses anti-aliasing. If the SWF file does not contain animation, scaled bitmaps are smoothed; if the SWF file contains animation, bitmaps are not smoothed.StageQuality.BEST:Provides the best display quality and does not consider playback speed. All output is anti-aliased and scaled bitmaps are always smoothed. This setting is not supported in AIR on mobile devices.
Flash Pro you can set text rendering to Anti-Alias for Readability. This setting maintains perfect quality of your (anti-aliased) text regardless of which Stage quality setting you use.
Note: On mobile devices, setting the quality to HIGH often does not make a noticeable difference, because mobile screens usually have a higher dpi. Desktops are about 100 dpi, while mobile screens are closer to 200 dpi, which means the “subpixel size” is roughly the same. The dpi can vary depending on the device.
CPU vs. GPU Rendering
In the past, graphics were rendered through the CPU only. And even the Flash Player on the desktop still uses the CPU to do software rendering. Software rendering is used because drivers vary widely on the desktop, and drivers can accentuate rendering differences. Instead, consider using GPU to do rendering. Using the GPU optimizes the rendering of filters, bitmaps, video, and text. In Flash Player 10.1, the GPU is used to calculate the graphics, which can improve rendering speed significantly. It also reduces the CPU workload, which is helpful on devices with limited resources, such as mobile devices.
Using GPU Rendering
To enable GPU acceleration in an AIR application include <renderMode>gpu</renderMode> in the application descriptor. Or, in Flash Pro, select GPU as the render mode in the Publish settings. Additional GPU rendering notes:
- In GPU mode, there is no fallback to CPU rendering. (if a bitmap can’t be rendered for some reason, it won’t show up)
- The following blend modes are not supported: layer, alpha, erase, overlay, hardlight, lighten, and darken.
- Filters are not supported.
- Many GPU units have a maximum texture size of 1024×1024. In ActionScript, this translates to the maximum final rendered size of a display object after all transformations.
- Adobe does not recommend the use of GPU rendering mode in AIR applications that play video.
Vector or Bitmap?
When it comes to graphics, devices have a harder time rendering complex vector data over displaying a bitmap – which is done by the CPU. So it makes sense to use bitmaps over graphics. Since bitmaps can be rendered by the GPU. But there are some caviats:
Vector Optmiziation – if it is simple vector shapes then go ahead and keep it vector, as the device won’t have a tough time rendering it. If you use any filters in Flash then the Flash Player actually converts the vector to bitmap and actually makes two bitmaps. One for the graphic and one for the filter (drop shadow etc.). Also if you’re using any Z perspective then Flash Player makes a bitmap out of it as well. Some tips on converting vectors to bitmaps:
myMovieClip.z = 0;Makes a bitmap- Select the graphic and select: File > Export > Image. Then reimport the bitmap in place of the vector.
myMovieClip.cacheAsBitmap = true;Use cacheAsBitmap to create a bitmap of vector content when you are JUST changing its position. If you scale, skew or rotate then it will actually hurt performance. Since each change will require Flash to make a new bitmap.myMovieClip.cacheAsBitmapMatrix = new Matrix();Use this in combination with cacheAsBitmap and Flash will make only one bitmap at runtime that can be moved, scaled, scewed and rotated. Keep in mind that if Flash makes a bitmap of an object and then you scale it up then it might get pixelated as it’s really a bitmap that’s being scaled up.
Bitmap Optimization – If it’s a complex vector shape then you’re better off converting it to a bitmap using one of the methods above. But keep in mind that the more bitmaps you create the larger the file size will be (up to 3x larger). As for the type of bitmap, I’ve done some test and I would reccomend the following:
- PNG-24 bit – for photos or graphics that have transparency. But only use transparency when you need it. For instance, you can mask shapes in Flash Player which might be a better way to go. Or if your image is on a solid background then use that color as the background for your graphic.
- PNG-8 bit – for photos that don’t need transparency.
The takeaway is to use vector if the shape isn’t that complex. Use PNG-24 bit when you need transparency, and PNG-8 bit when you don’t. In the future I plan on adding more performance tips and optimization tricks, especially when it comes to ActionScript.
