Blurry bitmapFont because game scaling

Phaser 2 / CE
1

Hi Guys,
so I think I know what the issue is, but I dont know how to fix it properly.
Using Littera to create bitmapFonts.
My code:
index.html:
var transparent = false;
var antialias = false;
TopDownGame.game = new Phaser.Game(500, 320, Phaser.CANVAS, ‘’, this, transparent, antialias);
boot.js:
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignHorizontally = true;
game.js:
TopDownGame.game.load.bitmapFont(‘nokia16’, ‘assets/fonts/font.png’, ‘assets/fonts/font.fnt’)
var story = TopDownGame.game.add.bitmapText(0, 0, ‘nokia16’, ’ I dont know how to fix it’);
story.scale.set(1);

but even if I disable the this.scale.scaleMode the font is still blurry. only if I also set the scale to 0.5 it gets clearer.

2

Try story.smoothed = false; and let us know

3

smoth false
smoothFalse
smooth true
smoothTrue

but I played a bit more with littera and font sizes. I figured out that phaser always outputs the font at the same size.
So if my littera font size is 5 or if my font size is 100 it is the same size in my phaser game. That should be the issue, but I dont know why phaser is doing that.
Example:
FontSize 16
font16
FontSize 100
font100
(console for size reference)

4

As you can see you can change its size by changing the size parameter https://phaser.io/docs/2.6.2/Phaser.BitmapText.html but I don’t understand why the font you’re using is doing this

If it’s doesn’t causes a problem, can you upload it in this thread so we can take a look at it

5

Ok thats good. I never used the size parameter. I used scale instead.
I have this problem with every bitmap font. Also tried it with the phaser2 example bitmapFonts => the same problem.

General questin:
So bitmap fonts are not good for up- and downscaling, I should use them in the same size as I generated them with littera. Correct?

Files:
font
I can not upload the .fnt file but here is a screenshot

fntFile
fntFile.png1572×458 15.6 KB

6

By using the bitmap fonts available in the examples you can see that it’s possible to assign them diffrent sizes

7

ok cool my font looks like this without this command:
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
So is there a way I can still use this command for my game but NOT for the font?
or can I use a different command which will upscale my game but not the font?
or should I upscale the game by 2 and than downscale the font by 2 but I think I will loose some quality if I do it like that?

8

Shall we open another thred for this question ? or think it’s still dealing with the scaling of the font ?

9

If you’re making your own BitmapFonts, you should definitely pass a size argument, because Phaser will use a default value of 32.

10

I think it’s still the scaling, but correct me if I am wrong.
Lets say my game width is 500, my window.innerWidth is 1000, so my game is upscaling by factor ~2, which means it upscales everything. If I add a bitmapFont with size 16, due to the upscale it is technically size 32 and this causes the blurry/unsharpness. Correct?

11

Yes, game/canvas scaling will smooth everything, including the bitmap fonts. The reason I mentioned size is that if that’s not correct, the text may look bad even if the game isn’t scaled.

You should use something like

new Phaser.Game({
  width: 500,
  height: 320,
  renderer: Phaser.CANVAS,
  antialias: false,
  crisp: true
};
12

ok thanks for mentioning the size again.
Is there a way I can figure out by which factor my game was upscaled, so I can say for example: Littera font size was 16.

var story = TopDownGame.game.add.bitmapText(0, 0, ‘nokia16’, ’ I dont know how to fix it’, 16);
story.smoothed = false;
story.scale.set(1/upscaledFactor);

I already tried a few things but I didn’t get the factor.

13

14

The canvas scale factor is in game.scale.width and game.scale.height.

The natural size of your font looks to be 16. You can find it in

game.cache.getBitmapFont('nokia16').font.size
2 Likes