# Blurry bitmapFont because game scaling

**URL:** <https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810>\
**Category:** Phaser 2 / CE\
**Created:** [January 18, 2019, 2:56am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810 "2019-01-18T02:56:15Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 18, 2019, 2:56am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/1 "2019-01-18T02:56:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 18, 2019, 12:13pm UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/2 "2019-01-18T12:13:17Z")

</div>

Try `story.smoothed = false;` and let us know

---

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 18, 2019, 7:40pm UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/3 "2019-01-18T19:40:21Z")

</div>

> [@nazimboudeffa](#):
>
> story.smoothed = false;

**smoth false**  
 ![smoothFalse](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/86827fa705a843f6c959ad4152243bc60c7f52e0.png)  
**smooth true**  
 ![smoothTrue](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/bcf33c07420d8edb5b79152c826a5cd063c9cdf9.png)

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/202c190b4663d2551b4f161efa33287000f8e354.png)  
**FontSize 100**  
 ![font100](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/93b93f8db331a1bda69741e2da8f1f1779a0fa6f.png)  
(console for size reference)

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 18, 2019, 9:48pm UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/4 "2019-01-18T21:48:46Z")

</div>

As you can see you can change its size by changing the `size` parameter [https://phaser.io/docs/2.6.2/Phaser.BitmapText.html](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

---

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 18, 2019, 11:18pm UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/5 "2019-01-18T23:18:15Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/adfe5e528f8f612d487e60a6a04f93fabebfa817.png)  
I can not upload the .fnt file but here is a screenshot

 ![fntFile](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/85bc5dbb5a54b2ae154cf3e7a73190f23e47a34d.png)

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 18, 2019, 11:58pm UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/6 "2019-01-18T23:58:28Z")

</div>

By using the bitmap fonts available in the examples you can see that it’s possible to assign them diffrent sizes  
https://codepen.io/nazimboudeffa/embed/preview/XoLvLd?height=300&slug-hash=XoLvLd&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 19, 2019, 12:32am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/7 "2019-01-19T00:32:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 19, 2019, 12:34am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/8 "2019-01-19T00:34:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 19, 2019, 2:01am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/9 "2019-01-19T02:01:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 19, 2019, 2:57am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/10 "2019-01-19T02:57:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 19, 2019, 3:06am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/11 "2019-01-19T03:06:03Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![Colon](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/colon/32/519_2.png) [@Colon](https://phaser.discourse.group/u/Colon)\
**Post date:** [January 22, 2019, 1:58am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/12 "2019-01-22T01:58:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 22, 2019, 2:34am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/13 "2019-01-22T02:34:08Z")

</div>

https://codepen.io/samme/embed/preview/bzGEjY?height=300&slug-hash=bzGEjY&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 22, 2019, 2:38am UTC](https://phaser.discourse.group/t/blurry-bitmapfont-because-game-scaling/810/14 "2019-01-22T02:38:17Z")

</div>

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
```