Adding a stroke/outline to a text dynamically?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
badfitz66
Prole
Posts: 29
Joined: Sat Jun 07, 2014 10:30 pm

Adding a stroke/outline to a text dynamically?

Post by 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' :x . 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!
What a wonderful caricature of intimacy
User avatar
zorg
Party member
Posts: 3436
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Adding a stroke/outline to a text dynamically?

Post by 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.
Last edited by zorg on Wed Sep 27, 2017 3:23 pm, edited 1 time in total.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.
User avatar
Marty
Citizen
Posts: 89
Joined: Mon Dec 04, 2017 1:47 am
Location: Germany

Re: Adding a stroke/outline to a text dynamically?

Post by 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. :roll:
Another way would be using the BMFont format.
Visual Studio Code TemplateRichLÖVE Mobile (AdMob+UnityAds+PlayGamesServices+GameCenter)Add me on Discord

───▄▀▀▀▄▄▄▄▄▄▄▀▀▀▄───
───█▒▒░░░░░░░░░▒▒█───
────█░░░░░░░░░█────
▄▄──█░░░▀█▀░░░█──▄▄
█░░█▀▄░░░░░░░▄▀█░░█
User avatar
Nikki
Citizen
Posts: 83
Joined: Wed Jan 25, 2017 5:42 pm

Re: Adding a stroke/outline to a text dynamically?

Post by 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.
User avatar
Jasoco
Inner party member
Posts: 3725
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: Adding a stroke/outline to a text dynamically?

Post by 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.)
User avatar
Marty
Citizen
Posts: 89
Joined: Mon Dec 04, 2017 1:47 am
Location: Germany

Re: Adding a stroke/outline to a text dynamically?

Post by Marty »

Jasoco wrote: Wed Dec 27, 2017 5:45 pm 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?
Jasoco wrote: Wed Dec 27, 2017 5:45 pm 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.
Visual Studio Code TemplateRichLÖVE Mobile (AdMob+UnityAds+PlayGamesServices+GameCenter)Add me on Discord

───▄▀▀▀▄▄▄▄▄▄▄▀▀▀▄───
───█▒▒░░░░░░░░░▒▒█───
────█░░░░░░░░░█────
▄▄──█░░░▀█▀░░░█──▄▄
█░░█▀▄░░░░░░░▄▀█░░█
Post Reply

Who is online

Users browsing this forum: No registered users and 53 guests