roundedRect as mask

[Areg]

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?

[ForgeableSum]

I'm confused. Is it a Phaser.Rectangle or Phaser.Graphics object? Please post code. 

[Areg]

// '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;

[Carlos]

Yes, i'm getting the same error.

[woubuc]

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.

[EvilB]

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...

[cloakedninjas]

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

[EvilB]

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