How to center text?

[Bossman759]

How can I center the font? I have tried using

game.world.centerX

but the text still ends up not in the center. any ideas?

[lewster32]

http://www.html5gamedevs.com/topic/7129-how-to-center-a-bitmaptext/

 

Basically, you have to position it to the center of the screen minus half the width of the text to center it. To right-align it, you have to position the text where you want it minus the full width of the text. Left align doesn't require any changes. This is because the first line of text is always aligned to the top left - subsequent lines are aligned based on the align setting you choose.

[harrywatson]

Umm you could try

game.world.x = canvas.width/2;game.world.y = canvas.height/2;

[Anderberg]

Try changing the anchor: textVariable.anchor.set(0.5);

[lewster32]

Anderberg, unfortunately this does not work with any of the Phaser text objects as they are technically groups of objects, and anchor only works by re-positioning the texture of an object.

[Anderberg]

lewster32: That's interesting, it works for me
I see that there is nothing in the documentation though, so I am not sure why it works. I am using a dev-build from about 10 days ago.

[jouniii]

You probably are talking about two different things. The bitmap font, and the canvas rendered fonts (to a single image sprite).

 

The anchor.setTo(0.5) works fine, although there's small issue with it if the rendered bitmap size is even. The sprite is aligned at subpixel level and the text gets blurry. To counter this you can do:

text.anchor.x = Math.round(text.width * 0.5) / text.width;

This will set anchor to 0.5 or offsets it by fraction so that the adjusted position will be full pixel. Same works for y axis. I think the same also applies any sprite, so the anchor set to 0.5 is not ideal if you want to preserve crisp looks, while retaining subpixel for animations.

[Anderberg]

Of course! I was talking about Phaser.Text, I see now that we talk about BitmapText earlier. Good call.