BitmapText align "center" does not align properly

[threedollarbill]

I am experiencing an odd problem aligning the text of a BitmapText to the center.

I am successfully able to wrap the text by using the "maxWidth" property, but the alignment of the text is uneven / jagged (see attached screenshot).

It doesn't align to the center, some words are more to the left, and some are more to the right. I can't understand what's going on.

I am using the code below (typescript):

let hintText:Phaser.BitmapText = this.game.make.bitmapText(0, 100, "MSR", "", 25, "center");
hintText.maxWidth = 310;
this.add(hintText);
hintText.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut mattis velit. Cras placerat fermentum dictum. Donec at semper enim. Donec euismod pulvinar volutpat."

 

[rich]

The 'align' argument is for the alignment of multi-line text, it doesn't do anything if there is only one line of text. In your example, there is only one line of text, because there are no new-line characters anywhere in it.

maxWidth doesn't add in newline characters, which is why 'align' is unable to do anything in this case.

Personally I think the outcome is, rightly, unexpected though. You'd want it to do what you expect above, however the code to handle that isn't in the class file. PR anyone?

[threedollarbill]

Oh I see. Thanks for that Rich. Yeah, it seems there's currently no easy way to achieve that "centered" effect huh? Unless I manually add new lines.. I am starting to look at using Phaser.Text instead, maybe that one has more options for wrapping, etc. This is my first time using Phaser btw. I come from the Flash world.

[rich]

Stick it on GitHub as a feature request (under the Issues tab). Someone may pick this up for you and implement it. Or I may find time too.

[threedollarbill]

cool. i just did. thanks!

[kevinleedrum]

I created my first pull request to address this (so please go easy on me if I did something wrong).