Areg

roundedRect as mask

Recommended Posts

Hi there! I am using regular rectangle as a mask for an image. It works fine. But when I try to change that graphics to draw rounded rectangle (instead of rectangle), and try to use that as a mask,  following exception gets thrown out 'Uncaught TypeError: Cannot read property '0' of undefined'. Does anyone know how to deal with this?

Share this post


Link to post
Share on other sites

// 'this' is a normal group


 


// this method works


var img = game.add.image(0, 0, 'something');


this.add(img);


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


graphics.drawRectangle(0, 0, 200, 40);


 


img.mask = graphics;


 


 


// this does not


 


 


var img = game.add.image(0, 0, 'something');


this.add(img);


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


graphics.drawRoundedRect(0, 0, 200, 40, 5);


 


img.mask = graphics;

Share this post


Link to post
Share on other sites

Have you tried creating a separate object as new Phaser.Graphics, running the drawRoundedRect method on that, and then after that adding it to the game or the group or whatever you need to add it to?

 

Just thinking here, I might be completely off (still pretty new to Phaser myself), but doing something like this has fixed a similar problem for me earlier today. Maybe it helps you too.

Share this post


Link to post
Share on other sites

I'm struggling with a similar problem here where I try to mask a rounded rectangle shaped part of a gradient fill. I'm also pretty new to Phaser, so I must be overlooking something and I hope somebody sees what I do wrong or has already found a solution to this.

 

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 gradientvar 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 maskvar myMask = this.game.add.graphics(0, 0);myMask.beginFill(0x000000);myMask.drawRoundedRect(620, 500, 140, 30, 10);myMask.endFill();// apply the maskmyBmp.mask = myMask;

Edit: I was able to find a solution to my issue, which I posted: here, maybe someone can benefit of it, but to be honest it was just a silly mistake...

Share this post


Link to post
Share on other sites

Bit late to the party, but I was struggling with a similar issue. I wanted some UI, a rounded rectangle with a gradient fill, border and a shadow. I got a bit bogged down with mixing Graphics and BitmapData when in reality using native Canvas commands was simpler...
 
 

this.boxProperties = new Phaser.Rectangle(0, 0, 400, 180);var x = this.boxProperties.x,    y = this.boxProperties.y,    width = this.boxProperties.width,    height = this.boxProperties.height,    cornerRadius = 20,    shadowSize = 5,    bmd = new Phaser.BitmapData(this.game, '', width, height),    grd = bmd.context.createLinearGradient(x, y, x, height);grd.addColorStop(0, '#e9f5f5');grd.addColorStop(1, '#c9d9dd');bmd.context.beginPath();bmd.context.moveTo(x + cornerRadius, y);bmd.context.lineTo(x + width - cornerRadius, y);bmd.context.quadraticCurveTo(x + width, y, x + width, y + cornerRadius);bmd.context.lineTo(x + width, y + height - cornerRadius);bmd.context.quadraticCurveTo(x + width, y + height, x + width - cornerRadius, y + height);bmd.context.lineTo(x + cornerRadius, y + height);bmd.context.quadraticCurveTo(x, y + height, x, y + height - cornerRadius);bmd.context.lineTo(x, y + cornerRadius);bmd.context.quadraticCurveTo(x, y, x + cornerRadius, y);bmd.context.closePath();bmd.context.fillStyle = grd;bmd.context.fill();bmd.context.strokeStyle = '#fff';bmd.context.lineWidth = 3;bmd.context.stroke();var bmd2 = new Phaser.BitmapData(this.game, '', width + shadowSize + shadowSize, height + shadowSize  + shadowSize);bmd2.context.shadowBlur = shadowSize;bmd2.context.shadowColor = 'rgba(0, 0, 0, 0.5)';bmd2.context.drawImage(bmd.canvas, shadowSize, shadowSize);return new Phaser.Sprite(this.game, 0, 0, bmd2);

 
Perhaps this will help someone in the future :)

Share this post


Link to post
Share on other sites

An extremely late reply here, but worth mentioning that the reply from cloakedninjas turns out to be more valuable that I first guessed.

I recently discovered that Phaser.Graphics use way more resources than Phaser.BitmapData, so the addition from cloakedninjas helped me transform what I used to do with graphics to bitmapdata and the performance of my game increased with 300%

So if people suffer from a big fps drop and use a lot of phaser graphics, worth investigating if you really need the graphics or can produce the same thing in bipmapdata

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.