Jump to content

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

Link to post
Share on other sites
  • 4 months later...
  • 5 months later...
  • 4 weeks later...
  • 2 months later...
  • 2 years later...

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();
Link to post
Share on other sites
  • 2 years later...
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
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.

×
×
  • Create New...