Create an scalable UI

Godot Version



I create an interface that display a card, with health bar, mana bar and other data write in the card and make it as a scene, and use it to put it on the board. Now I just want to use the same scene, to display the card just way bigger for the deck building UI, but it’s impossible for me.
My main problem is that I use margincontainer which use pixel value for their margin and not percentage. So when I make my card bigger, all the margin value become obsolete. I could of course change it in a script, but it should be a pretty bad way to solve this.
I try to use anchor, but the value just reset every time i change something in the control node, so it’s not viable option as well.

Just use two different MarginContainers for each size of the card and change the Theme Override properties on the one you don’t like to set it correctly.

yeah, i’m currently do that,
so there no way to make an adaptative ui in godot ? you must change every value every time you want to change something. When you have many many margin container, that a bit of chore, through.

You can, but what you described is not adaptive GUI, it’s two different sizes of a similar GUI item.

1 Like

So how can i make an adaptative UI. Because the goal is to have the liberty to change the size, whenever you wanted, because after some test, you can decide after that to change some size to be smaller, or bigger, to add or remove some part. The goal is to make it easy to redesign, without redone everything

You could make a scripted MarginContainer that changes its own margins depending on its own size.

Have you tried using the scale property? All Controls have it and you can just it to just scale the size around the pivot point. While the container UI layer system is great of dynamic adaptive layouts it’s tricky to use it you just want to make something larger or smaller uniformly scaling it.

You can make margins with percentages by using anchor points.
In the inspector: Anchor Preset → Custom → Anchor Points
Make sure to set anchor offsets to 0.

The anchor points are only usable if the card is not a direct child of a container, but you can still use them inside a container with a node structure like this:
SomeContainer - Control - Card
where the expand setting is enabled for the control node.

oh, I don’t know the trick of adding a control node, to remove the auto reset everything pattern. It would be very usefull for many other situation I think. Now I can use the anchor and the other property, thanks

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.