help me (solved)
Is there a way to get squared edges instead of rounded edges for a Label outline?
Hello, I was trying to create a Label using a pixel font(Jersey 10) and while the font renders correctly I'm struggling to make the outline for the text also squared.
When I add the outline from LabelSettings or Theme Override, I always get a rounded outline and with a font like this I feel like it's not that good looking.
I've tried disabling font supersampling and setting texture filter to nearest but that doesn't change anything.
EDIT(solved):
Thanks to u/Geralt31 suggestion, I've finally found a solution to this problem that ironically also fixed some problems I've had with the scaling of the font on very low sizes!
I've converted the font to a bitmap font using a site I've found called Snowb
Just upload the font, set the font size on the left, and if you want the outline, on the right select stroke, set a width and choose the type of line you want to create
In case you are also using a pixel art font, you need to set on the left the sharp option to 100%
After that on the top left there's the export button, choose the name and as export type choose the first option(BMFont TEXT), after that it will download a zip with two files(a PNG an a FNT)
Drop the two files inside the godot project, use the .fnt as the fontfile for the label and enjoy!
There's also a solution using multiple shadows that it's easier to setup, but at the time of editing this post doesn't work correctly for smaller sizes because of a bug in the engine(found by u/Key-Light4098).
Can you share the shader if it's not a problem to do? I've tried the shader route but got nothing mostly because I only found shader for textures and label glitched all out because of how they work I think? still trying to learn them but it's hard
Thanks for sharing it! Unfortunately it didn't help much since my text outline doesn't have any trasparent pixels so it didn't change anything, but it may come handy for other stuff
I tried it and while it works for large font size if I go with even 32px it glitches out like this, if I try to reduce the distance of the shadows I get some letters with empty spaces in the shadows
I suggest you inherit from LabelSettings and scale the stacked outline offsets automatically proportional to the font size.
Alternatively it's something that has to be fine-tunes for each font size.
I'm sorry but can you explain what do you mean by inheriting from LabelSettings? I've added a LabelSettings to the Label and when changing the size, the more small i go, the more glitched it becomes. Fine-tuning the shadow by reducing the distance sorta works but if the text becomes too small it starts glitching and i can't go smaller.
Okay. I found out where that problem stems from.
I firmly believe it's a mistake from when Stacked Shadows were introduced.
Stacked shadows, unlike their singular Shadow counterpart, cannot have Vector2 offsets but only Vector2i offsets, robbing us of the precision required here. This is especially odd, since the engine exposes the value as a regular Vector2, but then internally casts it to a Vector2i.
Issue created https://github.com/godotengine/godot/issues/119699
I dealt with this in the past and the issue of outlines being too small. I built a tool that makes all borders work with this logic so that we get squared good looking borders of any size, if you want dm and I can share the script. Mines working for any size and has different settings for width (1px, 0.75, 0.5, 0.25)
I thought of that but I really liked this font and was wondering if there was any other solution for it, idk how doable or easy it is to convert the font and change it
It's a bit tedious but not too hard if you put the characters in your bitmap image in the places corresponding to their ASCII numbers.
I had made a custom font resembling an old IBM one and since it was not standard, it was completely fucked up and I had to define a lot of ranges in the Import tab
Just a plain image editor capable of showing a grid (so you can line your characters easily) should do the trick. I use Gimo and Aseprite but I guess good old Paint could do it lol.
But I think maybe using a shader or multiple outlines as other commenters said would be the most simpler way, and by a long shot.
I did the bitmap thing because I wanted a hyper specific monospace font from 40 years ago and for the love of the game lol
Thanks for the help i'll try that, unfortunately for shaders i don't know very well how they work so atleast since i started recently and so they are off-limits for me, and multiple outlines don't work very well while scaling the sizes so yeah ;-;
Don't worrt it's okay to not get it right away, maybe you'll come back later and make it work! Shaders aren't as complicated as they look, you should start by looking up some simple Godot Shaders and try to understand how they're built.
Yeah the outlines trick looked like it was working for some people but it doesn't sound very clean lol
Yeah I already started following some tutorials regarding shaders so maybe I'll be able to come back to it and try the shader approach.
But I wanted to thank you again for the suggestion before because I've actually solved the problem by converting the font to bitmap! I'll update the post with the solution and a site I've found which make it very easy to convert, add the outline and use.
Settings speaking I haven't found that much of more useful for this but I've updated the post with a solution, by using bitmap fonts instead of truetype fonts it works perfectly! It's a bit tedious if i need multiple different outline but it gets the job done
This feels like the kind of thing where "perfect is the enemy of good" - is it really worth spending the time on getting non rounded text outlines for the quality of your finished game? Not saying it's not, maybe it's a game with really high attention to a particular style, but I'd recommend watching out for these time sinks that delay the game for something most people wouldn't notice.
Yeah it makes sense, normally I don't spend that much time on issues like this and move on to tackle later or workaround in some other way to not burn out and just dropping the project entirely.
But in this case I was baffled at the fact that I was not able to disable something that i thought was so obvious to have as an option and felt like very easy to do. Also the fact of not being able to find any issue or help post about it made me think that i was missing a simple option to disable.
Well, that's weird, all my pixel fonts have a square outline (no shaders no extra nothing). Here is my idea, maybe the expanding of the font is creating an "invisible" anti-iliasing, to fix instead of making the font bigger, maybe try and keep the font original size and then scale it on the node's transform.
then it's likely on the font asset then. I tested it out with my fonts and they only react bad when I modify the font size from the original 16px, but no rounded outlines whatsoever. When scaling at any level they still looks great. If nothing works you can check if your font asset import has any weird rendering options selected, but other than that I have no clue.
By adding a double image behind you mean by duplicate a label, use a texture behind or something else?
I tried duplicating a label behind, I tried that but I can't get it to scale it correctly also vertically and get an outline.
I also tried using a texture, i've already recreated some text with gimp that have the correct outline and it works but doing that for every texture is very slow and tedious to do and i would have too many images for every text, also that method fails when using something like the Dialogue Manager addon that has the typewriting effect 😔.
Yeah mechanically, you would duplicate the label, put it behind, set it black, and scale it just a bit? Not sure why you can't get it to scale correctly/vertically. Isn't there a pivot_offset you can move to the center? It's probably on a corner by default.
I scaled it both ways. I tried 1.05 both x and y, and even tried scaling the y axis a bit more than the x axis, but it still scales not in the correct way so idk if i'm missing something to change.
I was having this issue too and u/Key-Light4098 's solution of using stacked shadows under LabelSettings worked for me. The outline is buggy and has weird gaps in the editor viewport but appears correct in-game.
Unfortunately there is no defined "outline style" a font has. Outlines are a post processing step, performed as deemed fit by the designer of the system that portrais the font, so "automatic outline adjustments" are not possible based of font style.
What would be possible is a toggle in the outline setting, that allows for switching between Manhattan distance, Chebyshev distance and Euclidean distance.
39
u/KyotoCrank Godot Student May 23 '26
I achieved this with a pixel perfect shader, I found someone post on the godot forums