Creating custom styled fonts with msdf-bmfont-xml and distancefieldstyle

neomarine

Quick question. Anyone know if/how starling distancefieldstyle can use this style of output?

https://raw.githubusercontent.com/soimy/msdf-bmfont-xml/master/assets/atlas.1.jpg

I've already successfully been using distance field fonts, by first creating a font using this:
https://github.com/soimy/msdf-bmfont-xml#install-as-cli

However, now I want more than just a simple font. I want to add borders, effects and such on top. I'm not sure if starling would work with that though. I noticed DistanceFieldStyle does have "setupOutline()" and "setupGlow()" etc. but I was hoping to style my fonts on the atlas image directly?

Daniel

Anyone know if/how starling distancefieldstyle can use this style of output?

Yes, that's possible! When using msdf-bmfont-xml, you'll end up with one PNG texture and several FNT files. Enqueue all of them via the AssetManager, and you're good to go.

I noticed DistanceFieldStyle does have "setupOutline()" and "setupGlow()" etc. but I was hoping to style my fonts on the atlas image directly?

The advantage of Distance field fonts is exactly that you can add those effects at runtime, without any noteworthy strain on the CPU. And you can use the fonts in all sizes, which is a big plus.

However, those effects are of course a little limited. If you want to bake in drop shadow, outline, etc., you are going to have to use a standard bitmap font (no distance field). Then you're going to lose the scaling advantage, though (you'll need one font per size). Glyph Designer is one tool that's good at adding such effects, bmGlyph and Littera are others.

Furthermore, I think msdf-bmfont-xml allows you to add those effects manually via (say) PhotoShop, but I haven't tried that myself. (I could imagine it's tricky to make all glyphs staying within their boundaries.)

Does that answer your question?

neomarine

Hi Daniel,

Thank you, it does mostly answer my question but I am unsure about one thing. Are you saying that, adding your own graphics layered on top of the distance field font (e.g. making a golden font with border and glow in photoshop), means you need to add in different scales of the font as it won't scale automatically? I really want just one font file for all sizes - perhaps I should just make use of the setOutline etc. styles you've provided that in case.

Daniel

Are you saying that, adding your own graphics layered on top of the distance field font (e.g. making a golden font with border and glow in photoshop), means you need to add in different scales of the font as it won't scale automatically?

When you add your own graphics to it, it's no longer a distance field font. A distance field font means that the texture encodes, in each pixel, the distance to the closest edge of the glyph, and the distance field style uses this information to render them sharp at any size.

If you overlay some other graphics, that can't be encoded in distance field style any more. That will be a standard bitmap font, and that was what I meant. Bitmap fonts can be scaled, too, in theory. However, very often, this means that the font will become quite blurry or pixelated. I recommend you simply try it out — it also depends on the actual font to some extent!

neomarine

Thank you, that explains it!

I do have 2 more questions.

1) From looking at the documentation, it mentions how to use DistanceFieldStyle for images by creating a new DistanceFieldStyle (http://manual.starling-framework.org/en/#_distance_field_rendering)

However, I cannot find information on how to specify to a textfield that I want it to have a glow, or outline, etc... at the moment I am doing this but perhaps there's a more optimal way?

var textField:TextField = new TextField(...);
var style:* = textField.style;
if (style.hasOwnProperty('setupOutline')){
    style.setupOutline(...);
}

2) Also - I cannot work out how to get "thick" outlines. Even switching to a glow, it's the same thickness. I've tried playing around with the settings. At best I can get a thin outline around text. I have a hunch this may be something to do with how my starling setup works. I have a sprite which contains the entire apps contents, and I then "scale up" everything to fit the device size. Is there a way to pass a scale setting to the text fields mode perhaps?