Rendering pixel font with pixel-perfect clarity

[Griffin]

Hi, I want to start by acknowledging that this is hardly the first thread on this forum regarding font issues, but I’ve read through all other threads and none seem to have definitive conclusive answers or solutions.
With that out of the way, behold, a pile of font screenshots, how entertaining:

This is a TTF font file I am trying to use. It is a pixel font which is supposed to look pixelated and blocky in use.
The problem is it shows as blurry in both editor and in the result:
editor

result

I want this font to render at an 11pt font size. Considering this is a pixel font and a small, static font size is needed, it seems like no question that what I’m after is a simple bitmap render. Unfortunately, that doesn’t work out as hoped.
With setting set as font.material like so:

I am presented with the following in engine and rendered in the preview:

Needless to say, neither of these are near the expected result. The actual rendered output is blurry AND seemingly uses a linear rendering filter because there is gray bleeding off around the edges. I was very surprised to see that this was not a result of accidentally having turned AA on.

I have tried making my own font material in the hopes it might help:

But alas it does not.
When I apply that material to the font, there is no rendered output to the game at all.

I hope you enjoyed that black, textless image more than I did.

The only method I’ve found that gives me something pseudo-presentable is the following inelegant solution which I am less than pleased to share as the temporary stopgap I’ve had to resort to:

That was a joke, but only somewhat And yes, I crashed my Defold in order to make that joke. I hope at least one person found it slightly amusing
I have set my font size to 50 and scaled all of my labels down 4.54 times in order for it to be the right size.

This is not ideal but it technically does the job of putting the text on screen which is all I truly need to accomplish.

I presume I am missing an obvious clue, but after this much time spent browsing the forums and docs trying to find that clue, I am all for naught. If you have any advice or perhaps even know the clue yourself and are inclined to share, I would be most thankful and appreciative.

Thank you for your readership.
-grify :)

[anon95708182]

I guess the font size of 11 pixels (the size setting is in pixels, not points, according to the manual) is just too small to not look blurred in the editor.
I too set my pixel fonts to a fairly large size and then scale down. The larger, the crisper I found.
Here is a short test with one of them:
first text: font set to 200, scale 0.05
second text: font set to 50, scale 0.2

[Mathias_Westerdahl]

I think it’s important to remember that a .ttf file isn’t rasterized.
We need to rasterise it in order to put it into a texture.
This process can be done in different ways (I think Photoshop uses e.g. None, Crisp and Smooth), and they all have different drawbacks. I think we could probably see if there are some settings (other than AA) that we could add to it. However, they all are based on the same approach, to approximate curves into a grid, and using some values to determine the radius and brightness threshold.

Another option is ofc to use actual bitmap fonts (e.g. generated with tools like Bitmap Font Generator)

[Griffin]

@anon95708182

I guess the font size of 11 pixels (the size setting is in pixels, not points, according to the manual) is just too small to not look blurred in the editor.

I don’t mind much how it looks in the editor so long as the final rendered output is usable and not blurry

@anon95708182

first text: font set to 200, scale 0.05

Rendering at size 200 seems inefficient and resource intensive, based on my understanding of how Defold builds font mapping files.

@Mathias_Westerdahl

Another option is ofc to use actual bitmap fonts (e.g. generated with tools like Bitmap Font Generator)

Pardon, but would you mind elaborating as to the first option and how I’d implement it?
As for the second option, this special format for generating BMF fonts from ttf/otf files seems quite difficult to access for me as a mac user unable to run the program.
I also know that a significant portion of Defold developers use macs too, so I can’t imagine the only recommended solution to render non-blurry fonts is to use windows.

Inanycase thank you for your help thusfar!

[Pkeod]

+1 to use BMFont for pixel fonts.

BMFont example + notes

BMFont example This shows general setup for using BMFont generated fonts. http://www.angelcode.com/products/bmfont/ You must make sure the exported texture is large enough to fit all glyphs as Defold doesn’t support paged textures for fonts. Also check to see how much extra space you have in your texture and pick a smaller size. The width/height should be powers of 2, but they do not have to be an even size. You could have a texture 1024x256 for example. If you change the texture of the bm…

as a mac

You have a lot of options on how you can VM Windows apps.

CrossOver runs the Windows software you need on Mac, Linux and ChromeOS.

For example is one I used to use.

They give you a trial so you can see if it works for you.

[britzl]

I have a low-rez game template that I’ve used a few times and it works well to show a crisp pixel perfect font:

320x568

160x282

80x142

In my experience it boils down to using a good font and then thinking about how it is rendered (disable anti-alias and set texture filtering (in game.project Graphics) to nearest).

[Griffin]

Thanks for your response! I will take a look. Maybe it is possible I was just using a poorly made or low quality font file. I will try with more.

I am downloaded and opening this here project right now!

some notes about this project’s font:
font size 8 (wow very very small! i’d assume the resolution of the pixel font itself must be exactly that to match, or something else)
Bitmap single layer and default font.material, all of these are predictable traits

Why does it still look blurry in the editor? This MUST be a defold bug, probably rendering the preview of the font atlas image with AA:ing by default in the editor view irrespective of whether the specific font selected AA or not, or perhaps or something like that.

your custom renderscript does not seem to touch the fonts, nothing relevant to be gleaned there (but many unrelated interesting things).

as a side note why is exactly 1 string in the entire Defold game engine localized (Tabellen saknar innehåll) and all the other strings are english only, that stands out as peculiar to me?

and oh wow, it is so immaculately crisp without crazy big font atlas lagging down the project! Amazing! I am going to exfiltrate this ttf and font file to see if there is something else I am missing or if it is indeed probably just a bad font file I am dealing with

The above label node has TWO SIZE ATTRIBUTES? this is a bug right?

But it worked! Such an incredibly crisp and beautiful and performant font! A thousand thanks to Britzl!

For anyone who has come upon this thread with a similar problem, here are the files you can add it direct to your Defold project for a simple, crisp, performant pixel font:

click to download:
the raw font file
the defold .font file (although mixed results on whether these are truly plug-n-play)

[britzl]

@Griffin

Why does it still look blurry in the editor? This MUST be a defold bug, probably rendering the preview of the font atlas image with AA:ing by default in the editor view irrespective of whether the specific font selected AA or not, or perhaps or something like that.

I would guess that the editor always uses “linear” instead of “nearest”. But I’m not 100% sure.

@Griffin

as a side note why is exactly 1 string in the entire Defold game engine localized (Tabellen saknar innehåll) and all the other strings are english only, that stands out as peculiar to me?

Ha, that’s funny! I wonder if that “Tabellen saknar innehåll” is a text coming from JavaFX when the table is empty? Maybe @vlaaad knows?

@Griffin

The above label node has TWO SIZE ATTRIBUTES? this is a bug right?

Yes. But I believe that is a bug in the version of the editor you are using. Are you using the latest version?

@Griffin

For anyone who has come upon this thread with a similar problem, I am going to hope that this is an openly licensed font

Yes, it is a freeware font: https://github.com/britzl/lowrezjam-template#fonts

I found it at DaFont:

https://www.dafont.com/04b-03.font

There are more similar fonts as well. Also here: 04 | extra | bitmap

[vlaaad]

@Griffin

why is exactly 1 string in the entire Defold game engine localized (Tabellen saknar innehåll)

We tried really hard to keep the editor unlocalized (English-only), sorry that we failed
On a more serious note, it’s a default placeholder text coming from a JavaFX UI framework that the editor uses.

[Griffin]

@britzl

I would guess that the editor always uses “linear” instead of “nearest”. But I’m not 100% sure.

Why doesn’t it mirror the game.project’s default texture filter setting?

@britzl

Yes, it is a freeware font:

Thank you for clarifying, I’ve amended my post

@britzl

Are you using the latest version?

I’m in the middle of a jam so I didn’t want to upgrade and risk breaking something while the time to fix it would come at the cost of harm to my team

@vlaaad

We tried really hard to keep the editor unlocalized

Why? Isn’t localization good? It’s just a crowdin and some jsons, the only labor-intensive part on your side would be id:ing the current strings in the client.
If Defold forum is going to cater to new language posts like Russian and Chinese and Spanish etc for those who aren’t good with English but only having english in the editor seems like inconsistent internal policy.

[britzl]

@Griffin

seems like inconsistent internal policy.

There is no internal policy saying that we shouldn’t localize the editor. BUT when the editor was created, and for some reason I’m not aware of, no effort was made to ensure that it was going to be easy to localize it. If you take a look at the editor source code you’ll find hardcoded strings all over, so it will take some effort to prepare it for localization, and so far we haven’t prioritized it.