alphaMask from bitmapData

[jdeagle]

Can you create a alphaMask from bitmapdata rather than images? I have a circle loader that I am building as bitmapData and I have the source image I want to mask, but I can't figure out how to use the mask bitmap data for bmd.alphaMask or convert the mask bitmapData to a image that the method can use. Any help would be appreciated.

createPie : function (game, w, h) {	console.log("create pie", w, h, this);	var mask = game.add.bitmapData(w, w),		bmd = game.add.bitmapData(w, w),		canvas = bmd.canvas,		context = bmd.ctx,		size = 270,		degreesToRadians = function (degrees) {			return (degrees * Math.PI) / 180;		}; 	var drawPie = function () {		bmd.clear();		context.save();		var centerX = Math.floor(w / 2);		var centerY = Math.floor(w / 2);		var radius = Math.floor(w / 2); 		var startingAngle = degreesToRadians(270);		var arcSize = degreesToRadians(size);		var endingAngle = startingAngle + arcSize; 		context.beginPath();		context.moveTo(centerX, centerY);		context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);		context.closePath(); 		context.fillStyle = 'rgba(0, 0, 0, 1)';		context.fill();		context.restore(); 		bmd.render();	};  	drawPie(); 	game.cache.addBitmapData("loaderMaskBMD", bmd); 	var maskImage = game.add.image(348, 221, bmd);	console.log("maskImage", maskImage);	// doesn't work	//game.cache.addImage("loaderMaskImage", maskImage); 	game.load.onFileComplete.add(function (progress) {		console.log("load", progress);		size = (360 / 100) * progress;		drawPie();	}); 	// doesn't work	//mask.alphaMask('preloaderRingLoaded', maskImage); 	// doesn't work	//mask.alphaMask('preloaderRingLoaded', game.cache.getBitmapData("loaderMaskBMD")); 	// doesn't work	//mask.alphaMask('preloaderRingLoaded', game.cache.getImage("loaderMaskImage")); 	var sp = game.add.sprite(348, 221, mask);	sp.width = w;	sp.height = h;	console.log("sp", sp);},

[charlie_says]

Sorry - couldn't really find time to look through your code to see where the problem was - the below works: 

[edit - this example does work, but it may be a little specific to the way I needed to use it... And, typically, I'm struggling to separate it. The 'trick' to the alphamask is bitmapData.canvas - hope that's some help]

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update });var bmd;function preload(){	 game.load.image('img1', 'images/circle.png');	 game.load.image('img2', 'images/water.png');}function create(){	bg1BMD = game.make.bitmapData(350, 130);	bg1BMD.draw(game.cache.getImage('img2'), 0, 0);	bg1BMD.update();	game.add.sprite(100,100,bg1BMD);		var rect = new Phaser.Rectangle(0,0,50,50);	var bmd = game.make.bitmapData(50, 50);	var mask = game.make.bitmapData(50, 50);	var maskRect = new Phaser.Rectangle(35,5,50,50);	mask.copyPixels('img2',maskRect,0,0);	bmd.alphaMask('img1', mask.canvas);	bg1BMD.copyPixels(bmd.canvas, rect, 35,5);}function update(){		}

[jdeagle]

Does this only work if you are using the Canvas renderer?

[charlie_says]

No - test works Web GL too.

[jdeagle]

Thanks for the tip with bitmapData.canvas. I think there is a issue with bitmapData.alphaMask. The masking works but it also shows the mask image where it should be transparent. I mocked a example based on the phaser example(http://examples.phaser.io/_site/view_full.html?d=display&f=alpha+mask.js&t=alpha%20mask) and here is what I get.  It looks like alphaMask doesn't understand how to display transparent pixels from the masked element. I'm going to try masking the mask with the src png but that seems like a costly/backward fix. 

 

Edit: Using Phaser 2.0.4

var testBMD = game.make.bitmapData(w, h);// "preloaderRingLoaded is the orange ring png// "test" is the example mask pngtestBMD.alphaMask('preloaderRingLoaded', "test");var sp = game.add.sprite(348, 221, testBMD);sp.width = w;sp.height = h;

[charlie_says]

I think you're correct about alphaMask not working correctly - I noticed it in my test when I tried to pull it apart (I didn't notice when I used it in my project because I am overlaying that masked bitmapData over the masking bitmapData.)

[saibotlive]

I'm also having this issue with the mask image not being transparent

[ForgeableSum]

Is this fixed yet? I can't seem to get alpha masking to work :/

[Carlos]

I was facing the same problem but i realized that when i was creating the mask image i was using the "add" method instead of "make". 

I think that is the expected behaviour. 

 

[chadweigle]

I am still seeing this issue. Anyone else? Phaser version is 2.3.

[ozdy]

Hi guys, is this fixed? I'm having the same error where when "drawing" the destination transparent pixels are overriden

[samme]

Make sure you use game.make.bitmapData().

phaser-examples-mirror/bitmapdata/alpha mask

[ozdy]

1 hour ago, samme said:

Make sure you use game.make.bitmapData().

phaser-examples-mirror/bitmapdata/alpha mask

That's what I use, the problem is that my source bitmapdata has transparent pixels too, but they show as black  In your example source has no transparent pixels, so no problem.

[ozdy]

Finally solved it, I don't know what alphaMask uses but I got my desired effects with

// show when bottom and top overlap + transparency working (what i wanted alphaMask to do, scratchcard effect)

this.mcBmd.draw(this.bottomBmd).blendDestinationIn();

this.mcBmd.draw(this.topBmd).blendReset();

// hide when bottom and top overlap + transparency working ( eraser effect)

this.mcBmd.draw(this.bottomBmd).blendDestinationOut();

this.mcBmd.draw(this.topBmd).blendReset();

[Ram M]

On 2/16/2018 at 2:32 AM, ozdy said:

Finally solved it, I don't know what alphaMask uses but I got my desired effects with

// show when bottom and top overlap + transparency working (what i wanted alphaMask to do, scratchcard effect)

this.mcBmd.draw(this.bottomBmd).blendDestinationIn();

this.mcBmd.draw(this.topBmd).blendReset();

// hide when bottom and top overlap + transparency working ( eraser effect)

this.mcBmd.draw(this.bottomBmd).blendDestinationOut();

this.mcBmd.draw(this.topBmd).blendReset();

Hello,I want to do the same effect in phaser3.Please share your ideas.Thanks.

Edited January 8, 2021 by Ram M