How do I fix this problem with the text outline?

Hi,

I'm using a Google font in my project (DynaPuff), on which I apply an outline. My set text action looks like this:

"[linethickness=10][outlineback=#af4d7a]"&"Level up!"&"[/outline][/linethickness]"

As you can see on the image, I have quite a few artifacts on some of the letters. Not on each of them but on some of them.

I checked and this problem also arises on the default Arial font, on A, v and V

Is there a way to fix these artifacts? Is it because of the font, or is it a way to have that outline displayed properly?

Thank you for your help!

github.com/Scirra/Construct-bugs/issues/7684

Workaround is to reduce the line thickness to 5!

Thanks a lot for the reply, it's very useful.

Sadly, it seems this will never be fixed. I'll either stick with the problem or reduce the outline thickness to 5.

If you only have a limited amount of text like that you could just pre-draw the text to images. I'm sure there are programs with font rasterizers that don't glitch like the one in some browsers.

If your text can be a lot of different things you could instead try using a spritefont to do it. To do the outline you'd have two spritefonts, one for the outline, and one for the normal text. You'd just draw the outline first and place the text over it.

Here's a test of that idea. I didn't use a generator that is easily adaptable to the spritefont object, but it's simple enough to use a tilebg to draw it char by char. There is some tighter kernelling in the json, but I didn't bother with that. The outline width is baked at 10px.

dropbox.com/scl/fi/lzm4uaui3n7vs34tqt08v/tiledbg_based_text_with_outline.c3p

As an exercise you can make the text scalable. You just need to multiply most values by a scale number. However, that would change the outline width as well.

You could also extend the idea by using an sdf spritefont. There is a threshold effect that could be used to convert the sdf to crisp letters. Also, you could use the same sdf to draw outlines with dynamic widths. You'd have to test to see if that effect is up for the job.

I'm sure there are programs with font rasterizers that don't glitch like the one in some browsers.

Funny enough the same issue can be observed even in Adobe Illustrator. Illustrator has some settings in regards to how to render the outline corners, which mitigates the issue pretty well. I wonder if that can be applied to Construct too.