Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

bitmap fonts a bit clunky? -


jpdev
 Share

Recommended Posts

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 :)

Link to comment
Share on other sites

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)
Link to comment
Share on other sites

  • 11 months later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...