Is there any way to scale the Control nodes without the quality loss?

Godot Version

4.4.1

Question

Is there any way to scale the Control nodes without the quality loss? I scaled my node with the “transform.scale” property by 1.4, and this is what I got:

Before:

After:

I want it to stay as sharp as before

Of course, I can just change the “transform.size” property for each GUI node and change the font sizes in my game with code (player can scale the GUI), but I’ll really make my life harder. I hope there is a smarter way to do it

Maybe do it the other way around - design your GUI to look good on the highest scale (i.e. change fonts to bigger etc.), so that when you scale down it will still look sharp without any additional effort from your side. And don’t allow the user to scale up any more than you have designed for. Then your GUI scaling slider will have a range of let’s say 0.3-1.0 scale, with the default set to 0.5, or something like that.
Scaling up is always an issue and you will always have to make sacrifices.

4 Likes

I would also discourage against using scale property for Control nodes, because it doesn’t work in Container nodes .

4 Likes

The texts/labels (and most controls) actually do update correctly and re-render at the higher scale when you scale them up like you do. However, the issue is that the build in controls (like your slider, checkboxes etc) that use pixel images for components don’t support this. If you make your own controls you can just set the images used to be a higher resolution so they look good when you scale them up, but you can’t do this in default controls as they set their size based on image resolution (see discussion about this). So for now the only way I’ve found around it it so make your own slider control subclass that uses a higher resolution knob texture rect unfortunately.

There is however some hope here since the new SVGTextures being added in Godot 4.5 should solve this by allowing UI elements like the knobs and checkboxes to be re-rendered at the correct resolution just like label texts.

1 Like

Why make a subclass? You can change the textures in the theme or theme overrides to achieve the same effect, no?

No, this is the problem described in the discussion linked above. Using a higher resolution image in the theme will make the native controls just make the knob bigger at the same resolution since they set it to be the same size as the texture pixel size.

1 Like