The text getting randomly blurry when using "\n" with text

[huyhoang160593]

Hi, this is my first time tried to use this library to make a game this has been a blast to learn, but there is something seem wrong when I want to apply text to the screen, in my game that a port of CS50 Pong in Lua, the text get blurry when there is newline inside the text, and I don't know how to fix them properly.


This is how I implemented them.

	onPreDraw(_ctx: ExcaliburGraphicsContext, _delta: number): void {
		switch (gameState) {
			case GAME_STATE.START:
				// FIXME: the text is always blurry from the second line
				this.titleLabel.graphics.add(
					new Text({
						text: "Welcome to Pong \nPress Enter to begin",
						font: this.smallFont,
					}),
				);
				break;
			case GAME_STATE.SERVE:
				// FIXME: the text is always blurry from the second line
				this.titleLabel.graphics.add(
					new Text({
						text: `Player ${this.servingPlayer}'s serve! \nPress Enter to serve`,
						font: this.smallFont,
					}),
				);
				break;
			case GAME_STATE.DONE:
				// FIXME: the text is always blurry from the second line
				this.titleLabel.graphics.add(
					new Text({
						text: `Player ${this.winningPayer} wins! \nPress Enter to restart`,
						font: this.smallFont,
					}),
				);
				break;
			case GAME_STATE.PLAY: {
				this.titleLabel.graphics.hide();
				break;
			}
		}

		this.scoreLabel.graphics.add(
			new Text({
				text: `${this.player1.score} - ${this.player2.score}`,
				font: this.scoreFont,
			}),
		);
	}

And if somebody want to check the source, they are here, the file is located in src/scenes/main.scene.ts

[eonarheim]

Hi @huyhoang160593!

Thanks for the kind words! 🥰

The reason for this is subtle, Excalibur Font works by rendering text to an offscreen 2D canvas, then using that as a graphic. The problem is that when you have small font sizes there isn't a lot of pixels to work with.

This normally works just fine when you're pixel aligned, but the newline causes the next line of text to be positioned based on text length and if it doesn't fall on a pixel boundary it'll look blurry when sampled with antialiasing: false and low resolutions (less than 400x400 usually).

There are a couple of ways to work around this. For burry text in general you can try upping the quality which will give the Font rendering more internal resolution to work with increasing the sharpness of the text. You will still have problems if the text is moving because of the low game resolution though.

const smallFont = new Font({
  family: "PixelFont",
  size: 8,
  textAlign: TextAlign.Center,
  quality: 8
});
const label = new Actor({
  pos: this.screen.center
});
label.graphics.add(
  new Text({
    text: "Welcome to Pong \nPress Enter to begin",
    font: smallFont,
  }),
);

Another work around is "upscaling" the resolution of the game with pixelRatio usually working with at least a 1000 pixels in a dimension yields good results.

class Game extends Engine {
    constructor() {
      super({
        viewport: WINDOW_DIMENSIONS,
        resolution: WINDOW_RESOLUTION,
        antialiasing: false,
        pixelRatio: 4 // this scales the backing canvas by 4 but keeps the logical resolution you set (432*4 x 243*4)
      });
    }

You can also adjust quality here too, you should be able to get away with a smaller number (the font is still pretty small).

const smallFont = new Font({
  family: "PixelFont",
  size: 8,
  textAlign: TextAlign.Center,
  quality: 5
});

Finally you could try the pixel art preset, which will turn ON antialiasing but use a special shader to interpret pixel art sub pixel placements. You still need to give more pixels to work with with pixelRatio. Advantage here is you don't need to adjust quality on your text fonts anymore!

class Game extends Engine {
    constructor() {
      super({
        viewport: WINDOW_DIMENSIONS,
        resolution: WINDOW_RESOLUTION,
        pixelArt: true,
        pixelRatio: 6
      });
    }

[eonarheim]

@huyhoang160593 This is a really good question, I'm adding this to the docs :)