Need some help with gui element positioning

  • Hi folks,


    I'm trying to make a dialog box with controls and I'm not grasping the coordinate system. Can anyone help straighten my brain?


    The following image documents the testing that I did. I created a 0.5f x 0.5f GuiPanel with center pivot. The GuiImages are children of the GuiPanel. In all 4 tests, the elements remained the same. Positive X/Y coords, relative=false. Only the pivot was changed. The icons are at 2px, 50px and 100px from the anchor point.


    I see here that the anchor point is relative to the bottom-left of the GuiPanel and that positive coords send the image up/right in all cases. From having dug through the threads here, I expect this is "working as intended" as that's the way that OpenGL does it.


    I want to put (for example) the close button at the top right of the GuiPanel. If I could anchor it to the top right and come in just 2px X and Y, I could position it where I need it. I don't want to use relative coords as they're imprecise. I can't just say "200px from the bottom/left" because I don't know how big 0.5f is on your screen.


    What am I missing?


    Thanks,
    Trevor


  • The pivot position is the position on the Element the coordinates will start from. e.g. pivot of the element on the bottom left with an absolute position at 2px/3px means that the bottom left corner of the element will be at the second pixel left from the bottom left and the third pixel up from the bottom left.

    I see here that the anchor point is relative to the bottom-left of the GuiPanel and that positive coords send the image up/right in all cases. From having dug through the threads here, I expect this is "working as intended" as that's the way that OpenGL does it.

    It is not so the anchor point but more the 0,0 origin of X/Y coordinates.

    I want to put (for example) the close button at the top right of the GuiPanel.

    For this I would recommend doing pivot top right and relative coordinates 1,1. This way you get your element at the top right but since the pivot is to the right of the element, the actual element remains inside the panel.

    I don't want to use relative coords as they're imprecise.

    Why? relative coordinates are the most precise when it comes to people playing on different monitor sizes. If I open your a 100x100px GuiLabel on a 1920x1080 screen I can see it ok, but if I open the same in a 4K monitor I can't see it at all as it is tiny, thus the need for relative sizes and coordinates, it takes a bit more time to get it right (I would recommend working down to 3 significant figures i.e. 0.001) but when done everyone sees it exactly the same no matter their screen resolution ;)

Participate now!

Don’t have an account yet? Create a new account now and be part of our community!