What is the "trick" for making text labels look not horrible when rotated?

Help
,
1

Godot Version

4.6.3

Question

I am making a card game, which dictates two things:

  1. Text will sometimes need to be rotated.
  2. Text will sometimes be generated by code. This means no static prerendering as an image.

With several (TTF) fonts, I have tried everything that the documentation suggests:

  1. Turning antialiasing on or off.
  2. Generating mipmaps before the game starts.
  3. Turning MSDF on or off.
  4. Turning hinting on or off.
  5. Using an extra bold font with few details.
    However, no matter what I do, the end result is the same:
    image
    Note how the two capital “S” look completely different from each other and awful.

Since Godot 4 supposedly has very good 2D text rendering support, I am certain that the problem is with me and not with the engine, but I can not for the life of me figure out how to do this simple thing. Any tips would be appreciated.

Edit: Actually, I see (a less severe version of) this problem even on labels with rotation 0. No matter which font I use, no matter which options, letters are distorted and/or pixelated even though they are scaled up from a vector font. How can this be?

Edit: This happens on a monitor whose native resolution is equal to the resolution of the viewport. It is less noticeable, but still there, on a monitor with double the viewport’s resolution.

2

Text rendering uses a lot of tricks and optimizations to render crisp text but the moment you rotate it all those tricks and optimizations become useless. Enabling MSDF should help a bit but I don’t think those issues are entirely avoidable and, depending on the font, some glyphs may not render correctly.

3

Well, existing games somehow manage to do it, so clearly it is not impossible. To cite just the most famous example, Slay the Spire 2 is built in Godot, and it clearly has this exact feature.

Is it possible to render pieces of text into an image at runtime and then have that drawn onto the canvas? And would that even help?

4

Steps to create this:

image
image508Ă—434 50.5 KB

  1. I used Inkscape to convert the letters I need from this CC0 TrueType Font by GGBotNet to SVG
  2. I used Scalable Vector Shapes 2D to import the SVG file as Polygon2D nodes
  3. I made a dedicated scene for each letter and some scripting did the rest.
  4. You can delete the plugin from your addons directory once you have all the Polygon2D nodes you need.

Live demo

5

Update: I just played around some more, and I get noticeable artifacting and distortion on essentially all fonts even when I create a fresh project with nothing except a singular Label in it. So really, my question should be “how to make ANY text in Godot not look horrible?”

Manually exporting letters as SVGs and then manually placing them back on the canvas is going to be very annoying especially considering we have a Chinese localisation, so we will only do that if we have no choice …

6

You can check the source code of Slay the Spire 2 and figure out how they do that.

7

That is a great idea, I did not know decompiling is so easy. Thank you!

8

If you figure it out, please also post here how because I’m extremely curious now :smiley:

9

Yes could you share you foundings as I have the same problem…