Wednesday, 14 March 2007

Bitmaps vs. Vectors

Sooner or later, you'll be deciding on the type of GUI you'll be using in your flash application. One important consideration is the usage of vector versus bitmap images. On one hand, vector graphics, due to their mathematically derived functions, are able to be sized without much quality loss. However, when it comes to rendering vector graphics, it does take longer to render.
For bitmaps images, resizing (espeically in Flash) can be an issue since you will lose much of the quality of the picture. However, it is much easier for the program to render and animate.

So what's the trade? Obviously, it is quality and speed of rendering. To a certain degree, you can have the best of both worlds. Consider the following flash creation: It is a animated bullseye moving in a circular clockwise motion. Why a bullseye? Firstly, a circle contains the maximum number of edges per polygon. Moreover, creating a bullseye pattern multiplies the number of edges around 2 fold for each additional ring. The animation is recreated once in bitmap form and vector quality:

Each bullseye is programmed to move in a circular motion 10 times. But adjusting the fps you can calculate the theoretical time it should take for the animation to complete. Likewise, if you use the getTimer() function, you can determine the actual time it takes for the animation to complete. Dividing these two values will yield the Time Ratio, which is the number of times longer it takes to complete the animation. This animation was tested on the SE W300i:

The results are quite significant: using bitmap form, the time ratio is 3.88 whilst for vector form, it is 4.26. From this little experiment, you can see that choice of graphic type can really impact your project especially if it is graphic intensive (flash lite menu).

So what can you do? Yes, for complex, animated objects, bitmaps are better suited. However, before importing them, you can resize them using a photo editing program such that the quality is not lost. Moreover, after importing, you can right click the picture, choose properties and select the quality retained in the picture. By following these steps, your bitmaps can remain sharp and will decrease the load on your cellphone.

For vector objects, it's important to keep things simple. This means removing any unnecessary edges and corners in any shapes. Be sure to use the optimize feature (Ctrl+Alt+Shift+C) to decrease the corners and edges.

Also refrain from using borders around objects because it will double the amount of edges required to be rendered (like the bullseye scenario). Also keep in mind that due to the limited resolution many cellphones, sometimes the quality of the vector won't look much different than the quality of the bitmap!


Christian said...

Thanks a lot, its really useful. I changed the vector graphics to bitmap in my flashlite game and its realy faster.


cellphone screen size list said...

A post like this is very useful. Gives us valuable info and the info is based on data. Thanks for the sharing.