Ugly bitmap text

Phaser 3
1

Hi!

I have some problem with bitmap text and could not understand why it happens. Most of time text is blurry. Sometimes stronger, sometimes lighter. In some cases it become very ugly.

I tried to find solution in the documentation or in internet, but unsuccessfully. I found in soome places, that scaling can lead to such problem. But! I do not have scaling in my game. My scaling configuration is:

{
	width: window.innerWidth,
	height: window.innerHeight,
	mode: Phaser.Scale.NONE,
	autoCenter: Phaser.Scale.Center.NO_CENTER,
	expandParent: false
}

Also, I never change scale of text object itself (I never modify/read scale, scaleX, scaleY or something similar). Moreover, sometimes(in rare cases) text is not blurry. It is strange, but sometimes one of two bitmap texts created in two neighbour lines of code with same parameters (only x/y are differ) become blurry and ugly. While another one is normal.

I thougt that containers may be cause of it, but it is reprodcued without containers too.

I see this problem from PC browser(Windows, Chrome) and from mobile browser(Android, Chrome).

I attach some screenshots of this problem.

Can anyone help me please?
example1 example2

2

Seems to be anti aliasing…
Try:

const config = {
  // ...
  render: {
    pixelArt: true
  },
}
2 Likes
3

It helps!
Thank you very much!