How do I prevent in-game UI from being blurry due to camera zoom?

Help
1

Godot Version

4.3

Question

I’m coming from Unity, and I’m used to adjusting the orthographic camera size so that the player can only see their surroundings instead of the whole world. This has no affect on the UI in Unity, and you can still get nice crisp labels without having to worry about them getting blurry. However, in Godot, the camera zoom does affect the UI which I just recently found out.

I’ve realized for overlay UI items, such as menus, I can use CanvasLayer to make them independent from the camera. However, I’m trying to figure out how to have in-game UI, such as interaction labels or health bars. When I set my CanvasLayer node to follow the viewport, these in-game labels and UI become blurry and I don’t understand what I’m doing wrong or how to fix it. I’ve spent a bunch of time searching Google and asking questions in Discord but so far no one seems to know how to fix it. PLEASE HELP. How can I make my in-game UI elements not be affected by camera zoom level? OR is camera zoom level not the proper property I should be changing to limit the player’s view?

Follow Viewport Disabled. “Testing” label is an overlay but is not blurry (note font size is increased in this picture)

image
image975×330 80.7 KB

Follow Viewport Enabled. “Testing” label is following the viewport and is now blurry.

image
image771×527 14.4 KB

I hope I added enough information to this post. If not, let me know and I’ll add more to better explain. Thank you in advance for any advice and help!

2

What are the Texture/Filter settings your nodes are using? (would be the property texture_filter for nodes inheriting CanvasItem, which by default inherit from default_texture_filter in the project settings) The game’s art seems to be designed for nearest filtering since it’s pixel art, but the text’s filter looks to be set to the default linear in the second image, and at such a low size the anti-aliasing is very noticeable. So if the text is being filtered as linear you could try setting it’s filter or the project global to nearest and see what that looks like — it might not be very readable though at this size small if you use nearest.

Also is the player’s camera’s zoom level set to default 1.0 or something else?

3

You might want to look into the MSDF font rendering.

If you’re not using any custom font, then you can change the default font to use MSDF in the ProjectSettings