text component shows text pixlated

[peratik]

loadFont('roboto-bold', './Roboto-Bold.ttf');
text(value.toString(), {
   align: 'center',
   size: 18,
   font: 'roboto-bold',
   width: 36,
})

Hi, It is not sharp and pixelated, How can fix it?

[slmjkdbtl]

Can you try

loadFont('roboto-bold', './Roboto-Bold.ttf', { filter: "linear" });

to see if it's better?

[peratik]

With linear filter it is still pixelated.

[p2edwards]

It looks like the text is at least as sharp as the surrounding graphics (the rounded rectangles)

• Are you wanting the text to be sharper than the canvas it's rendering into?
• or are you trying to achieve something more subtle, like better font hinting, or subpixel font rendering?

I think there are 2 ways to get better text rendering than the screenshot:

1. Increase canvas resolution
   • This might affect performance, or require changes to how you're doing other graphics
2. Render text as native DOM nodes "in front of" the scaled canvas element.
   • This will look as good as any other text in the browser, but you won't be able to render game things in front of the text. And as far as I know, there's no built-in way to do this in Kaboom.

[peratik]

How can we increase canvas resolution?

[slmjkdbtl]

You can try increasing pixelDensity

kaboom({
    pixelDensity: 2,
})

You can get your current pixelDensity by window.devicePixelRatio, and try some higher value (higher value will cost performance)

[slmjkdbtl]

For all non-bitmap fonts kaboom uses canvas 2d context to render to a texture, using a fixed font size of 64, it might be a good idea to make it customizable so you can render the font to a larger / smaller size so it works better for scaling like

loadFont('roboto-bold', './Roboto-Bold.ttf', { size: 120 }); // just an idea, not implemented yet

[peratik]

pixelDensity solutions works. thank you.

size: 120 is not available in the current Kaboom release, it would be great to have it.