How to make a HUD always sit on bottom left and have proportional size to the aspect ratio?

[nines]

Godot Version

4.4

Question

I have a Control Node with AnimatedSprite2D and some RichTextLabels. These things convey the player’s health, armor, etc. At this point, I would like to take care of the resolution issue. I would like to avoid the issue in Steam Community :: Guide :: Full Size HUD for High Resolutions (Outdated) . See the 2 screenshots in “What’s the problem?” section.

Whatever the resolution the game has, the HUD will not shrink or enlarge, and always have the same aspect no matter what. The aspect ratio is also to be maintained so whenever someone uses 4:3 or resolutions wider than 16:9, the HUD will not be stretched in one dimension.

For Godot 4, what would be the proper way to address this?

Help > UI

[mrdicerack]

You can use a CanvasLayer with containers under a Control node to keep your HUD consistent across all resolutions. Set Stretch Mode to viewport and Aspect to keep in Project Settings > Display > Window, with a base resolution (e.g., 1920x1080) as the reference. This ensures the HUD maintains its size and aspect ratio without scaling or stretching, regardless of screen dimensions or aspect ratios. Try this and see if it works!