Jump to content

Text displayed using TrueType (.ttf) font renders distorted/blurred


Recommended Posts

I'm loading a `.ttf` file via CSS and definition of `font-face`.

However, in the game the text renders blurry. 

This is what I tried first (the font name is `truetypetest`):

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' });

This actually renders almost clearly:


There is still some sort of lighter 'shadow' if you look carefully. Setting the resolution arbitrarily high via the below gives what I want:

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' }).setResolution(10);

This renders clearly:


However, I don't want to be setting resolution this way as it's expensive memory-wise. 

Furthermore, if I avoid setting the resolution AND specify a specific `fontSize`, via:

this.sampleText = this.scene.add.text(0, 0, '', { fontFamily: 'truetypetest' });

This renders as blurry text:

Screenshot 2022-04-11 at 17.56.07.png

I should mention that I'm rendering the text inside a container (`GameObjects.Container`). Also, and I suspect this is the key problem - I'm zooming the canvas using:

scale: {
        parent: 'game-canvas',
        zoom: 2,
        autoCenter: Phaser.Scale.CENTER_BOTH,

I can't avoid using the zoom at this stage as the art is based off of this requirement. I've also tried using Bitmap font with no luck.

So my question is how do I use my custom font in my game that can render clear text for a wide range of different `fontSize`?


Screenshot 2022-04-11 at 18.00.18.png

Screenshot 2022-04-11 at 18.06.58.png

Link to comment
Share on other sites


  • Recently Browsing   0 members

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