Scaling a shape in Phaser 2 without having it move

Question

So, I'm trying to create a (very) simple progress bar in Phaser, (initially it's empty) and getting it to resize/scale to a specific size.

I'm not a fan of erasing and redrawing, since I assume this is more resource-heavy / not as efficient as simply tweening.

Whenever I scale its width, it insists on moving to the right - it is also updating its X coordinate as well.

I do know that we should change/set the anchor. I tried setting it to 0.5 (center), to 0 (left, top) and to 1.0 (bottom, right) as I saw in this question (and in the Phaser forums), but no matter the value that I set, the progress bar always moves (and always to the same place) as well.

Here is my code:

//Fill
var graphs = game.add.graphics(0, 0);
graphs.lineStyle(2, 0xFF0000, 1);
graphs.beginFill(0xFF0000, 1);

progressBar = graphs.drawRect(100, 50, 1, 20);
progressBar.anchor.setTo(0.5, 0.5);

//Outline
graphs = game.add.graphics(0, 0);

graphs.lineStyle(2, 0xFFFFFF, 1);

progressBarOutline = graphs.drawRect(100, 50, 100, 20);
progressBarOutline.anchor.setTo(0.5, 0.5);

//Resize it whenever the user presses the game area
game.input.onDown.add( resizeProgressBar, this );

And here is the code that I call to resize the (fill) bar (currently done through a tween):

function resizeProgressBar()
{
   game.add.tween(loadingProgressBar.scale).to( { x: 2.5}, 
   1000, Phaser.Easing.Quadratic.InOut, true);
}

Here is a fiddle that shows the issue (click on the canvas to update the bar).

This can't be that complicated. Am I forgetting something? Or am I supposed to calculate the new x position myself?

I'm using Phaser CE 2.11

Answer 1

I'm not sure why the height of the progressBar is growing, nor why it's moving, as I haven't done much with the raw graphics drawing capabilities in Phaser. However, there's a few things I do know which might help.

The difference between the questions you've linked to and your progress bar is that you're using raw graphics, instead of sprites.

If you switch to using a sprite-based progress bar you could either scale or set the width, depending upon what your progress graphic looks like.

Another option would be to do something similar to this tutorial for progress bars in Phaser 3. The relevant bits are defining the progress bar and then creating it:

var progressBar = this.add.graphics();
/// ...
this.load.on('progress', function (value) {
    progressBar.clear();
    progressBar.fillStyle(0xffffff, 1);
    progressBar.fillRect(250, 280, 300 * value, 30);
});

You can change the last five lines as needed for your particular circumstances.

While this does clear and then redraw the rectangle, I personally haven't seen much of a performance hit doing this. At least with older versions of Phaser 2, using Sprites instead of Graphics seems to be the way to go. Of course, it also depends upon how often and how many of these progress bars you'll be displaying.