How to ACTUALLY anchor gui elements?

Questions
#1

During the development of our game we’ve had some serious issues with positioning GUI elements correctly on different screen sizes/devices. For some time, I thought I had it figured out but now I’ve come to realize that SOME things work while others don’t, and I don’t understand why.

disbranchdoe.png1531×1002 148 KB

This GUI element, a branch, does not want to compute. It is placed outside of the actual Display Size to give some room for error, anchors are set to TOP and LEFT, adjust mode is set to Fit.

But it shows up like this:

Screenshot_2015-11-26-11-44-04.png960×540 277 KB

The red Exit button on the top right, however, is placed perfectly where it should be. It looks like this in the editor, anchored to TOP-RIGHT, adjust mode on FIT:

disexitdoe.png1528×1008 81.4 KB

I’ve checked the positions on both these elements on all fo our Display Profiles a thousand times and they are set correctly. I’ve tried looking through the Defold Documentations for answers but found nothing. Why don’t these two work the same? One stays on its position relative to the screen size while the other doesn’t.

What have I missed? Do parent elements have anything to do with this? I’m also wondering what the Adjust Mode of the whole GUI does (“Root” or “Per Node”), changing it does nothing. :confused:

Any answer at all is greatly appreciated!

#2

I’m raising this issue with the team. Don’t know why it does not behave as expected.

Edit: The system actually works as designed. The problem here is that the pivot point is set to “center” and has “fit” adjust, meaning that the node is centered in the fit adjusted “bounding box” of the node when the screen is resized.

If you set the pivot to “northwest” in the top right node and “northeast” in the top left you should be ok.

#3

Alright, your solution worked as long as the nodes don’t have any parents - which makes sense - and since this particular node is quite deeply nestled in parents I had to set its position outside of the screen for safety measures. It works OK, but won’t look the on all resolutions. Setting pivots as you say solves our problems with other GUI:s however, so thanks!

#4

Cool. What happens is that when a node is “fit” adjusted the new size is fit in the original rescaled bounding box and then it’s anchored in the original rescaled bounding box. I looked at the documentation and it needs to be updated since it does not explain this right.

1 Like