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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.