How do I make text not blurry?

Hi all!

No matter what I try all my text, using regular fonts or pixel fonts, appears blurry.

My goal is to achieve sharp, pixel-perfect fonts without having to use a spritefont (as spritefonts create difficulties for localization)

Here is a sample project that shows the issue: https://drive.google.com/file/d/1r-j06HFiHY99fAxrN6ZRIkneiEUyzIhp/view?usp=sharing

The problem is most apparent if you full-screen it while running.

Any advice would be greatly appreciated.

Thank you!

The best you can do is use the alpha clamp effect on the text. Otherwise you need to use a spritefont.

The blurriness is do how the browser antialiases all text which you can’t disable on most browsers. You can disable it with some css on Mac and iOS devices but it will still be blurry with anything else

Ah ok. So does C3 have this issue because it's browser-based?

Other engines like Unity and Game Maker don't seem to have this problem so that would make sense.

Browser based engines usually utilize what the browser provides to do things. For example the browser provides a way to draw text so they use that, which works fine other than not being able to disable antialiasing for low res games.

You can bypass the browser text rendering and do it directly. It involves rasterizing the text directly from the font files onto a texture. Since it’s a pain to do that a library such as freetype is used.

Anyways, overall it’s a lot of work just to add the ability to disable antialiasing.

Easier to just use a spritefont I’d say.

I use html boxes for my texts, so no matter the project resolution or setting you get a sharp clear text in all sizes. It might be a little trickier to place them if you need them embedded in the scene, but it's doable with the new html layering feature.

When I download and use custom fonts, the page usually says what px size it supports and I use those sizes and it looks good.

But if you want perfect rendering you have to set fullscreen quality to high.

Headbang Games do you mean you are using browser text rendering or composing letters from boxes used as pixels?

If browser rendering, across all browsers it seems difficult to turn off 'font-smoothing'.

I think I understand the problem better, the issue is with how C3 implements the text object and how it is blitted to a lower resolution canvas.

I think HBG means to use HTML rendered canvas separate from c3 canvas (e.g. using C3 HTML layers) to render at screen resolution to get a sharp effect. I've tried a quick experiment and talked with the OP about this and they are doing experiments. They are also using High quality scaling.

Yes, browser rendered separated html object, it also allows for more types of css styling, like shadows and backgrounds. In the not so distant past it was also the only way to get outlines and RTL support, but that's been added to the text object as well.

Thanks for the tips all! I was able to make things look much sharper.