How to get Control nodes to scale to the same aspect as Screen Size.

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By FluffyPancakes1

I have searched for quite a while, looking for how to change the size of a control node to the aspect ratio at the start, between the node and screen size. Does anyone know any way to do this? Any help would be greatly appreciated.

:bust_in_silhouette: Reply From: Jed Stevens

Controls don’t ‘enjoy’ being scaled. I would consider using a combination of containers that allow child nodes to grow using the size flags Fill | Expand and controlling that with the stretch ratio property of each control node.

You could do something fancy with the fonts where it switches to a new font resource with the proper sizing so rendering the text comes out clean.

How would I go about doing this? I haven’t really done proper UI yet, so I haven’t come across this before.

FluffyPancakes1 | 2022-11-20 08:37

Try it out on a small set up and you’ll see what I mean. Using an HBoxContainer and a Label is enough to see the concept in action.

  1. Make the HBoxContainer the root node in a scene and set it to Full Rect using the anchors button on the tool bar.

  2. Adding a child node of type Label, add some text and set it to centered.

  3. Set the size flags of the Label to Fill and Expand

  4. The label will now grow to the bounds of the HBox.

Doing UI this way is a lot more like how HTML is set up.

Try this link: Using Containers — Godot Engine (stable) documentation in English

Jed Stevens | 2022-11-20 12:05

It still didn’t work inside of the new scene.

FluffyPancakes1 | 2022-11-20 13:44

You may need to feed the root node the info of a screen size change

You could write a resize function that is connected to Viewport::size_changed and have things rearrange in a custom way.

The contents of the link work for sure; I have just provided a small snippet to get it going. This is a core UI function so something must be wrong with your set up. The set up I described works fine in the editor when resized so I think feeding a size vector into a resize function is your strongest route.

Jed Stevens | 2022-11-20 17:01