Jump to content

Centering text in v2.6.2


Recommended Posts

Hello everyone,

I would like to be able to center a text phrase in the x-axis of the screen within the game body.

Well, after a lot of fiddling around and having no success using the "center text" example  : https://phaser.io/examples/v2/text/center-text#download

// Setting the style
var style = { font: "bold 32px Arial", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" };
// Adding the text
text = game.add.text(0, 0, "this is the text", style);

//  Setting the bounds from x0, y100 and be 800px wide by 100px high
text.setTextBounds(0, 100, 800, 100);

I found that the issue was that I was using Phaser 2.6.2 and it only worked when I used 2.4.x

I cannot find a working example for centering text in 2.6.x

Any help would be really appreciated!


Link to comment
Share on other sites

I am centering my text like this:

var label = this.game.add.text(
    'Some text to display\nMay be multiline', 
    { font: '64px ' + fontNameUsedInGame, 
      fill: '#ffffff', 
      align: 'center'
label.fixedToCamera = true; // so it will move with camera
label.anchor.setTo(0.5, 0);
//titleLabel.anchor.setTo(x, y);
// x:
// 0.0 = left
// 0.5 = center
// 1.0 = right
// y:
// 0.0 = top
// 0.5 = center
// 1.0 = bottom


Link to comment
Share on other sites

I think using world.centerX would also work in conjuction with text.anchor.setTo(0.5).

For example, this will center the text to the center of the game's screen. If you want to 

function create() {
    var text = game.add.text(game.world.centerX, game.world.centerY, 'I am centered', { font: "65px Arial", fill: "#ff0044" });


Link to comment
Share on other sites


  • Recently Browsing   0 members

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