Advertisement

Bmfont outlined fonts

Started by September 21, 2013 12:16 PM
6 comments, last by Melons 10 years, 4 months ago

Hi. Love BMfont. And not just because it has my initials in it. But really, the packing, the options, the using any installed system font, it does just about everything. But today I found something it does not do, Soft outlines/shadows.

I was thinking that it could be done with just a simple blur function applied to the outline (Alpha layer?) only. Directional shadows would be done by applying the blur function in just one direction only, ie a 3x3 sample matrix of:


0.25 0.25 0
0.25 0.25 0
0    0    0

Should produce a nice down and to the right shadow effect.

I spent today researching AAA games GUI's and it seems a large majority of the text is now soft directional shadowed. Same in subtitled videos. Straight outlines are sometimes used but just don't seem to look as good.

Here is an example of what the result might look like: (Taken from inside my game engine)

UWoh6e5.png

The top is outlines as provided by BMfont at 4x super sample and 2 pixel outline

The middle is the alpha layer shifted one pixel down and to the right.

the bottom is with an addition 1 radius box filter applied in photoshop.

I'll also note there is a small bug in that outlines overlap other characters white areas. (the op in chop and wn in down) Without doing some annoying render to texture with additive color and alpha first for every single bit of text you want to draw, its near impossible to fix that when using thicker outlines on small fonts (Add 1 pixel per outline thickness would work, but then font spacing is increased). However the directional shadow thins the outline where it would of overlapped as long as you draw the letters in a left to right order.

<edit> I guess the best way to render outlines would be two passes: Render outline on first pass, then render text afterwards.

I guess I could edit all my font files myself to get the same effect, but one of the things I love about BMfont is it produces output that I can use right away in my engine, I can even provide the config files and let my games users/modders make there own font. Telling them to do a bunch of stuff in photoshop to tweak the outlines would kind of suck IMO. I would also love to get BMfont producing a font per user resolution automatically, Scaling fonts up or down too much is ugly, 1:1 pixel fonts look so much better.

So yea. Basically what I am asking for is the following:

X/Y pixel offset of outline, and a configurable blur function for outlines only. (maybe just running a simple blur matrix of user determined size? I am not too picky about how configurable the blur is).

Lead Coder/Game Designer for Brutal Nature: http://BrutalNature.com

Thanks for the compliments.

I'll see if I can steal away some time from the AngelScript development to add these enhancements to BMFont. They have been on my to-do list for way too long already anyway.

AngelCode.com - game development and more - Reference DB - game developer references
AngelScript - free scripting library - BMFont - free bitmap font generator - Tower - free puzzle game

Advertisement

Awesome. Hate to pull you away from Angelscript, But its for a good cause. Amazing to see BMFont still being worked on, I remember using it back in 2007. Ported most of my code from then to my current project and it is still worked great.

Its so much better then the naive approach of "Lets just make a 8x8 grid of 256 characters!" especially once you consider how much overdraw it saves and how tedious that is to try new fonts without BMFont. Proper kerning and everything is just icing on the cake. Makes my font rendering feel so professional and as I am learning, good UI should be a huge priority in gamedev.

Letting my users try new fonts (There is always someone who hates whatever font you select it seems) and being able to generate dozens of alternatives easily is just great.

Lead Coder/Game Designer for Brutal Nature: http://BrutalNature.com

Showed off the shadow outlines to a few people. "Too much shadow" (I am not sure how to do 1.5 pixels of outline/offset and 1 pixel wouldn't shift without leaving gaps. Maybe 1 pixel with the right directional blur filter?) and "try more transparent/softer shadow and/or grey shadow" came up.

So, fine control over the exact thickness/blur of the shadow and ability to change the boarder/shadow color would be nice. I guess I could do the color change on load however if you don't want to add color options.

I am also not sure if this is the correct way of doing shadow + outline. Kind of thinking that you would want to shift the glyph to make the shadow instead of using outline as my current method makes some areas rather fat when they shouldn't be.

Of course, for in game use one would usually want 1 pixel~ outline and shadow.

I can see why you have put it off. So many little decisions to make and desire to research just exactly how to do it best. Its not as simple as I thought when you want really good results.

Lead Coder/Game Designer for Brutal Nature: http://BrutalNature.com

Did some more testing. And yes offsetting the glyph and then blurring that and adding it to the outline alpha (if existing) works MUCH better.

sJ7W6vE.png

Top 3 are as above, 4th is with a 1 pixel offset and 1 pixel Gaussian blur. 5th is with the previous images contrast increased and then another 1 pixel Gaussian blur added.

Lead Coder/Game Designer for Brutal Nature: http://BrutalNature.com

Hey, any chance this could still make it into BMFonts as an alternative to Outline? Would be super handy! ^^

Advertisement

The chance is there. :)

It is much greater now that the source code is open too, since others may contribute enhancements if they wish.

I'm having a hard time finding time to spend on implementing new features for BMFont myself, but if someone contributes a patch I'll definitely set aside some time for incorporating it into the tool.

AngelCode.com - game development and more - Reference DB - game developer references
AngelScript - free scripting library - BMFont - free bitmap font generator - Tower - free puzzle game

Well, if someone could point me towards which files I'd probably need to be working with I might be able to get some helping hands to get it done. ^^

This topic is closed to new replies.

Advertisement