Search the Community

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!