Erase specific part of the BitmapData?

[Raicuparta]

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?

[gingerbeardman]

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

[Raicuparta]

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.

[clark]

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;        }

[Raicuparta]

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!