Aral Balkan

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).

Comments

• 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%.

  by Norton Allen on 2006-10-05 18:16:48

• Aral, great example! You changed the example while I was thinking :-) I like the new one much better!

  by Kristin Henry on 2006-10-05 21:12:11

• 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?

  by LEE on 2006-10-06 03:53:58

• Its worth noting that bitmaps will reduce CPU but increase RAM i believe, so as you say its finding that happy balance.

  by Tink on 2006-10-06 09:48:18

• [...] 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. [...]

  by Vector vs Bitmap « saumya on 2006-10-06 11:15:06

• 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.

  by aral on 2006-10-06 11:50:35

• 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/

  by sectore on 2006-10-15 13:56:24

• What..?

  by Bob on 2006-11-16 13:51:18

• 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

  by Stephen Harris on 2006-12-04 04:40:43

• 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.

  by xoc on 2007-02-17 00:57:32

• 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!!

  by Rach on 2007-05-15 10:25:15

• 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.

  by chris on 2009-02-02 18:31:08

• suck my cock and fuck me hard mmmmmmmmmmm

  by Peter Shipman on 2009-11-09 03:47:01

• my ass hurts

  by bum rape on 2009-11-13 12:16:12

• i like to hold my balls and hit my cock with a hammer

  by dave teh bummer on 2009-12-07 13:49:40

• 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.

  by Robby on 2010-01-22 17:25:41

• Thanks for this great post. I'm working on a new game engine so I've been learning all I can about optimizing stuff in Flash and ActionScript 3 so you can get every bit of juice out of it. This is a great example of how there can be a bonus in performance between using Vector and Bitmaps. This will definitely help me make decisions when it comes to dealing with various graphics.

  by Christian Snodgrass on 2010-02-21 08:10:48

• Wow.. Thank you for the sample. I just know that vector animation need more CPU usage..

  by iddev on 2010-05-03 06:12:53

• [...] Vector vs. Bitmap: file-size and performance par Aral Balkan [...]

  by Comparaison de performances entre rendu Vectoriel et Bitmap avec Flash Player (cacheAsBitmap) - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3 on 2010-05-25 17:41:56

• thank for your great presentation. before i read this articles usualy i always used vector image for my game and its make my game glitch and buggy. i dont even know what make my game so high on cpu consume before i read your article here. so thank you so much for make it clear

  by cascus on 2011-04-28 09:47:59

• HI is There any way to draw part og our vector time by time and convert to bitmap? or how can we draw graph with this method

  by nasim on 2011-09-06 13:34:07