+2 votes

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

Godot version 3.2.3-stable
in Engine by (23 points)
edited by

Does the same thing happen with different fonts?

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

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.

Well I tried all three mode and nothing seems to change

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.

Will try tomorrow, thanks a lot for all your suggestions

1 Answer

+1 vote
Best answer

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.

by (10,910 points)
selected by

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

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to webmaster@godotengine.org with your username.