Jump to content

BitmapText and align to center function, not quite working


Recommended Posts

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

    // adjust x position so it's centered around xCenter pos
    this.x = Math.floor(xCenter - (this.textWidth*0.5));

// -------------------------------------
// -------------------------------------
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

    // 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];

    text2.text = sometexts[2];

    text3.text = sometexts[3];

Link to comment
Share on other sites


  • Recently Browsing   0 members

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