BdR Posted November 24, 2014 Share Posted November 24, 2014 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); }; Link to comment Share on other sites More sharing options...
lewster32 Posted November 24, 2014 Share Posted November 24, 2014 You need to call updateText on the BitmapText object for it to correctly refresh and recalculate the text. BdR 1 Link to comment Share on other sites More sharing options...
BdR Posted November 24, 2014 Author Share Posted November 24, 2014 d'oh! okay updateText() fixed it, thanks for the quick reply lewster32 1 Link to comment Share on other sites More sharing options...
Recommended Posts