Masking a gradient fill not working

[EvilB]

I'm struggling with a problem similar to this one where I try to mask a rounded rectangle shaped part of a gradient fill. I'm pretty new to Phaser and searched like crazy for a solution but could not find one, so therefore I created a new topic for this.

I must be overlooking something and I hope somebody sees what I do wrong or has already found a solution to this.

Is it not possible to mask bitmap-data with a graphic perhaps? And if so, is there a dynamic way around this?

 

I tried using a PNG to mask, which worked fine, but that limits my flexibility and re-usability, so I'd really like to figure this out.

 

 

This is what happens:

I am able to see the gradient background as well as the rounded rectangle, but I can't seem to turn the rounded rectangle into a mask that actually works. To be sure it is not a positioning issue, I made the background to be masked, a full-screen rectangle and I positioned the mask in the range of that background.

 

This is what I try (which does not work for me):

// draw the shape that contains the gradient

var myBmp = this.game.add.bitmapData(800, 600);

var myGrd = myBmp.context.createLinearGradient(0, 0, 0, 600);

myGrd.addColorStop(0, '#090000');

myGrd.addColorStop(1, '#C50000');

myBmp.context.fillStyle = myGrd;

myBmp.context.fillRect(0, 0, 800, 600);

this.game.add.sprite(0, 0, myBmp);


// draw the rounded rect mask

var myMask = this.game.add.graphics(0, 0);

myMask.beginFill(0x000000);

myMask.drawRoundedRect(620, 500, 140, 30, 10);

myMask.endFill();


// apply the mask

myBmp.mask = myMask;

I created a codepen for this: here

 

Any help would be highly appreciated!

[EvilB]

OK, finally I found out what I was doing wrong... it was kind of stupid, but let's post the solution, in case anybody else runs into a similar mistake.

 

The mask is supposed to be applied to a sprite and I was applying it to the bitmapData instead of a sprite.

So in my code I had to replace:

this.game.add.sprite(0, 0, bmpData);

with:

var gradientSpr = this.game.add.sprite(0, 0, bmpData);

So that there was a sprite available to apply the mask to and then instead of applying the mask to MyBmp, I applied the mask to gradientSpr, which made my last line look like:

gradientSpr.mask = maskGph;