How To Center Text in Middle of Phaser 3 Game Screen

Stephen Garside | Wed 04 Mar 20 > 1 min read

Placing text in the center or middle of your Phaser 3 game screen is easily achieved with a couple of lines of code that utilise the size and position of your main scene camera.

First we declare a couple of constants to hold the screen center X and Y coordinates. We then add the main camera world offset to half the main camera width to get the center X real world pixel coordinate.  We repeat this to get the Y coordinate.

We can then add text to the Phaser 3 game screen, centering it by using the setOrigin property to 0.5.

Phaser 3 Center Text In Middle Of Screen
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const screenCenterY = this.cameras.main.worldView.y + this.cameras.main.height / 2; const loadingText = this.add.text(screenCenterX, screenCenterY, 'Loading: 0%').setOrigin(0.5);

If you are into Phaser 3 game development then you might find these other blog articles on Phaser 3 game development useful.

Leave Your Comments...