Distance field fonts

[henke37]

As @PrimaryFeather mentioned on #374, Starling might be getting distance field fonts as per the Valve paper.

Might as well formally track this in case @PrimaryFeather has a memory failure.

[PrimaryFeather]

Implemented with 8fc325f!

[subdan]

Hello, Daniel. Do you plan to implement the support of multi-channel signed distance field? https://github.com/Chlumsky/msdfgen http://computergraphics.stackexchange.com/questions/306/sharp-corners-with-signed-distance-fields-fonts/2151#2151

[PrimaryFeather]

Yes, I discovered this recently, and I think this would be a great addition! Especially because, if I read this correctly, it's not very much effort on the shader-side to have this added. Thanks for bringing it up, I'll definitely look into it!

[subdan]

Great to hear that!

[subdan]

Hello, Daniel. Do you have any news about support of multi-channel signed distance field?

[PrimaryFeather]

I was really busy with getting the Starling Handbook ready during the last weeks. But that's now soon going to be finished, and then I can look into this — finally! Thanks for the reminder.

[subdan]

Cool! I'll be waiting for the book and this feature.

[soimy]

@PrimaryFeather Do we have MSDF support now? I'm trying to extend this msdfgen-bmfont to generate MSDF/SDF .fnt and .png from ttf fonts.

[PrimaryFeather]

Not yet, sorry! I just added a new issue for this so that it's easier to vote for it (and so that I can't overlook it :wink:). → #994

[PrimaryFeather]

I just added support for MSDF, and it's working great! It would be great of some of you could give it a test run. :smile:

For more information, see #994.

[subdan]

Great to hear that! Thanks, Daniel. I'll try this feature and get back to you with the results.

[subdan]

Daniel, how to correctly set softness and threshold for DistanceFieldStyle? I generated msdf font and it looks very pixelated.

[PrimaryFeather]

Thanks for trying it out!

The constructor of the DistanceFieldStyle contains arguments to control softness and threshold. Have you tried a higher value for softness? (threshold is best left at 0.5).

[subdan]

Yes, I set softness to 1/distance-range and now it looks better.

[subdan]

My question is: how to calculate correct “softness” value?

[PrimaryFeather]

Actually, 1.0 / distance range should be perfect! With that set, Starling will make sure that it keeps the same crispness, no matter the scale of the object.

If you prefer it a little crisper, make that value slightly smaller (e.g. 0.75 / distance-range), otherwise bigger (e.g. 1.25 / distance range).

[subdan]

I generated Arial Regular msdf font. I want to render this font with small font size. “distanceRange” for this font = 3. But when I set softness=1/3 text looks pixelated. I set sofness to 1 and text looks better.

[PrimaryFeather]

I'd like to try that out myself! Could you tell me the exact command line arguments you used when creating that texture?

[subdan]

msdf-bmfont --reuse -o ~/Downloads/atlas.png -m 512,256 -s 42 -r 3 -p 1 -t msdf ~/Downloads/Arial.ttf -f fnt

[PrimaryFeather]

Mhm, it seems that the spread (or distance range) is sometimes a little smaller than the requested "3". I guess this is tool dependent. In any case, you can see that by looking at the texture that's created with sdf type.

In general, I recommend using a higher spread, because it gives the distance field style more pixels to work with. But either way, it seems there's a little fine-tuning involved to figure out the optimal softness value.

[soimy]

@PrimaryFeather Not sure this will help but distanceRange means range from glyphs' inside fading to outside distance (Range 0-1, glyph edge's value is 0.5). Maybe all the spread shall be distanceRange / 2 ?

[PrimaryFeather]

(Deleted previous comment, since it was wrong.)

Actually, the definition of distanceRange seems to be exactly the same as the definition of range. So in your case, a softness of 1/3 is exactly the right value — BUT only if you create the TextField with the font size you used for creating the bitmap font! (In your case: 42).

Try it out: if you create your Arial TextField with that font size (or BitmapFont.NATIVE_SIZE) it will look perfectly fine. You can even scale it up or down, the crispness will always stay correct.

But if you create a TextField with a font size of, say, 12, it will look pixelated. In that case, you need to multiply by the ratio of font size and original font size, as well. (I.e. (1.0 / 3.0) * (42.0 / 12.0).)

I wasn't aware of that myself — it seems I always tested with the native size. :wink:

[subdan]

Thanks, Daniel. This is exactly what I was looking for.

[subdan]

Hello, Daniel. I have issue with smoothing value again. I created MSDF font with default size 42. Next, I created TextField:

var tf:TextField = new TextField(300,200,"Hello");
tf.x = 30;
tf.y = 30;
tf.format = new TextFormat("Bold", 16, 0x000000,Align.LEFT);
tf.style = new DistanceFieldStyle((1.0 / 3.0) * (42.0 / 16.0));
(tf.style as DistanceFieldStyle).multiChannel = true;
addChild(tf);

The text looks blurry. Why?

[PrimaryFeather]

Have you tried just adding the TextField, without creating the style manually? Starling should figure out the perfect smoothing value automatically, and create the style behind the scenes.

Am 09.09.2017 um 12:27 schrieb Daniil Subbotin notifications@github.com:

Hello, Daniel. I have issue with smoothing value again. I created MSDF font with default size 42. Next, I created TextField:

var tf:TextField = new TextField(300,200,"Hello"); tf.x = 30; tf.y = 30; tf.format = new TextFormat("Bold", 16, 0x000000,Align.LEFT); tf.style = new DistanceFieldStyle((1.0 / 3.0) * (42.0 / 16.0)); (tf.style as DistanceFieldStyle).multiChannel = true; addChild(tf); The text looks blurry. Why?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[subdan]

var tf:TextField = new TextField(12,12,"100 000 ₽");
tf.autoSize = TextFieldAutoSize.BOTH_DIRECTIONS;
tf.format = new TextFormat("Bold", 16, 0x000000,Align.LEFT);
addChild(tf);

👎

[PrimaryFeather]

Could you please upload the font files so I can see what's going on?

Am 09.09.2017 um 12:49 schrieb Daniil Subbotin notifications@github.com:

var tf:TextField = new TextField(12,12,"100 000 ₽"); tf.autoSize = TextFieldAutoSize.BOTH_DIRECTIONS; tf.format = new TextFormat("Bold", 16, 0x000000,Align.LEFT); addChild(tf); 👎

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[subdan]

PT_Sans_Bold.zip

[soimy]

@subdan Just took a look in your bitmap font. Please update msdf-font-xml to the latest version, which is 2.3.0 for now. There will be no <distanceField> node in the generated .fnt file earlier than 2.3.0

[subdan]

@soimy How to update to 2.3.0? I used npm install msdf-bmfont-xml but msdf-bmfont --version returns 2.2.3

[soimy]

@subdan if you installed msdf-bmfont-xml globally via npm install -g msdf-bmfont-xml, you should use the following command to upgrade it:

npm update -g msdf-bmfont-xml

[subdan]

The font still looks blurry.

[PrimaryFeather]

Again, @subdan, I need the bitmap font files you created to be able to look into it.

[subdan]

@PrimaryFeather I decided to use regular bitmap fonts because Feathers doesn't support MSDF fonts.

[PrimaryFeather]

I'm sure Josh will add support for this feature in the future, though. So if you've got a minute, maybe you can still send me those font files? I'd love to find out what's going on and — if possible: fix it.

Thanks a lot in advance!

[subdan]

@PrimaryFeather Ok. I will send you the files within a day.

[subdan]

I removed all my MSDF experiments. So I started again. Now the font isn't blurry. So all is ok.

On the top — MSDF font. On the bottom — TTF Font. TTF font looks sharper.

Is it possible to enable pixel snapping for MSDF font?

fonts.zip

[PrimaryFeather]

Hm, that's interesting. When I render the distance field font you posted (with size 100), it looks like this:

Which seems just as sharp as your TTF rendering. Is there anything else going on in your demo? I don't think the problem has to do with pixelsnapping, since that's enabled by default for all TextFields (and it should not make a difference, anyway, with distance field rendering).

[soimy]

@subdan Did you render bitmap font with feathers? It seems that josh just commit a fix on that. BowlerHatLLC/feathers#1633

[subdan]

@soimy No, I didn't. I will check it tomorrow.

[subdan]

@PrimaryFeather I run my demo on iPhone Retina simulator in IntelliJ IDEA.

[subdan]

@soimy Seems that Josh didn't yet add support for MSDF fonts. The label isn't centred.

[PrimaryFeather]

@subdan Ah, the "retina" part was exactly the information I needed. Thanks, that helped me fix this problem! Please try again: a Starling TextField with a distance field font should now look just fine on a retina display.

[subdan]

Wow! Now it looks as sharp as TTF font. Thank you, Daniel!

[PrimaryFeather]

I'm happy to hear (and see) that! :smile: Thanks for the update!