Text sometimes appear blurry or feel faded in my phaser game

Phaser 3
1

Hi Guys, I was working on a game in phaser 3 and encountered some text related issue, The issue is my text in game appear blurry or feel like faded. It happens when I user the canvas renderer for my game, If I change it into WEBGL rendered the text looks good, due to some circumstances I need to render my game in Canvas renderer. Can some one help me out.

Here is my phaser config and screenshot of the text.

// phaser config
config = {
type: Phaser.CANVAS,
parent: ‘phaser-container’,
pixelArt: true,
backgroundColor: “#93cbee”,
scale: {
mode: Phaser.Scale.FIT,

  width: window.innerWidth * window.devicePixelRatio,
  height: window.innerHeight * window.devicePixelRatio
},
physics: {
  default: 'arcade',
  arcade: {
    gravity: { y: 0 },
    debug: false,
  },
},
autoFocus: true,
scene: [GameScreen],

}

//text in my game
var clueText = this.make.text({
x: this.clueBackground.x,
y: this.clueBackground.y - this.clueBackground.displayHeight / 3.77,

    text: this.gameData.clues.int_clue[clue]["message"],
    origin: { x: 0.5, y: 0 },
    style: {
      color: "black",
      wordWrap: { width: this.game.scale.width / 2.8 },
      fontSize: (this.game.scale.width / 65).toString() + "px",
      // fontSize: (this.game.scale.width / 400).toString() + "ex",
      fontFamily: "arefruqaa-custom-regular",
      align: "center",
    },
  });

// screenshot of the blurry or faded texts
Image 2-Dell
Image 1-Dell

2

Try removing this.

3

Hi, Thanks for reply, I try removing but still have same issue

4
  • Avoid origin 0.5
  • Round x and y
  • Round the font size

Actually in the screenshot it looks like parts of the glyphs are missing? Not just blurry. That’s odd.

5

Try changing the font.