Is there other anti-aliasing option for font ?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Moros

Hello, I am working on a custom camera for a project, it is a multiple people project so I need to provide debug tools for my camera.

My camera needs to show different zones in the editor like this :

Project open in godot editor

To achieved this result I simply implemented the _draw() function in my custom Camera2DFollowing class which inherits from Camera2D, I used the draw_rect() and draw_string() methods

Doing so I needed to add a font for the zones labels “Ease zone” and “Dead zone”, I did the following :

pa_debug_font = DynamicFont.new()
pa_debug_font.font_data = load(pa_debug_font_path)
pa_debug_font.font_data.antialiased = false
pa_debug_font.size = 12

My problem is that if I change pa_debug_font.font_data.antialiased to true the result is unreadable.
I therefore tweaked a bit my project to figure out what I could do to improve that, it appears DynamicFontData.antialiased works well if the font is in front of a white background but does terrible if not.

Antialiasing in front of white background
Antialiasing in front of a dark background

My question is as follow : do you know a way that could improve the render of text antialiasing in my project and for this specific case ?

Thank you a lot

Edit1 : I tried changing the font and nothing changed
Edit2 : I tried changing the stretch mode in project settings and nothing changed

Does the same thing happen with different fonts?

timothybrentwood | 2021-05-06 22:12

Well I tried with the default godot font (idk what it is) and the one on the pictures is Arial

Moros | 2021-05-06 22:14

So it does happen with other fonts. Maybe it’s being stretched weird? Project > Project Settings > Display > Window > Stretch > Mode try launching it in all three modes and see if anyone gives you a nice looking font.

timothybrentwood | 2021-05-06 22:21

Well I tried all three mode and nothing seems to change

Moros | 2021-05-06 22:50

My suggestions would be to play with the outline_size and outline_color properties. It’s worth a shot to test whether setting use_mipmaps or use_filter does anything. Or to stick the text in a Labelnode with a transparent background and see if that fixes the issue.

timothybrentwood | 2021-05-07 00:35

Will try tomorrow, thanks a lot for all your suggestions

Moros | 2021-05-07 01:08

:bust_in_silhouette: Reply From: Calinou

To improve font readability on mixed-color backgrounds, I would recommend adding an outline or shadow instead of playing with the antialiasing property. You can do this in DynamicFont with the outline_size property, and in Label with the *shadow* custom constants.

You can also add a translucent colored background with a ColorRect node as the parent of the Label.

I stopped using the _draw() function of CanvasItem class and used a label node attached to my camera instead, it works well even without a colored rect as background

Moros | 2021-05-07 19:58