Bitmap pixel fonts appear blurry in-game (DEF-3855) (SOLVED)

To achieve pixel-perfect text, I take a bitmap font and set its material to use nearest texture filtering:


I apply the same sampler to the label’s material as well.

This technique worked fine in earlier versions of Defold. However, in the latest version, the fonts render crisply in the editor but appear blurry in the actual build (on Windows & Android):

Do you have shadow blir size and/or outline width set to something other than zero?

Using these font settings:

I have noticed that bitmap fonts are quite buggy myself.

Font settings - file

2019-03-09%2000_04_16-Window

Font settings - in gui

2019-03-09%2000_06_12-Window

Editor

2019-03-09%2000_04_02-Window

In game

2019-03-09%2000_05_10-Window

So the font doesn’t have any outline attribute but it clearly have a red outline.


Changing outline alpha to 0 on the gui text node is the only way to get rid of it.

Font settings - in gui

2019-03-09%2000_06_24-Window

Editor

2019-03-09%2000_06_33-Window

In game

2019-03-09%2000_06_50-Window

1 Like

I have had good results with BMFont for generating and using bitmap fonts BMFont example + notes

1.2.155 fixed the issue :slight_smile:

6 Likes

hi!

Reviving this topic to see what is the best way to get sharp text even at small sizes in GUI nodes. Currently I am using a large font size and scaling to 0.5 in the GUI.

How small is small? If you’re using a really tiny size there’s obviously not going to be that many pixels to play with. Are you using a distance field font or bitmap font? Do you need to use the same font in many sizes or can you optimise a version of the font for the small size?


I did a quick analysis of the difference between size 40 text and size 80 text at scale 0.5. It is notable (the video has automatically zoomed in, but the difference is noticeable to my eyes)

I am looking for standard text size- something like 11 or 12.

I am getting cache width errors, too.

I will be using the same font, but in 3 sizes.

I am currently using font.material, bitmap, single layer.

Hi Josh,
I really do hate to revive an old and dusty thread like this but I have to know, did you solve this? I’m currently struggling with making my size 11 font not look as blurry as the real world does to me without my glasses :sweat_smile:

Sorry for necroposting, but this seems unresolved to date, so I thought it was relevant.

P.S.
Where I’m at right now is the only way I can find to render my pixel font (font with chars made of pixels) without it showing blurry in the game is to render it as distancefield at size 50 and scale it way down until it looks close enough to 11pt. This is obviously not ideal, and not performant either, but I’ve spent some good time exhausting all logical alternatives and reading various threads on this forum (as well as the beautiful defold docs and manuals of course). Rendering at 11pt as bitmap with font.material shows as blurry. I’ve tried all materials, AA and not, linear and nearest, and all combinations thereinbetween, but still no luck besides the ugly method of just rendering it big as the sky and scaling it down in usage.

Do you have a font we can test with?

My fonts are looking pretty crispy right now :blush: (please excuse the motion blur, they really are looking pretty good, just not in these screenshots :rofl:)




3 Likes

I use the following settings:

FONT:
material: fonts/font.material
Output format: bitmap

LABEL:
Material: fonts/label.material

3 Likes

Love it!!!