bitmap fonts a bit clunky? -

[jpdev]

Hi,

 

Disclaimer: haven't used bitmap fonts int phaser 1.x

 

I just wanted to switch my normal text objects in my game fallingBlocks to bitmap fonts, here are my observations:

 

a ) all characters must be the same width, this produces bad kerning (since "w" and "m" are often much wider than all other characters)

 

b ) for each text displayed a font object and an image is needed, both need to be put into variables, because one is used to switch out the displayed text, and the other one to position it and make it visible / invisible.

 

 

Proposed solutions:

 

For issue a I would love to have an characterWidth array that should be passed to the bitmapFont constructor.

if a character is present as a key in this array, then the value in the array is used for the width of this character. all other characters have the default width.

 

Example: this.highScoreText = this.game.add.bitmapFont('font', 21, 24, MY_FONT_SET, 10, 1, 1, {'W': 25, 'M': 25, '!': 15});

 

That would be awesome. (From what I see this could be integrated into the code without too many problems. Creating the phaser frames would have to take it into account, and of course the 'printing'-routine too).

 

 

For issue b: I am not sure, but the font object could come with a default image, like so:

 

font.image.x = 100;

font.image.y = 150;

font.image.visible = true;

 

(The you would only need another image variable, if you want to display the same text(font) two times.)

 

Thanks for reading

[jpdev]

To illustrate, I display 4 numbers on screen.

So I have to do this:

 

    this.linesText = this.game.add.bitmapFont('font', 15, 21, MY_FONT_SET, 10, 1, 1);

    this.linesImage = this.game.add.image(this.field.width * 32 + OFFSETX + 20, OFFSETY, this.linesText);

    this.linesText.setText(this.getLinesText());

 

    this.scoreText = this.game.add.bitmapFont('font', 15, 21, MY_FONT_SET, 10, 1, 1);

    this.scoreImage = this.game.add.image(this.field.width * 32 + OFFSETX + 20, OFFSETY + 40, this.scoreText);

    this.scoreText.setText(this.getScoreText());

 

    this.levelText = this.game.add.bitmapFont('font', 15, 21, MY_FONT_SET, 10, 1, 1);

    this.levelImage = this.game.add.image(this.field.width * 32 + OFFSETX + 20, OFFSETY + 80, this.levelText);

    this.levelText.setText(this.getLevelText());

 

    this.highScoreText = this.game.add.bitmapFont('font', 15, 21, MY_FONT_SET, 10, 1, 1);

    this.highScoreImage = this.game.add.image(this.field.width * 32 + OFFSETX + 20, OFFSETY + 160, this.highScoreText);

    this.highScoreText.setText(this.getHightScoreText());

 

in order to be able to hide and show the numbers and change the numbers.

 

Or am I getting something wrong? (Seems a lot of overhead - But I had only the bitmap-text labs to go on, so maybe i missed something obvious)

[rich]

If you need variable width kerning and all that jazz, you should really be using a BitmapText object.

[richpixel]

Was wondering about kerning - can that be done dynamically on a BitmapText or only through the font xml data ?

Thanks