There is a sample Flash application (SWF) here that demonstrates the difference in performance between a complex vector shape and a bitmap in Flash. You need the Flash Player to view this video.
I was witness to a conversation today where a friend of mine was debating with members of a development team who were religiously maintaining that using complex vectors could not possibly slow down a Flash application. It made me realize (yet again) that there is still a lot of confusion in the development community on certain core concepts. Going forward, I'm going to try and document some of these in my blog posts, starting with the differences between vectors and bitmaps.
As you know, vector graphics comprise mathematical representations of lines, fills, colors, and gradients, whereas bitmap graphics are a pixel-by-pixel representation of the color, and optionally, alpha channel information in a visual element.
The greatest advantage that vectors have over bitmaps is that they can be scaled (both up and down) and translated without losing any fidelity. After all, you're only performing basic addition, multiplication and matrix operations on mathematical formulae. Flash is regularly spoken of as a "vector animation tool" although it can (and does) handle bitmaps really well too. (This wasn't always the case and it took a long time to get pixel-perfect bitmap rendering in Flash but we're finally there!)
Bitmaps, on the other hand, also have several advantages over vectors. Vectors, especially complex ones, can be both larger in filesize (and thus bandwidth requirements) and slower in performance than the same visual element rendered as a bitmap. This is the primary reason that Macromedia introduced the cacheAsBitmap property of the MovieClip class in Flash 8. Setting the cacheAsBitmap property to true makes Flash take a bitmap snapshot of any visual information in a MovieClip and use that in place of the original contents. Of course, the original vector version of the MovieClip has to be rendered at least once before you can cache it as a bitmap so this is not a solution for loading in very complex vector graphics as you will get a performance hit the first time it is rendered (you will notice better performance if you render the original graphic as a bitmap and load that in instead.)
The sample SWF, above, demonstrates the performance difference between a somewhat complex vector graphic (a square formed of 1,000 separate lines) and a bitmap snapshot of the same object. The difference in performance between the two is substantial (going from 3-4fps to over 32fps on my machine.)
The choice of whether to use bitmap or vector graphics will vary by project requirements and most applications end up using a combination of the two. Knowing when to use one and when to use the other is important as it can have a huge impact on the performance of your applications.
Download the source for the sample (.zip; 65K).
The Vector vs. Bitmap: file-size and performance article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.
I ran the test on my system and got the same order of speedup, but I also ran task manager, and the bitmap version, even at 32fps, consumes almost no CPU while the vector version takes 92%.
Aral, great example! You changed the example while I was thinking :-) I like the new one much better!
Great example ! I’m surprised anyone thought different, but without seeing it for oneself, how would you know? Do you know of any good tutorials on using the Bitmap data class in AS 2?
Its worth noting that bitmaps will reduce CPU but increase RAM i believe, so as you say its finding that happy balance.
[...] Here is a nice article about whether to use Vector or Bitmap inside Flash. It is really a tricky thing when working with animations whether its a scripted one or manual.But if we know what to do when, then our flash movie will rock. [...]
Hi Tink,
Good point. Testing the above example in FireFox (OS X optimized Deer Park), FireFox consumes 68.20MB of real memory and 464.02MB of virtual memory when the object is a vector and 68.24MB of real memory and 464.06MB of virtual memory when the object is in bitmap mode.
Aral,
thanks for your nice performance test. I have used your example for different tests with 1.000 dynamic text fields and they’ve been the same awesome results (from 1 fps to 33fps on my powerbook – OSX, FLP 9.0.16).
But don’t turn on the bitmap chaching for movieclips they’re constantly rotating, changing their sizes or contents because in this cases Flash redraws the bitmap every time and reduces this nice effect on the performance: http://www.adobe.com/devnet/flash/articles/bitmap_caching_03.html ;-)
Best,
sectore
–
http://www.websector.de/
What..?
I make flash games and spend more time than I’d like trying to improve framerates when running in a browser.
I made a car racing game, where the car stays in the middle of the screen and the map moves around it. I had to make the map a bitmap in order to get any decent framerate.
However, bitmaps aren’t all joy and wonder. If you scale or rotate the bitmap object in flash, it resamples it. Needless to say, this makes them render even slower than vector objects.
What would be cool to see is another example swf like your first one, that demonstrates framerates when the object is scaled and/or rotated.
Cheers!
Stephen
Thanks for the example. Its very useful and succinct. I knew the speedup would be big, but I didn’t realise it would be that dramatic. It should be noted though, that the performance advantage is greatly reduced by increasing the bitmap size and/or simplifying the vector version.
Thank you so much for this information. It has helped me a lot with my assignment. I found your site on Google! Keep the knowledge coming!!
Surprisingly for me, the frame rate didn’t change much, but when I viewed the CPU usage in Activity Monitor, I spiked big time going to the vector.
suck my cock and fuck me hard mmmmmmmmmmm
my ass hurts
i like to hold my balls and hit my cock with a hammer
Wow, this was a nice test. I was never aware that bitmaps were such better performance wise than vectors. Vectors took around 55% cpu usage on my machine, while the bitmap took around 6%. HUGE increase.