Trying to understand gui anchors and resize modes

[ericsroy]

Hi there,

I’m just trying to wrap my head around how anchors affect the positioning of an element in various resize modes.

Specifically, I have some buttons, and each button contains a label, centered within the button. The button backgrounds are set to “stretch” mode, and the labels are set to “fit” mode, with no anchors, and a central pivot. The setup can be seen below:

Based on what I’ve read in the gui documentation, here are my expectations:

• If the window’s width changes:
  • The button backgrounds will get wider or narrower (but their height will stay the same, because they are in “stretch” mode)
  • The labels will maintain aspect ratio (because they are in “fit” mode), but uniformly grow or shrink as necessary to fit inside their new bounds.
  • How the labels are positioned inside the new bounds is determined by the anchor settings. Because both anchors are set to none, the label should remain centered within the new bounds.

Here’s what happens when I run the game at default size, with no window adjustments. It looks just like in the editor:

Next, I make the window narrower:

Here’s the first point at which the results diverge from my expectations. The labels have been scaled down (uniformly) as I expected, but they have also dropped vertically. Since they have no anchors set, should they not have remained centered within the button?

Next, I try making the window really wide:

Again, the results are different than I expected. The labels are vertically positioned as I expected, but should they not be centered horizontally within the buttons?

I’ve drawn some red boxes on these images to indicate where I think the constraint rects should be for each label:

But if I’m right, then shouldn’t these un-anchored labels be centered within the red boxes?

Obviously I’ve made a mistaken assumption somewhere, can anyone tell me what it is?

Thanks!

[sicher]

I am trying to reproduce this without luck.

White boxes are “stretch” and the red text and box are “fit”. Running this I get expected results:

[ericsroy]

Thanks for trying to reproduce sicher, now that I know it’s something about the configuration on my end, I’ll keep stripping down my example until I get your results.

[sicher]

It might be an Editor 2 issue as well. If you find the culprit, please don’t hesitate to report.

[ericsroy]

Ah, ok, so the behaviour I’m seeing can be reproduced in your example by setting the pivot of the two parents (white boxes) to be “south west”.

I don’t really understand why modifying the pivot of the parent box is affecting the child like that. Unless the scale and fitting operation for the child is performed in the parent’s frame of reference instead of globally. But even then, I would expect the children to move farther away from the pivot (up and or right) rather than closer (down and or left)…

Ok, so lets make that question explicit:

When the window is resized, and the original bounds of the nodes are transformed to come up with new bounds that they will be sized/positioned within, in which frame of reference does that transformation happen? In global coordinates? Or in the coordinate system of each node’s parent?

(Also, for the gui component itself, I believe you and I both have “Adjust Reference” set to “Per Node”. Not sure if/how that affects things in this case)