Phaser Graphic

[Appolos]

Hello !

I need to create a block in center of screen with text.
How to set this block and text set to center of screen ??
My code:

this.graphics = this.add.graphics(0, 0);
    // this.graphics.pivot.set(0.5,0.5)
    this.menuText = this.add.text(0, 0, text, textStyle);

this.graphics.beginFill(0xf9cb9c);
    this.graphics.drawRect(
      this.game.world.centerX / 2,
      this.game.world.centerY / 2,
      this.game.world.width / 2,
      this.game.world.height / 2
    );
    this.menuText.setTextBounds(
      this.game.world.centerX / 2,
      this.game.world.centerY / 2,
      this.game.world.width / 2,
      this.game.world.height / 2
    );
    this.shareText.setTextBounds(
      this.game.world.centerX / 2,
      this.game.world.centerY / 2 + 100,
      this.game.world.width / 2,
      this.game.world.height / 2
    );
    this.restartGame.setTextBounds(
      this.game.world.centerX / 2,
      this.game.world.centerY / 2 + 120,
      this.game.world.width / 2,
      this.game.world.height / 2
    );
    this.graphics.addChild(this.shareText);
    this.graphics.addChild(this.restartGame);
    this.graphics.addChild(this.menuText);

 

[Yehuda Katz]

You should not use text bounds, they are useful if you have some kind of container within which you want align your text (especially if it's multi-line). For your case anchor is the best option:

this.menuText = this.game.add.text(this.game.world.centerX, this.game.world.centerY, 'sample', {font: '60px Arial', fill: '#ffffff'});
this.menuText.anchor.set(0.5, 0.5);

this.menuText = this.game.add.text(0, 0, 'sample', {font: '60px Arial', fill: '#ffffff'});
this.menuText.left = this.game.world.centerX;
this.menuText.top = this.game.world.centerY;
this.menuText.anchor.set(0.5, 0.5);

this.menuText = this.game.add.text(this.game.world.centerX, this.game.world.centerY, "sample\nthis is a new line", {font: '60px Arial', fill: '#ffffff', align: 'center'});
this.menuText.anchor.set(0.5, 0.5);

The first one is just for single line text, the second sample should help you understand what I did in first one. The third sample shows how to center multi-line text... anchor sets the center point of any object. The 0 means left or top, 1 means right or bottom... any value between those will move object's x/y coordinates within object.