Centering text vertically within bounds.

[jborg]

I've read multiple posts similar to what I'm trying to accomplish, but still haven't been able to get this working. I'm trying to center a text object vertically within its own bounds.

var fontScoreWhite =  { font: "24px Avenir", fill: "#000000", boundsAlignH: "center", boundsAlignV: "middle" };
this.timeText = this.add.text(this.game.width-12, 12, this._time, fontScoreWhite);
this.timeText.setTextBounds(0, 0, this.timeText.width, this.timeText.height);
this.timeText.anchor.set(1,0);

Am I missing something? I'm following the example https://phaser.io/examples/v2/text/center-text

[samme]

The bounds height should be larger than the text height (equal to the clock height, in this case).

[jborg]

15 hours ago, samme said:

The bounds height should be larger than the text height (equal to the clock height, in this case).

I don't fully understand. Can you explain a bit?

[samme]

You should use something like 

this.timeText.setTextBounds(0, 0, 50, 100);

The "boundary" needs to be larger than the text itself, otherwise there's no room to align it. Try:

 

[jborg]

Great example! I get what you mean now. I can center my text objects now with your method for sure. The strange thing with my example though, is that the blue rectangle represents the text sprite bounds. Why is there extra padding on the top and bottom? How can I remove this padding or center the text vertically such that its centered within its sprite bounds?

[samme]

Try:

var fontScoreWhite =  { font: "24px Avenir", fill: "#000000", boundsAlignH: "center", boundsAlignV: "middle" };

this.timeText = this.add.text(0, 0, this._time, fontScoreWhite);
this.timeText.setTextBounds(X, Y, WIDTH, HEIGHT); // ← position the text here
// REMOVE: anchor.set(…)