Introducing Banana Slice by Thibault Imbert

Banana Slice

While I was writing the Bitmap Programming chapter of my book, I wanted to write something about vectors rasterizing.

As you may know, the cacheAsBitmap property introduced in the Flash Player 8 and available in AS3 through the DisplayObject.cacheAsBitmap property must be used when DisplayObjects are being moved ONLY. If you apply any other transformation, the bitmap version of the DisplayObject gets updated in memory for each transformation made , this results in an quite high CPU occupancy rate.

Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches it automatically and creates 2 bitmaps in memory : One to work with pixels and another one to generate the filtered result. This time, for each transformation made to the DisplayObject, the two bitmaps previously generated are updated in memory. This time, your CPU occupancy rate is gonna go crazy.

To see traditional animations with MovieClip's and filters check this page and have a look at you CPU occupancy.

Now, I would like to introduce the "Banana Slice" component.

Banana Slice, is a tiny component that you can drag and drop and assign a specific MovieClip. At runtime, the component rasterizes the whole MovieClip and replaces its content by an animated bitmap. Of course, the MovieClip methods can still be called on it, everything is totally transparent (especially cool for non-coders).

Banana Slice Component

By using this technique, you get better performance, each MovieClip can have its own frame rate as I am using an internal Timer object to play frames. Another cool thing is that you can set you Stage.quality to StageQuality.LOW once bitmap frames are generated, you will still get an anti-alias animation.

The SWF below is using the Banana Slice component with a single MovieClip and a few filters, your CPU occupancy should be ok now :)

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.

Sources will be posted very soon, as soon as I get more time to clean some parts of the code ;)

I'd like to thank Mama from yamago for the original idea ;)

Comments (48)

  1. daniel wrote::

    Thibault, you make us look good and bad all at the same time! Fantastic work, cant wait to get my hands on it.

    Friday, December 14, 2007 at 4:42 am #
  2. Freddy wrote::

    wow!!

    Friday, December 14, 2007 at 4:50 am #
  3. Gabriel Laet wrote::

    Awesome! Very useful.

    Friday, December 14, 2007 at 5:55 am #
  4. katopz wrote::

    i’m start crying now, (happy indeed) ;D thx!

    Friday, December 14, 2007 at 6:12 am #
  5. Joa Ebert wrote::

    Haha, very nice dude. Who came up with the name for that component?

    Friday, December 14, 2007 at 12:26 pm #
  6. Thibault Imbert wrote::

    haha :)

    First, I wanted to call it “Salami Slice”, but that’a design pattern name so I gave up the idea of Salami :)

    Finally I choosed the Banana, that reminds me Mario Kart ;)

    Dude, when do I bring the macarons ? :)

    Friday, December 14, 2007 at 1:40 pm #
  7. Paul Ferrie wrote::

    Oh man this is going to make so much more interest for the flash game developer.
    Excellent work!

    Friday, December 14, 2007 at 10:47 pm #
  8. baptiste wrote::

    salami was a good idea too .. ;-)
    has you developped an AS3 class without any visual/graphics component/ and with the same property and method ?
    i’ve just realized that the “dead time” of your book was in februar and not in december, i though it was december, mistake ?
    Goog job !!

    Saturday, December 15, 2007 at 12:30 am #
  9. nicoptere wrote::

    just excellent !
    one more reason to buy your book ^^

    Saturday, December 15, 2007 at 3:46 am #
  10. Thibault Imbert wrote::

    Hi baptiste,

    Classes will be available if you want to rasterize your animations without the component ;)

    Concerning the book, It was supposed to be released in end December/January but I haven’t finished yet. It will be released in beggining of February ;)

    Thibault

    Hi nicoptere,

    hehe thank you !

    We will make another dinner when the book will be out ;)

    Thibault

    Saturday, December 15, 2007 at 4:03 pm #
  11. FS wrote::

    Yeah it’s cool… but the more interesting thing of this post is that we gonna have a dinner !

    Saturday, December 15, 2007 at 4:35 pm #
  12. christophe wrote::

    but where is the sausage ?

    Monday, December 17, 2007 at 5:27 pm #
  13. Thibault Imbert wrote::

    ahaha, I gave up the sausage idea finally ;)

    Tuesday, December 18, 2007 at 12:40 am #
  14. Pleh wrote::

    I had a similar idea recently but aimed more towards particle systems, the particle system would run through once, but render each frame to a bitmapdata object and then I could reuse the generated animation at a much lower cpu cost.

    Tuesday, December 18, 2007 at 4:25 pm #
  15. Rezmason wrote::

    Neato! I really like the idea of dropping functionality into a MovieClip this way.

    Wednesday, December 19, 2007 at 7:20 pm #
  16. Thomas Rudin wrote::

    Nice one. I just used a similar technique to speed up flv playback in a flash game. I gave up on the whole idea of using bitmaps as a buffer for other graphics as it was too memory consuming (especially in FF, IE shows some different behaviour). Do you have any hints on bitmaps and memory issues?

    Thursday, December 20, 2007 at 6:39 pm #
  17. Bryian wrote::

    I’m your big fans and wish to bug one copy of your book, but I cant read french thus..

    Friday, December 21, 2007 at 8:16 am #
  18. Thibault Imbert wrote::

    Hi Bryian,

    I’d love to see it translated in English, let’s ask O’Reilly aha :)

    kind regards,

    Thibault

    Tuesday, January 8, 2008 at 3:16 am #
  19. Mikkel wrote::

    Great project and a super tool for anybody making games.
    I can’t wait for you to post the source. Do you have an idea about when you’ll post the code?

    Keep up the fantastic work!

    Monday, January 21, 2008 at 10:00 am #
  20. Thibault Imbert wrote::

    Hi Mikkel,

    I will post the sources in a few weeks, I am quite busy with the book right now ;)

    stay tuned :)

    Monday, January 21, 2008 at 11:18 am #
  21. Pleh wrote::

    I will happily learn french just so I can read your book :)

    Monday, January 28, 2008 at 8:47 pm #
  22. Thibault Imbert wrote::

    Haha, very nice Pleh :)

    Tuesday, January 29, 2008 at 1:52 am #
  23. Chris Anderson wrote::

    Hey, wondering if we might be able to get a hold of this component. If you like we can pay you for your effort. Seems like only thing left was code cleanup, but if this project is solid other than that we should be fine. Thanks for your time and help.

    Friday, February 8, 2008 at 6:03 pm #
  24. Thibault Imbert wrote::

    Hi Chris,

    I will post it soon, I just want it to be nicely optimized.

    You don’t have to pay ;) I will send you an email when it’s posted or ready :)

    regards,

    Thibault

    Saturday, February 9, 2008 at 2:40 am #
  25. Chris Anderson wrote::

    Very cool, can’t wait to try it out.

    Saturday, February 9, 2008 at 6:10 am #
  26. Michel Wacker wrote::

    Hi Thibault,
    can’t wait to get a glimpse of the code ever since I read this post. I’d love to use it in a game project or two and analyse the difference in performance. Just trying to push it a little here: Hurry!! :)
    Thanks a lot for your time and sharing this (soon)!

    michel

    Friday, February 15, 2008 at 10:49 am #
  27. Matt wrote::

    This looks great. I’m a flash animator and this would be a great tool for speeding up character animations with lots of motion. Can’t wait to try it out!

    Monday, February 18, 2008 at 8:33 pm #
  28. Corey wrote::

    I’m really excited to see how you did this and what effect it has on my projects–really looking forward to it! Please write a new post when you do so that I don’t have to keep checking this page ;) Cheers!

    Sunday, March 9, 2008 at 7:58 am #
  29. Mikkel wrote::

    Has this project died with your new job or is it still – to be reliesed soon?
    regards
    /Mikkel

    Wednesday, March 12, 2008 at 10:40 am #
  30. Thibault Imbert wrote::

    Hi Mikkel,

    no it’s not dead for sure, I am just very busy with the book right now.

    I will get back to it in a few weeks and will post an update and let you know :)

    kind regards

    Wednesday, March 12, 2008 at 1:47 pm #
  31. Jacob Wright wrote::

    Looks good, so do you take a snapshot of each frame and loop through that using BitmapData.draw()? Very cool idea.

    After running for a few minutes my frames/second drop from ~24 to ~8 in the animation using banana-slice. And I’ve got a fast machine. Perhaps some optimization is needed.

    Thursday, March 13, 2008 at 7:37 pm #
  32. Thibault Imbert wrote::

    Hi Jacob,

    Thanks for the information, I will definitely double check that and optimize it ;)

    kind regards

    Sunday, March 16, 2008 at 11:27 pm #
  33. JP wrote::

    Hey, this is definitely something that would be useful for game programming. Hopefuly you can find the time to clean the sources.
    Bravo et félicitations ;)

    Tuesday, March 18, 2008 at 10:33 pm #
  34. sanyin wrote::

    Can you send me sources when available?
    Thanks!

    Wednesday, March 19, 2008 at 4:37 am #
  35. Matt wrote::

    Any word on when you may be able to publish this component. I’ve got lots of frame by frame animations that are starting to chug and I’d love to see how much banana slicing them would speed em up.

    Thanks

    Monday, April 28, 2008 at 6:25 am #
  36. I hadn’t seen this before, but I’ve recently written a similar system for caching animations. It’s not a simple drag & drop component like yours, and I’m sure yours is much better, but while we’re waiting for the release of your component, here’s AnimationSlicer http://blog.vandenoostende.com/?p=47

    Thursday, May 15, 2008 at 8:38 pm #
  37. Macaca wrote::

    You gotta be careful if you deploy something like this in a big production: once you need to slice more then a few animations you’ll need to queue your slicing over multiple frames or your Flash Player will choke terribly. This is because draw() is really slow. Also keep in mind that you’l need only one bitmapData of each frame of an animation for ALL the instances you will show (set each Bitmap’s bitmapData-property with it). Don’t forget to resize the bitmapData’s to the smallest size possible (with getBounds()), saves a ton of transparent pixels.

    Tuesday, August 19, 2008 at 8:40 pm #
  38. boy wrote::

    Wonderful

    Thursday, August 28, 2008 at 7:56 am #
  39. le gars rasoir wrote::

    hey Thibault, still no source ?!

    Tuesday, September 30, 2008 at 8:50 pm #
  40. kido wrote::

    I just wanna say WOW

    Thursday, October 9, 2008 at 9:27 am #
  41. Ricardo wrote::

    Man, I just need this beautiful class !!! Tell us when and how :)

    Tuesday, February 17, 2009 at 4:09 pm #
  42. Marek Brun wrote::

    Hey there all folks who waiting for bananas, check out my rasterizer – http://blog.minim.pl/?p=181

    Saturday, February 28, 2009 at 10:07 pm #
  43. lorddelta wrote::

    Did the source ever get published for this? Or even a published preview?

    Saturday, June 20, 2009 at 3:45 am #
  44. Boris wrote::

    Waiting for the Godot…

    Monday, November 2, 2009 at 7:55 pm #
  45. ste wrote::

    So where can i download it????

    Wednesday, May 12, 2010 at 3:19 pm #
  46. dhemitus wrote::

    …and where is the source ? :-)

    Wednesday, April 27, 2011 at 1:57 pm #
  47. Chad Spicer wrote::

    DO you think you are going to release the component? Or has anyone seen another code set like this?

    Sunday, May 8, 2011 at 4:18 am #
  48. Maru wrote::

    @Chad Spicer, @dhemitus
    You should check out my AnimatedBitmap & AnimatedBitmapData classes, inspired by Banana Slice here > http://j.mp/fMDR0k (in French), sources > http://j.mp/fEkXae and docs (in English) > http://www.flashxpress.net/wp-content/animatedBitmap/doc/

    Thursday, June 9, 2011 at 7:51 am #

Trackbacks/Pingbacks (8)

  1. STARNUT.com » Blog Archive » Fruity inspirations on Tuesday, March 11, 2008 at 9:18 pm

    [...] few weeks ago, I stumbled upon Thibault Imbert’s Banana Slice Component and since I’m always on the lookout for new techniques to improve the performance of my [...]

     
  2. Cavalcade Games » Blog Archive » Banana Slice Component on Monday, August 11, 2008 at 4:11 am

    [...] Read the whole article Posted in Development | Leave a Comment [...]

     
  3. » MovieClip rasterizer on Saturday, February 28, 2009 at 9:57 pm

    [...] Imbert introduced some time ago a Banana Slice – a very neat idea of drastically reduce animations cpu occupancy by rasterizing (vectors to [...]

     
  4. Native Rasterizer (bitmap slicing) and more - ByteArray.org on Wednesday, August 11, 2010 at 6:30 pm

    [...] you remember Banana Slice ? I already blogged about native rasterizing (bitmap slicing) in the Flash Player (here), but I [...]

     
  5. Why cacheAsBitmap is bad! - ByteArray.org on Wednesday, August 11, 2010 at 6:38 pm

    [...] improve the rendering performance of any animation. This would be in fact the same behavior as the Banana Slice component I talked [...]

     
  6. [...] fact, Thibault Imbert explained it clearly in his article : « Worse than that, if you apply a filter to a DisplayObject, the Flash Player caches [...]

     
  7. Why cacheAsBitmap is bad « Test Online on Wednesday, November 17, 2010 at 8:05 am

    [...] improve the rendering performance of any animation. This would be in fact the same behavior as the Banana Slice component I talked [...]

     
  8. [...] merci à Thibault et son composant Banana Slice pour l’inspiration : http://www.bytearray.org/?p=117 Tweet → HD Video Accélérée avec la classe StageVideo du Player [...]