Multichannel Distance Field Fonts

[PrimaryFeather]

Multichannel Distance Field rendering uses three channels instead of just one in order to provide a better result. It would be useful to have Starling support that.

References:

• https://github.com/Chlumsky/msdfgen
• http://computergraphics.stackexchange.com/questions/306/sharp-corners-with-signed-distance-fields-fonts/2151
• https://github.com/Jam3/msdf-bmfont

[soimy]

Happy to announce the new npm module msdf-bmfont-xml It is much more usable than the old one mentioned before including:

• can generate starling compatible .fnt file
• use a much efficient packing algorithm same as TexturePacker

[PrimaryFeather]

Awesome, thanks!!! I'll try to squeeze that into Starling as soon as possible, promised. :smile:

BTW, quick question: is there a flag in the XML file that tells me that this is a multichannel distance field?

If there is no such standard yet, I'd suggest we add the flag "type" to the info element, like this:

<font>
    <info face="Arial" type="MultiChannelDistanceField" .../>
</font>

Type could be one of the following:

• Standard (can be omitted)
• SDF (signed distance field)
• MSDF (multi-channel signed distance field)

That's just a suggestion, of course, and I don't know if there's already a standard used by other tools. If not, we could just set the standard. :smile:

In any case, this would help Starling know how to render the font, without any manual setup code required by the developer.

[soimy]

There is no such flag in the definition of BMFont .fnt file. It's easy to implement, just few line of code 😄 .... and done. because this module is for signed-distance field only, so type flags are msdf sdf psdf

[soimy]

msdf-bmfont-xml is evolving Now it has a very accessible CLI interface:

And also added some very useful feature:

• Multi-font packing.
• svg packing for future editing.
• packer smart sizing

[PrimaryFeather]

I just added a new property to the DistanceFieldStyle: multiChannel. When you enable this property, the style can make use of multi-channel distance field textures! :smile:

That should work great with your fonts, too! For now, the style has to be applied manually, though. I'm looking into ways of automating this.

[PrimaryFeather]

I just noticed that you already added the "type" attribute. Thanks a lot for that! :smile:

Your tool really works great, and it's very easy to use! I especially like the idea of adding multiple fonts together via the config files. A fantastic idea!!

Here's a sample rendering of the standard Georgia.ttf font with the updated style.

I used the following arguments to create the texture:

 msdf-bmfont -o Georgia.png Georgia.ttf

In most areas, that rendering looks great — a massive improvement over monochrome DFs, especially considering the small texture size (in this case, it's just using two thirds of a 512x256 texture).

There are some small problems around the "o" circles, though. Do you see that? On the right side of the last word ("so") and in the dot of the exclamation mark.

Could that be a problem in my rendering, or is this an artefact produced by msdf? I also saw this in the Ubuntu font.

[soimy]

Because multi-channel distance field is generated from vector shape and is very sensitive to shape error ( which is common issue on free online font ) I implemented point and curve segment tolerance to minimize the artifacts ( Issue soimy/msdf-bmfont-xml#1 ). The problem segment in 'O' might be a side-effect of the tolerance. I'm finding a better way to balance that ( Maybe expose tolerance value argument in CLI, or use a modified msdfgen. Anyway, gonna be fixed soon, stay tuned.

[soimy]

@PrimaryFeather Here is the test render of the new DistanceFieldStype and also:

[PrimaryFeather]

Thanks a lot for the additional information, and for trying out the updated style! That rendering looks fantastic. I'm really impressed by the results from the multi-channeld distance fields — it's amazing to get such crisp output from those small, funny-looking textures. :wink:

[soimy]

@jimmymjing yes, you should use utf-8 charset file. check out this for samples.

[jimmymjing]

Thanks so much! It works perfectly.

[jimmymjing]

There are some places that I would use small font size.. like 14 - 16px. But it turns out quite jagged on the edge of each letter.. Are there any parameters that I could twist? Thanks!

[PrimaryFeather]

In my tests, scaling to small sizes worked surprisingly well! See here, that's both the same font:

Some things come to my mind:

• be sure to create the texture without mipmaps.
• Use a higher value for "distance range" (also called "spread").

[soimy]

@jimmymjing it's not recommended to use font size smaller than 32 for msdf output. You will find many collision on distanceRange spread over the stroke (especially some complex gylphs like chinese characters). If you really want smaller output size, try reduce distanceRange a little bit.

[PrimaryFeather]

(For reference, my two samples used the DF-bitmap-font created with a size of 42 points, and then scaled down in Starling.)

[Maligan]

Shen Yiming & Daniel - huge thanks! This is really great feature!