Jump to content

Masking a gradient fill not working


Recommended Posts

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.drawRoundedRect(620, 500, 140, 30, 10);

// apply the mask
myBmp.mask = myMask;

I created a codepen for this: here


Any help would be highly appreciated!

Link to comment
Share on other sites

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


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;
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...