Confused about UI logic.

[Armikron]

Windows 10, Community 2.16.1, C#

I'm trying out built-in UI systems and trying to understand the logic.

Standard things, lower-left corner for health, lower-right for ammo, etc. Regular way by calculating position works of course.

Using layouts like VBox and HBox however gets me confused.

To even set 4 windows into corners I have to use ALIGN_OVERLAP. But is it necessary if windows are not overlapping anyway?
 

private void Init() {

        Gui GUI = Gui.GetCurrent();

        WidgetVBox vbox = new();

        GUI.AddChild(vbox, Gui.ALIGN_EXPAND);


        WidgetHBox hboxTop = new();

        vbox.AddChild(hboxTop, Gui.ALIGN_EXPAND);


        WidgetHBox hboxBottom = new();

        vbox.AddChild(hboxBottom, Gui.ALIGN_EXPAND);


        WidgetWindow window1 = new();

        window1.Width = 200;

        window1.Height = 100;

        hboxTop.AddChild(window1, Gui.ALIGN_LEFT | Gui.ALIGN_TOP | Gui.ALIGN_OVERLAP);


        WidgetWindow window2 = new();

        window2.Width = 200;

        window2.Height = 100;

        hboxTop.AddChild(window2, Gui.ALIGN_RIGHT | Gui.ALIGN_TOP | Gui.ALIGN_OVERLAP);


        WidgetWindow window3 = new();

        window3.Width = 200;

        window3.Height = 100;

        hboxBottom.AddChild(window3, Gui.ALIGN_LEFT | Gui.ALIGN_BOTTOM | Gui.ALIGN_OVERLAP);


        WidgetWindow window4 = new();

        window4.Width = 200;

        window4.Height = 100;

        hboxBottom.AddChild(window4, Gui.ALIGN_RIGHT | Gui.ALIGN_BOTTOM | Gui.ALIGN_OVERLAP);


        //vbox.SetPadding(20, 20, 20, 20);

        //vbox.Arrange();

    }

 

Given that I add 2 HBoxes as children to VBox I expect them to share its area as 50/50:

 

But it seems that is not what's happening:

 

Looks like the ratio is way off and some strange space appeared in-between.

[karpych11]

Hello,

Do you need movable windows or is a static option enough?

[Armikron]

Static. I only moved them to see where the border between two HBoxes is. HUD doesn't really need layouts, but there's also character menu with inventory, data-logs, etc.

So I'm trying to understand the rules. Layouts seem to resize to their contents which is good, but an option to resize to parent's area is needed sometimes.

 

I'm also prototyping my own UI system on the side using WidgetCanvas and have a few questions.

There's SetLinePoint(), but there's no SetPolygonPoint(). Looks like I have to RemovePolygon(), AddPolygon() on each Update() if I ever need to make complex morphing animation (like square turning into circle). Not a big deal, but maybe I'm missing something.

Is it possible to set material/shader to specific polygons? Or to whole WidgetCanvas?

[karpych11]

In this example two WidgetHBox fill the window in equal proportions. To see this you can turn on their background and set different colors to them.

hboxTop.Background = 1;
hboxTop.BackgroundColor = vec4.RED;

hboxBottom.Background = 1;
hboxBottom.BackgroundColor = vec4.GREEN;

But, unfortunately, window widgets have behaviour problems inside other containers without the OVERLAP flag. Therefore, it must be used. For windows you can disable moving with

window.Moveable = false

Yes, for a polygon there is no way to change points. Only deletion and addition. For animation you can also use the polygon transform setting. You can change the position, rotation and scale.

For polygons you can try to assign a texture, and render anything into this texture.

[Armikron]

Thank you for answers.