Jump to content

Trouble with Masking


Recommended Posts


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.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.drawRoundedRect(0 , 0, this.fuelJar.width, this.fuelJar.height, 130);
            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,


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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