Scale UI to match camera zoom

Godot Version

4.2.2.stable

Question

I have a pixel art style game running at 1080p with a 4x camera zoom, which effectively makes the sprite resolution 360p. However, when I add the GUI (the little blue button) to a CanvasLayer node, the camera zoom is not applied to it, and it becomes really small (1st image). i’ve tried changing the camera zoom back to 1x and changing the stretch scale in the project settings to 4x, which solved this, but made everything else look warped (2nd picture). What is the best approach to solve this issue?

4x zoom

4x scale

combined(1)

You can set the scale of any given node in your canvas layer (or, if you want the scaling to affect everything, you can set the canvas layers scale) in a script. This can be done once in the _ready() function or dynamically in _process(delta), where the scale would be equivalent to the camera zoom (or some other factor).

PS the example script is directly on the canvas layer, witch is why $“.” is equivalent to the canvas layer itself.

1 Like