Thursday, 25 March 2021

How to reproduce this effect of blend mode on canvas?

I'm moving from Flash to Canvas using OpenFL and I'm trying to dig the ground with an image of a crater in Canvas using blend modes but the effect is not the same as in Flash.

There is the code:

const crater = new Bitmap(bmpDataCrater);
const craterBrink_bmp = new Bitmap(bmpDataCraterBrink)

const back = new Bitmap(bmpDataBack)
const ground = new Bitmap(bmpDataMap)

const center = new Point(450,500)

var matrix = new Matrix(1, 0, 0, 1, center.x, center.y);

matrix.tx -= crater.width / 2;
matrix.ty -= crater.height / 2;
ground.bitmapData.draw(crater, matrix, null, BlendMode.ERASE);

const craterBrink = craterBrink_bmp.bitmapData;

matrix.tx = -center.x + craterBrink.width / 2;
matrix.ty = -center.y + craterBrink.height / 2;
craterBrink.draw(ground, matrix, null, BlendMode.ALPHA);
matrix.tx = center.x - craterBrink.width / 2;
matrix.ty = center.y - craterBrink.height / 2;
ground.bitmapData.draw(new Bitmap(craterBrink), matrix, null, BlendMode.NORMAL);
craterBrink.dispose()

stage.addChild(back)
stage.addChild(ground)

I had to create this BlendMode.ALPHA case because it wasn’t done in OpenFL so I tried this with BlendMode.ALPHA with globalCompositeOperation:

case 'alpha':
    context.globalCompositeOperation = 'destination-out';
break;

I use the crater image with BlendMode.ERASE to dig and the craterBrink image to give the hole a look

Crater Image Crater brink

The result was to be:

Flash

But this is it:

Canvas



from How to reproduce this effect of blend mode on canvas?

No comments:

Post a Comment