Center BitmapText

[Hsaka]

Hello, in previous versions it was possible to center a BitmapText object by using anchor.setTo(0.5, 0.5). Is there an equivalent way of doing this in 1.2? I know that there is the align property but what I'm trying to do is to make the text appear in the center of the screen regardless of its width or height; which is what the anchor aided in doing.

[rich]

Anchor and align it.

[Hsaka]

I tried that, but the problem is there doesn't seem to be an anchor property on BitmapText anymore.

Edit: It seems that the alternative is to use the textWidth property to manually center the text.

[mariogarranz]

I tried that, but the problem is there doesn't seem to be an anchor property on BitmapText anymore.

Edit: It seems that the alternative is to use the textWidth property to manually center the text.

 

Could you please more information on how you solved this? Having exactly the same problem but not sure how to apply that.

Thanks

[Hsaka]

Hey, sure I did it like this:

this.scoreText = this.game.add.bitmapText(0, 15, 'mecha', '0', 40);this.scoreText.align = 'center';this.scoreText.x = this.game.width / 2 - this.scoreText.textWidth / 2;//then whenever you set the text, you need to reposition it:this.scoreText.setText('100');this.scoreText.x = this.game.width / 2 - this.scoreText.textWidth / 2;

[mariogarranz]

Thank you very much Hsaka.

Still, anchor allowed both vertical and horizontal positioning, while I guess align applies only to horizontal.

Rich mentioned we could anchor the BitmapText, but the new class doesn't seem to have an anchor point anymore.

[mariogarranz]

OK, tested this and see no solution, other than waiting for text to be updated, and position it making the necessary calculations according to its width and height, which is a very bad solution since width and height can't be calculated at the time the text is updated.

 

Reading Rich's post #2, I think something's wrong, and anchor property should still be available.

[enpu]

I think you can calculate width and height with updateTransform method, like:

text.setText('test');text.updateTransform();text.position.x = 100 - text.textWidth / 2;

[mariogarranz]

 

I think you can calculate width and height with updateTransform method, like:

text.setText('test');text.updateTransform();text.position.x = 100 - text.textWidth / 2;

 

Thank you very much! That worked just fine

Still missing the good old anchor point, but that will do the job until it comes back (in case it does).

[jflowers45]

Thanks Enpu I just ran into exact same issue ... didn't realize textWidth wasn't immediately available after changing the text, so my bitmap text aligning wasn't working, til I used updateTransform - that works great.

[dnassler]

I really hope that anchor comes back to bitmap text

[rich]

It won't, because anchor is used for aligning textures and a BitmapText object doesn't have a texture. It's a collection of Sprites (one for each letter), each of which has their own texture, but there's no overall one. You have to use Pivot for alignment of BitmapText objects.

[Luis Fonseca]

Fighting the same problem right now... 

The updateTransform solution is not working as apparently that method is not available anymore. 

 

What other solutions are you guys using?

[lewster32]

The updateTransform method updates the bounds of the object (which you then get via getBounds or getLocalBounds) but you can also get the width of a BitmapText instance by calling its updateText method - this is called automatically when you first create a new instance, but should be manually called if you alter the text.Then you can get its width from its textWidth property correctly, as this is updated during updateText, and not necessarily during updateBounds. Something like:

bitmapText.updateText();bitmapText.x = game.world.centerX - (bitmapText.textWidth * 0.5);

Will center the bitmapText in your world by placing it at the center, then offsetting it by half its width (multiplying by 0.5 is the same as dividing by 2, but is faster - a good habit to get into when writing performant code).

[Luis Fonseca]

Thanks lewster32.

 

Although your method works, "updateText" is not a documented method. Although in JS that might not make a difference, since I'm using Typescript I get an error during compile-time.

 

Any other options?

[jouniii]

Cast to any or update the Typescript declrations.

[lewster32]

That will explain it then. Both updateTransform and updateText are originally defined in pixi's BitmapText object. It looks like in setting up the TypeScript definitions, these inherited methods may have been left out.

[jpdev]

I guess it is maybe because they are both private in pixi.js.

 

Source

/*** Renders text and updates it when needed * @method updateText @private*/

[Luis Fonseca]

I'll create a pull request with the updated Typescript definitions then.

[lewster32]

Interesting, I wonder why they're private? There are definitely use cases for needing to force an updateTransform or updateText synchronously so that you can access the dimensions of an object instantly rather than waiting for the dirty flag to be checked on the next update. Does anyone know if there's another way we should be doing this kind of stuff?

[lucbloom]

Here is the solution:

 

Object.defineProperty(Phaser.BitmapText.prototype, 'anchor', {    get: function() {        return this._anchor;    },    set: function(anchor) {        this._anchor = anchor;        this.dirty = true;        this.updateTransform();                if (!this.textBitmapSpritesParent)        {            this.textBitmapSpritesParent = new Phaser.Group(this.game);            this.addChild(this.textBitmapSpritesParent);        }        this.textBitmapSpritesParent.x = -this.textWidth * this.anchor.x;        this.textBitmapSpritesParent.y = -this.textHeight * this.anchor.y;                for (var i = 0; i < this.children.length;)        {            if (this.children[i] == this.textBitmapSpritesParent)            {                ++i;            }            else            {                this.textBitmapSpritesParent.add(this.children[i]);            }        }     }});

 

PS: rich, this would work better (more reliable) if BitmapText would use an internal dedicated array for its Glyph sprites.

[lewster32]

Nice work! You should probably submit this as a PR on Github.

[lucbloom]

Better solution:

 

Paste this somewhere in your 'extensions.js' (after loading phaser-min.js) and it'll work.

 

Object.defineProperty(Phaser.BitmapText.prototype, 'anchor', {    get: function() {        return this._anchor;    },    set: function(anchor) {        this._anchor = anchor;        this.dirty = true;        this.updateTransform();    }});PIXI.BitmapText.prototype.updateText = function(){    var data = PIXI.BitmapText.fonts[this.fontName];    if (!data)    {        console.error("Bitmap font not found: '" + this.fontName + "'");        return;    }         var pos = new PIXI.Point();    var prevCharCode = null;    var chars = [];    var maxLineWidth = 0;    var lineWidths = [];    var line = 0;    var scale = this.fontSize / data.size;        for(var i = 0; i < this.text.length; i++)    {        var charCode = this.text.charCodeAt(i);        if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i)))        {            lineWidths.push(pos.x);            maxLineWidth = Math.max(maxLineWidth, pos.x);            line++;            pos.x = 0;            pos.y += data.lineHeight;            prevCharCode = null;            continue;        }        var charData = data.chars[charCode];        if(!charData) continue;        if(prevCharCode && charData[prevCharCode])        {            pos.x += charData.kerning[prevCharCode];        }        chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});        pos.x += charData.xAdvance;        prevCharCode = charCode;    }    lineWidths.push(pos.x);    maxLineWidth = Math.max(maxLineWidth, pos.x);    var lineAlignOffsets = [];    for(i = 0; i <= line; i++)    {        var alignOffset = 0;        if(this.style.align === 'right')        {            alignOffset = maxLineWidth - lineWidths[i];        }        else if(this.style.align === 'center')        {            alignOffset = (maxLineWidth - lineWidths[i]) / 2;        }        lineAlignOffsets.push(alignOffset);    }    var lenChildren = this._pool.length;    var lenChars = chars.length;    var tint = this.tint || 0xFFFFFF;    for(i = 0; i < lenChars; i++)    {        var c = this._pool[i];        if (c) c.setTexture(chars[i].texture); // check if got one before.        else        {            c = new PIXI.Sprite(chars[i].texture); // if no create new one.            this._pool.push(c);        }        c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;        c.position.y = chars[i].position.y * scale;        c.scale.x = c.scale.y = scale;        c.tint = tint;        if (!c.parent) this.addChild(c);    }    // remove unnecessary children.    // and put their into the pool.    for (var i = lenChars; i < this._pool.length; ++i)    {        this.removeChild(this._pool[i]);    }    /**     * [read-only] The width of the overall text, different from fontSize,     * which is defined in the style object     *     * @property textWidth     * @type Number     */    this.textWidth = maxLineWidth * scale;    /**     * [read-only] The height of the overall text, different from fontSize,     * which is defined in the style object     *     * @property textHeight     * @type Number     */    this.textHeight = (pos.y + data.lineHeight) * scale;    if (this._anchor)    {        for(i = 0; i < lenChars; i++)        {            var c = this._pool[i];            c.position.x -= this.textWidth * this._anchor.x;            c.position.y -= this.textHeight * this._anchor.y;        }    }};

[lucbloom]

In all seriousness, regardless of what internal structure an object has, I want to set its anchor point. Imagine a list of numbers, for instance a high score list. I want the back of the numbers to align.

 

Now if these labels are TTF text or bitmap font texts are not important to me. I want to be able to align them the same way.

 

In my vision, "align" doesn't address this issue because that specifies how the text should be aligned _within_ the label and therefore only has effect on labels with *multiple lines*.

 

As one game engine developer (c++) to another (JS), I highly recommend adding the "anchor" property on every type of visual world object with a width & height.

 

PS: how can I change the 'Newbie' status above my profile picture without having to make too much posts? :-)

[lewster32]

I think your status changes with length of time registered.