Graphic and Text Gameobject transform working different

Phaser 3
1

Hello,

My mind is blowing up. I’m adding two objects to the scene, a Graphics and a Text.

var progressBar = this.add.graphics({
       x: 0,
       y: 0
});

var percentText = this.make.text({
       x: 0,
       y: 0,
       text: '0%',
       style: {
            font: '18px monospace',
       }
});

Both inherit transform behaviour, but for some reason the graphics object is not positioning in the (0, 0) position.

image
image1918×941 12 KB

I cleared cache and it’s now working. I would appreciate any help! :open_mouth:

Full code:

this.physics.world.setBounds(-this.gameWidth/2, -this.gameHeight/2, this.gameWidth, this.gameHeight);
this.cameras.main.centerOn(0, 0);
            
var progressBar = this.add.graphics({
         x: 0,
         y: 0
});
var progressBox = this.add.graphics({
         x: 0,
         y: 0
});
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(240, 270, 320, 50);

var loadingText = this.make.text({
       x: 0,
       y: -50,
       text: 'Loading...',
       style: {
            font: '20px monospace',
       }
});

var percentText = this.make.text({
       x: 0,
       y: 0,
       text: '0%',
       style: {
            font: '18px monospace',
       }
});
2

:wave:

I expect you would want to do

progressBox.fillRect(-160, -25, 320, 50);
3

This is probably the dumbest question I have ever made :slight_smile:

Thank you!