Hey there,
I’m having this weird issue with DF fonts.
With the typeface I’m using, I’m getting artifacts in the created font (see the W especially)
I was able to get a better representation by modifying the default font shader a bit
Unfortunately this works only with display that have HiDpi (phones and my macbook pro). On all the other (old macbook air and macbook pro connected to an external 1080p monitor) I’m getting extremely jagged antialias.
Any idea on how to solve this?
@jhonny.goransson might have some ideas?
Do you have a repro case?
I’m experiencing similar issues using some Google Fonts e.g. Roboto Slab in the attached screen shot.
Is this something that can be fixed in Defold? Or is this an issue with those fonts?
Bumping this to say I am also getting this issue.
Google version:
Same font downloaded elsewhere:
It may be that the Google fonts are corrupted somehow (though this would be surprising). Perhaps having the two fonts available might assist in seeing if there is an issue on the Defold side.
font files.zip (185.5 KB)
Hello, no this isn’t corrupted and can be explained by taking a closer look reveals that the google font is most likely the original font which some of the glyphs are composed of multiple vector shapes. Like so:
The non-google version is simply a boolean union of the shapes creating a solid vector shape. When we bring in the original version into defold and setup the font as distance field(DF), Defold generates the DF font as a texture(s) and it does so by iterating over each of the glyphs shapes. With the highest font size of 118 defold results:
(DF texture)
(DF font result)
A fix could be to edit the font’s glyphs and boolean union the vector shapes manually before setting up the DF fonts in defold or use the non-original version that is already unioned.
Deeper Dive - notes:
I think there are actual issues with df font in Defold. Defold seems to generate the distance field texture from the generated font texture and the quality depends on the font “size” which in turn generates a certain texture size for that font. I believe there are ways to greatly improve this.
As Valve highlighted their technique in a paper from Siggraph 2007:
If we are able to generate the distance field texture from a temporary high resolution texture (discard the high res texture) then scale down the distance field texture using bicubic resampling we can get more low cost df texture and use that with a font texture that is independent from the df resolution and gain better quality & performance with the end results.
I see opportunity here to use valves technique using signed distance field in defold with more than just fonts if a shader was made for this and the developer provides their own textures and uses a quad to draw to for 2d or 3d model to take advantage of the sampler texture slots.
For testing purposes I created my own textures if anyone is interested.
question:
Quick look in the distance field fragment program seems to reference “SDF” ( Signed Distance Field )
But is defold using “signed” values? Both positive and negative values encoded in distance field? imagine crispy solid outlines.
Thanks for the excellent writeup, @MasterMind.
I opened a GitHub issue and linked to your post.
Thanks, it helped me:)
If you choose to edit the font to make it work with Defold, it’s less tricky than you might think. There is a handy function for this in FontForge, which is open source:
Just select all glyphs and choose Element > Overlap > Remove Overlap.
Before:
After:
Thanks for the solution!
It works, however partially.
After removing overlaps some glyphs remained broken in the output font texture.
The solution is to convert a glyph to a vector shape by:
Edit → Unlink reference
And only then do Element > Overlap > Remove Overlap
