BitmapText and align to center function, not quite working

[BdR]

I've added some texts to my game and most of them should just be centered horizontally in the middle of the screen. Now I didn't want set the pixel coordinates manually, aligning them all by hand, because this is a lot of work and also, when making small changes to the text or setting text dynamically this means also have adjusting the x-position again.

 

So, I wanted to extend the BitmapText class with a centerText(x) function. Here is my code, it is almost working, except for one weird bug. When the text is changed and then the centerText() function is called, it adjusts the x-position as if it still contains the previous text. Even though the centerText() function calls the update() function for the BitmapText object.

 

 

Anyone know what I am doing wrong here? See code below.

// bitmaptext testing centered function

var CANVAS_WIDTH = 800;

var CANVAS_HEIGHT = 600;


var game = new Phaser.Game(CANVAS_WIDTH, CANVAS_HEIGHT, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });


var text1;

var text2;

var text3;


// -------------------------------------

// extend Phaser.BitmapText, add custom centerText function

// -------------------------------------

Phaser.BitmapText.prototype.centerText = function(xCenter)

{

    console.log('** Phaser.BitmapText.centerText was called, this.text='+this.text+', xCenter='+xCenter);

    // update to refresh textWidth property

    this.update();


    // adjust x position so it's centered around xCenter pos

    this.x = Math.floor(xCenter - (this.textWidth*0.5));

};


// -------------------------------------

// PHASER GAME FUNCTIONS

// -------------------------------------

function preload() {

    game.load.image('panel', 'panel.png');

    game.load.bitmapFont('myfont', 'myfont.png', 'myfont.xml'); // created with http://kvazars.com/littera/

};


function create() {

    // draw vertical line in middle

    var grf = game.add.graphics(0, 0);

    grf.lineStyle(2, 0xFFFFFF, 0.75);

    grf.moveTo(400,   0);

    grf.lineTo(400, 600);


    // add texts

    text1 = game.add.bitmapText(10, 72, 'myfont', 'test1', 48);

    text2 = game.add.bitmapText(10, 144, 'myfont', 'test2', 48);

    text3 = game.add.bitmapText(10, 216, 'myfont', 'test3', 48);


    // center all texts

    text1.centerText(400);

    text2.centerText(400);

    text3.centerText(400);


    // add click event

    game.input.onDown.add(setNewTexts, this);        

}

function update() {

    //console.log('update - game is running');

}

function render() {

    // nothing here

}


// -------------------------------------

// random text on mouse click

// -------------------------------------

function setNewTexts() {

    //console.log('setNewTexts - change all 3 texts');

    // initialise random texts

    var sometexts = ['the fox', 'the quick fox', 'the quick brown fox', 'the quick brown fox jumps', 'etc.'];

    var i=0;


    //i = game.rnd.integerInRange(0, sometexts.length);

    text1.text = sometexts[1];

    text1.centerText(400);


    text2.text = sometexts[2];

    text2.centerText(400);


    text3.text = sometexts[3];

    text3.centerText(400);

};

[lewster32]

You need to call updateText on the BitmapText object for it to correctly refresh and recalculate the text. 

[BdR]

d'oh! okay updateText() fixed it, thanks for the quick reply