Tip: Clearing A BitmapData’s Contents

I've been using BitmapData lately more and more (I know, I'm very late to the party) and something that I was curious in was how to clear it before I can draw to it again so that the previous frame's contents are not in it. Particularly, I was wondering how I can very simply and quickly erase everything inside of what I just draw into a BitmapData object. I did some quick Google work and found the answer to be VERY simple.

In the code below, I'm just using TweenMax to tween a box diagonally across the screen. If you look closer at the code, however, you will see that I'm doing the tween inside of "container" which is actually never put on the stage. I'm simply using an ENTER_FRAME event to draw the animation into the BitmapData and that is what is being updated on the stage (alternately I could have done this with TweenMax's handy little onUpdate function as well).

Actionscript:
  1. import gs.TweenMax;
  2. import fl.transitions.easing.*;
  3. import flash.display.Bitmap;
  4. import flash.display.BitmapData;
  5.  
  6. var container:Sprite = new Sprite();
  7.  
  8. var b:Box = new Box();
  9. b.x = b.y = 0;
  10. container.addChild(b);
  11.  
  12. var bmd:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight);
  13. var bmp:Bitmap = new Bitmap(bmd);
  14. this.addChild(bmp);
  15.  
  16. TweenMax.to(b, 1.5, {x: 525, y: 375, ease: Regular.easeOut, onComplete: doComplete});
  17.  
  18. function doComplete():void
  19. {
  20.     this.removeEventListener(Event.ENTER_FRAME, drawAnimation);
  21. }
  22.  
  23. this.addEventListener(Event.ENTER_FRAME, drawAnimation);
  24.  
  25. function drawAnimation($evt:Event):void
  26. {
  27.     bmd.fillRect(bmd.rect, 0);
  28.     bmd.draw(container);
  29. }

The key line here is the following in the drawAnimation method:

Actionscript:
  1. bmd.fillRect(bmd.rect, 0);

What this does is basically fill's the area of the BitmapData object with a transparency by using the size of the BitmapData's rectangle to define the area to fill. A VERY handy little trick to know when working with BitmapData. If you take out this line of code you will see that the box is still moving across but leaving "streaks" behind it, also a cool little effect in its own way.

I'm not posting the source file to this simply because the code is all posted above and there is nothing else to the file except a MovieClip in the library with the linkage identifier of "Box" exported for ActionScript. Nothing groundbreaking there.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

29 Comments

I was thinking of more efficient way of clearing area of a BitmapData, let's say you've got a big full-screen Bitmap and you draw some object each frame at a different position. Of course you don't want to clear everything on every frame and that could be achieved by using getColorBoundsRect method to get a rectangle containing you object.

Something like:

var maskColor:uint = 0xFFFFFF;
var color:uint = 0xFF0000;
var redBounds:Rectangle = bmd.getColorBoundsRect(maskColor, color, true);
trace(redBounds);
bmd.fillRect(redBounds, 0);

Just thought it could be a nice tip 🙂

Og2t,
That certainly works but that just clears an area like you stated. I wanted a quick way to clear the whole thing. Essentially they are doing the same thing just with different rectangles.

Whats wrong with bmd.clear() ?

it doesnt exist? 😛

Yes it does.

no, it doesnt... i searched the docs for both as2 and as3, there is no BitmapData.clear() method.

Why are you insisting on arguing everything posted on my blog? I post this stuff to help others, not to argue over what is the proper way or what methods exist and dont. if you don't find it useful, nobody is holding you to reading it, just move along.

For the past two days all you've done is criticized random posts and throughout that came with only one suggestion that was actually viable. other than that, you do not do your research and do not read the classes for the most part, just look at the examples and refer to that in your criticism. If you think I'm being rude, I'm only replying in the temperament that I read your posts in, so if you want to be spoken to like a normal reader, comment like a normal reader. That's all I'm going to say on this whole thing and leave it at that.

Ok sorry, no harm intented, i'll be more quiet now. =)

Maybe it was this one i meant: dispose()


import flash.display.BitmapData;

var myBitmapData:BitmapData = new BitmapData(100, 80, false, 0x00CCCCCC);

var mc:MovieClip = this.createEmptyMovieClip("mc", this.getNextHighestDepth());
mc.attachBitmap(myBitmapData, this.getNextHighestDepth());

mc.onPress = function() {
myBitmapData.dispose();
}

If you copy/paste my code into a new FLA and replace the fillrect line with the dispose line, it doesnt work and throws errors. you would have to re-setup the bitmapdata everytime which is much more processor heavy than simply using the fillrect to clear it and redraw into it.

Hey Matt, just used this little trick on a project I'm working on- worked like a charm. Sadly, it's top secret at the moment but I'll show you once the wraps are off.

nice, glad it helped out.

Yeah! Thank man.
You helped me a lot

A very very great way! Thanks man 🙂

Frankly, I guessed there would be some "clear()" method and I even took granted that "dispose" is for this. But after getting more and more disappointed, finally I found all I need is this post 🙂

also wanted say thank you, I had been using an empty Bmd which I would copyPixel to the target Bmd.

This method is much more elegant.

It's shame though that clear(); doesn't exist.

I was able to clear a bitmapdata object using fillRect alone... the tweening doesn't seem to be necessary. 😉

@Morgan: the tweening is just some stuff I was doing to demonstrate the object in the bitmapdata before clearing, the only line, like you said, to clear is the fillRect line as outlined in the second code snippet.

Hey Matt,

This is coming in handy on my current project. Thanks for posting it!

Hi,
I am exporting the entire canvas as snapshot to an image. I tried hiding a button from the imgage using myButton.visible = false;
then, taking the snapshot as
---var bd:BitmapData = new BitmapData(ctrlHeatMapDataGrid.width,ctrlHeatMapDataGrid.height);
---bd.draw(ctrlHeatMapDataGrid);
and then displaying the button back so that no change is noticed on the screen.
This works fine.
But when I tried to hide the scrollbars from a datagrid (making the horizontal and vertical scoll policy as off), and then taking a snapshot, the snapshot is taken with the scrollbars on.
It seems that the earlier image is cached somewhere becuase of which the stale image is getting captured in the bitmapdata.
I tried it with the height and width of the datagrid also, but the result is same--old image.
Please help!!

Excellent post. Helped me a lot, thanks!

Hello! Thanks a lot it helped me make a level editor.

Thanks for writing this up. I came up with a different one because I needed the bitmapData to have transparency. I simply keep an empty Sprite around that I can copy from:

-----
surface = new Sprite();
surface.graphics.beginFill(0xffffff,0);
surface.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
surface.graphics.endFill();
-----

Then to clear the BitmapData:

bmd.draw(surface);

oh dear, I think I commented too soon. This doesn't quite seem to work.

Interestingly, floorFill does not do the same thing... which doesn't make a lot of sense and is too bad because providing an x and y coord is a little more convenient than a Rectangle.

Owe you one, mate. Thanks.

the draw() method is very expensive to call.

you can do this:

myBMD.fillRect(myBMD.rect,0x000000);

but even that will cost you...

this article contains some really good information and code for speeding up your projects: http://unitzeroone.com/blog/2011/01/16/the-particle-sessions-part-one-is-this-it/

Grande!!!, me salvaste muchas gracias por el tip

Grad, Tankyou . 🙂

Thanks a lot! I'm starting to work with Starling framework right now and your tip helped me to solve the lack of Graphics class!

thanks 🙂

Very useful.. thanks..

Leave a comment

(required)

(required)