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
The result was to be:
But this is it:
from How to reproduce this effect of blend mode on canvas?




No comments:
Post a Comment