Sign in to follow this  
Appolos

Phaser Graphic

Recommended Posts

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);


 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.