Jump to content

BitmapText and align to center function, not quite working


BdR
 Share

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.

 

2djyotx.png

 

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

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