jdeagle

alphaMask from bitmapData

Recommended Posts

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

Share this post


Link to post
Share on other sites

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(){		}

Share this post


Link to post
Share on other sites

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;

FBvVmit.png

Share this post


Link to post
Share on other sites

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();

Share this post


Link to post
Share on other sites
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 by Ram M

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.

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.