How to use anchors and relative positions in order to build a responsive GUI ?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By DaveMS
:warning: Old Version Published before Godot 3 was released.

Hi!

i’m using Godot Engine since few weeks now, and I do appreciate the simplicity of the scenes system in combination with the elegance of GScript, to which I get used with ease.

There is anyway a point I really fail onto: to build a GUI that is completely screen size indipendent.

I understand how ‘anchors’ and ‘margin’ work and I tested every of the Control nodes (such as VBoxContainer, CenterContainer, etc…), but when I play with that properties withinh the inspector, it seems that (in some circumstancies) changing the parent propertis affects the children settings and/or viceversa: an annoing reset that make my efforts useless.

I woud like to make a GUI like that:

…and this is what I tried:

Please, can you help?
Thanks.

changing the parent propertis affects the children settings and/or viceversa

Which settings do you change? How does your gui look like before and after the reset? How are your Size Flags of the VBox’ children set?

rolfpancake | 2017-12-14 08:52

Anchor settings (Begin, End, Center or Ratio), which a set to “Ratio”, got reset to “Begin”.
Label’s font size, which I scaled down to 0.5, got reset to 1.

This is the editor appearance:

while the emulator shows this:

DaveMS | 2017-12-14 18:48

Thanks for clarification. I will try to reproduce this on my own.

rolfpancake | 2017-12-16 10:23

:bust_in_silhouette: Reply From: Rasmus

Have you read following:

And if you would like you can take a look at this (Shameless Self Promotion xD):
https://forum.godotengine.org/9947/responsive-to-fit-multiple-resolutions

Yes, I do read the section about resizing, but this is not a matter of “resizing”, it’s a problem related to proportion between the GUI elements, margins and centering to each other.
I want the title to be at 25% of the screen heigth, the Play button exactly in the center and the three more option button at the bottom (75% of the screen heigth) whatever the screen size is.
That’s why I choose to use the “Ratio” option in margin settings; and that choice reset in cascade at (almost) every adjustment of the parent or grand-parent container.

Of course I could set position programmatically; I just wonder why the Inspector behaves like that.

DaveMS | 2017-12-15 15:47

I had the same resetting behaviour once but couldn’t figure out what the problem was. Maybe it is a bug and should be investigated by the devs. Could you please create an issue on github and try to explain how to reproduce the problem? Maybe you could also provide a minimal sample project (including only your gui scene).

rolfpancake | 2017-12-16 10:22