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.
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...