PopupMenu, MenuButton, OptionButton text becomes blurry on canvas_items stretch mode when screen is resized

[lesleyrs]

Godot version

4.0 beta 10

System information

Windows 10

Issue description

On both GLES and Vulkan renderer the optionbutton options become blurry when screen is resized other than the default size.

Steps to reproduce

Load repro project, run scene and try the options.

Minimal reproduction project

low_res_options.zip

PS: happy new year!

[Calinou]

Related to #69749.

This occurs because font oversampling isn't used when rendering the PopupMenu.

cc @bruvzg

[bruvzg]

This occurs because font oversampling isn't used when rendering the PopupMenu.

Oversampling is a global value and should be applied to all text, it this case it seems like it's something wrong with embedded window scale mode in general.

[bruvzg]

it this case it seems like it's something wrong with embedded window scale mode in general.

Parent window content scale seems to be completely ignored by embedded windows.

[2fd5]

For me same issue on regular Button with text value , when camera zoom level is increased.
Only text that is on CanvasLayer is not affected as it is not affected by the zoom level.
Godot 4.0.beta15 on macOS 13

Below the "Add" button is the one with the issue.

[Calinou]

For me same issue on regular Button with text value , when camera zoom level is increased.

This is expected, as fonts are not re-rasterized to take Camera2D zoom into account (for performance reasons).

If you want text to remain crisp in this situation, you need to enable Multichannel Signed Distance Field on the font in the Import dock. For the default project font, you need to enable the Default Font Multichannel Signed Distance Field advanced project setting instead.

[justdaft]

I am having a similar issue with a texture looking blurry when the scale is reduced inside popup window.
popup_test.zip

[Calinou]

• Duplicate of Popups (OptionButton, tooltips) placed and scaled wrong when using canvas_items stretch mode or scale factor different from 1.0 (DisplayServer regression) #54030 (same cause).

[2fd5]

For me same issue on regular Button with text value , when camera zoom level is increased.

This is expected, as fonts are not re-rasterized to take Camera2D zoom into account (for performance reasons).

If you want text to remain crisp in this situation, you need to enable Multichannel Signed Distance Field on the font in the Import dock. For the default project font, you need to enable the Default Font Multichannel Signed Distance Field advanced project setting instead.

Thanks !
Using Default Font Multichannel Signed Distance Field made most of the fonts at zoom level 1.0 look weird and choppy:

This is with Default Font Multichannel Signed Distance Field off:

Not sure if that's technical limitation or shall I raise separate issue for that ?

The examples above are displayed on canvas item. Having said that Multichannel Signed Distance Field made fonts on the game map look better.

My workaround was to to keep the zoom operate in range of 1.0 and lower for zooming out. Effectively making it so that maximal zoom in game is 1.0, everything is crisp and readable, and can go lower for zooming out and seeing more of the map.

[Calinou]

Using Default Font Multichannel Signed Distance Field made most of the fonts at zoom level 1.0 look weird and choppy:

Self-intersecting outlines are not supported by MSDF font rendering. This is a design limitation that could be fixed by integrating Skia, but this is a huge dependency given the size of the problem at hand.

To fix the issue, use a custom font with a proper bold variant instead of relying on automatically generated bold (embolden). Make sure to grab the font directly from the font maker's website, rather than Google Fonts as Google Fonts builds tend to contain self-intersecting outlines.