Erase specific part of the BitmapData?

Recommended Posts

I'm drawing lots of circles with BitmapDaya and want to erase only some of them, what's my best option? Right now I'm just painting on top of the circles with the background color, but that isn't gonna work for every situation, I need to actually make the alpha 0 again.

I couldn't find a way to erase, say, a specific rectangle, or anything like that. So my options seem to be either erase the pixels individually with setPixel or clear the entire screen and redraw the circles. Both of these would have to be done every frame and it seems like it would be too expensive... any other options?

Share this post

Link to post
Share on other sites

It's there a reason you're not using sprites?

This is the game: Curvatron

I was using sprites to draw the trail, but eventually the number of sprites just got too high as the snakes grew. I could improve this a bit by not painting every frame, but the smoothness of the game is a bit important for me.

With BitmapData, the performance of the game remains the same throughout the session, independent of snake size, even if it's not as good initially.


What I'm doing now is painting lots of circles for the snake path, and then painting over the older circles with the background color to "erase" them. This is limiting the way I present the game (there can only be one color under the snakes), which is why I would like to find a way to actually erase those parts.

Share this post

Link to post
Share on other sites

This was what I recently used in a game for erasing with an erase tool. 


A BitmapData is just wrapping Canvas, so use the context directly, override its globalComposteOperation property to "destination-out" and then "paint" (or possibly draw a shape?) with a color of rgb(0, 0, 0, 1). which is 100% transparency.


This will also delete your colour though.  So you might want to split the active parts from the inactive parts so that erasing shapes does not erase the background.

paint(dst: Phaser.BitmapData, currentX: number, currentY: number, previousX: number, previousY: number): void {            if (previousX === 0 && previousY === 0) {                previousX = currentX;                previousY = currentY;            }            var ctx: CanvasRenderingContext2D = dst.context;            var oldGlobalCompositeOperation: string = ctx.globalCompositeOperation;            ctx.globalCompositeOperation = "destination-out";            ctx.beginPath();            ctx.moveTo(previousX, previousY);            ctx.lineTo(currentX, currentY);            ctx.lineWidth = this.brush.brushSize;            ctx.lineCap = "round";            ctx.strokeStyle = "rbg(0, 0, 0, 1)";            ctx.stroke();            dst.dirty = true;            ctx.globalCompositeOperation = oldGlobalCompositeOperation;        }

Share this post

Link to post
Share on other sites

This ended up being enough for me, didn't need a fancy eraser:

var ctx = bitmapData.context;ctx.clearRect(x, y, width, height);

But I wouldn't have figured it out if clark hadn't hepled. Didn't even know clearRect was a thing and only found out when learning about the canvas stuff. Thanks!

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.