Jump to content

Centering text vertically within bounds.


jborg
 Share

Recommended Posts

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

58a707bd58baa_ScreenShot2017-02-17at9_24_20AM.png.35f413988ca80dc78bc646110c08e0e1.png

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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(…)

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...