Adding a stroke/outline to a text dynamically?

[badfitz66]

I'm making a text adventure framework and one of the problems I'm having is the text being hard to read on certain backgrounds (unless you set it's color to something that won't be easily obscured. This usually ends up with the text looking ugly (eg: lime green text))

I've tried getting outline shaders but they are usually ONLY for images and don't work well with fonts. (one I've used specifically is the 'Let it glow!' blog post).

I've asked on the subreddit and got told to either:

use a distance map
get a font with an outline 'baked' in (I don't want to really do this)
put a higher font size version of the text behind the main part of the text to create an outline (doesn't always fit perfectly)

Another place I asked just gave my an entire shader from Unity3D and went 'convert it to 2d' . I have a less-than-rudimentary understanding of shaders so I had no idea what to do with it so I'm not really looking for a shader to 'port' into Love2D.

If anyone could show me how I can do this, that would great!

[zorg]

You probably mean distance field, not distance map, as seen at the below link:
https://github.com/libgdx/libgdx/wiki/D ... an-outline

It would still mean that you'd need to use a shader though, but this seems like the best approach.

[Marty]

@badfitz66 did you come up with anything? I'm curious if there is a good solution for TTF.

So far, I avoid the problem by using image fonts.
Another way would be using the BMFont format.

[Nikki]

You could just render the text twice, once in black for example and on top of that in white, when you draw that top one just offset it slightly.

You dont get outlines this way, but it'll be much better readable.

[Jasoco]

With image fonts it's just easier to make a separate font with the outline as part of it. And remember that it can be colored the same way other images are including with a shader. So you could write a shader that replaces the text color with whatever and the outline with another color if you need to.

Or you could make two fonts. One that's just the outline and another that's the font with all the characters placed exactly where they would be on the template so when you draw both on top of each other they line up. Then you just colorize each print call separately.

For TTF I'd say the only easy way is just to use a shader that adds an outline. Unless you have access to font making tools in which case you can make your own in two versions to use the method I mentioned above about making a separate border font. But that's the much more difficult way. Probably just easier to use image fonts or stick to simple shadows.

An alternative would be to print the text 9 times, the first 8 being different offsets in a square shape using a solid shadow color and the final one being in the color of the text itself. I've done this before for image fonts back before Löve could change the character spacing for image fonts. (Since I wanted my text to be close to each other with no spacing but image fonts could only have a fixed set amount of one pixel between each character. Now you can set it manually, including negative so they overlap if you need to.)

[Marty]

For TTF I'd say the only easy way is just to use a shader that adds an outline.

Wow simple, ofc. Simply drawing the text on a canvas and using an outline shader does the trick, indeed. How I could not think about this?

An alternative would be to print the text 9 times, the first 8 being different offsets in a square shape using a solid shadow color and the final one being in the color of the text itself. I've done this before for image fonts back before Löve could change the character spacing for image fonts. (Since I wanted my text to be close to each other with no spacing but image fonts could only have a fixed set amount of one pixel between each character. Now you can set it manually, including negative so they overlap if you need to.)

I love how people sometimes trick the system to get the desired result. Performance-wise not optimal and also dirty, but it got the job done with the desired result, neat.