Trouble with Masking

[RichardSneyd]

Hi,

This is my first time posting here, though I've been using Phaser for a while now and love it. I'm currently working with Phaser CE version 2.10.3, and I'm getting inconsistent results with masking. My artist has created GUI elements, like load bars etc, with very rounded edges. For that reason, when I scale the 'inner' graphic to create the usual load bar effect, I must mask around the curved edges of the 'outer' graphic or what I end up with is a squashed graphic at the edge when the scale is very low, say at 0.1. 

I've managed to successfully mask the load bar you see when you visit the following page: http://jellyphonics.highwoodeducation.com/level_1/unit_1/lesson_2/game_1.php

I used this code to achieve the result:

 this.loadBarMask = this.game.add.sprite(this.game.world.centerX, this.loadSprite.bottom, 'loading_bar_mask');
            this.loadBarMask.x -= this.loadBarMask.width/2;
            this.loadBarMask.anchor.setTo(0, 0);
            this.loadBarMask.scale.setTo(0, 1);
            this.loadBarGlass = this.game.add.sprite(this.loadBarMask.x, this.loadSprite.bottom, 'loading_bar_glass');
            this.loadBarGlass.anchor.setTo(0, 0);
            var mask = this.game.add.graphics(0, 0);
            mask.x = this.loadBarGlass.left;
            mask.y = this.loadBarGlass.top;
            mask.beginFill(0xffffff);
            mask.drawRoundedRect(0, 0, this.loadBarGlass.width, this.loadBarGlass.height, 45);
            this.loadBarMask.mask = mask;

However, when I use the same approach to mask the 'FuelGuage' graphic at the bottom right of the game, you will see, if you wait for it to load for a moment, that this is not working, and it looks rather ugly (all squashed up at the bottom, because the mask isn't having any effect).

This the code that I am using for the FuelGuage, which is pretty much identical in it's approach: 

this.fuelMask = this.game.add.sprite(-xOffset, -(yOffset+30), 'fuel_mask', 0, this.origin.HUDgroup);
            this.fuelMask.anchor.setTo(0.5, 1);
          //  this.addChild(this.fuelMask);

            this.fuelJar = this.game.add.sprite(-xOffset, -yOffset, 'fuel_jar', 0, this.origin.HUDgroup);
            this.fuelJar.anchor.setTo(0.5, 1);
          //  this.addChild(this.fuelJar);
            this.fuelJar.centerX = this.centerX;
            this.fuelJar.bottom = this.bottom - 85;

            this.fuelMask.centerX = this.centerX;
            this.fuelMask.bottom = this.bottom - 100;

            this.fuelMask.scale.setTo(1, 0.05);

            var mask = this.game.add.graphics(0, 0);
            mask.x = this.fuelJar.left;
            mask.y = this.fuelJar.top;
            mask.beginFill(0xffffff);
            mask.drawRoundedRect(0 , 0, this.fuelJar.width, this.fuelJar.height, 130);
            mask.endFill();
            this.fuelMask.mask = mask;

If anyone can see any possible issues with the way I'm approaching this, or has any tips on how I might debug the problem, I'd really appreciate it. I've tried using the genereateTexture() function to visualize where the graphic for the mask is appearing, but have been unable to resolve the problem thus far.

Many thanks,

Richard