I’ve been trying to get this to work for as long as I can, I’ve searched any topics watched any videos and anything else that could help me with this but I cannot manage to get GUI elements to have the correct position according to the screen resolution.
So far the only “correct” way I could manage to find is thanks to this post by using scale and offset but I genuinely don’t understand how to correctly use both.
This is the standard 1920x1080p resolution, and how the GUI should look:
And here is the iPhone X 812x375 resolution:
This is the hierarchy, the underlined elements are the elements im referring to.
The position of “TextButton” (Sort inventory button) is {0.5, 0},{0.904, 0}
The position of the “Hotbar” is {0.5, 0},{0.988, 0}
Both elements originally have the AnchorPoint set to 0.5,0.5
How can I get the sort inventory button and the hotbar to stay in the same position as the 1920x1080p resolution? I’m only using scale position on both elements and it appears it won’t match up.
When you use UDim2 values that consist purely of scale (with an offset of 0), your elements are positioned as a percentage of their parent’s size. For example, if your design on 1920×1080 has a button 100 pixels from the bottom, you can convert that number into a relative value. In 1080 pixels, 100 pixels is about 0.0926 (100/1080).
Instead of using UDim2.new(?, 100, ?, 100), I’d recommend that you try UDim2.new(xScale, 0, yScale, 0) where yScale is set to reflect that same percentage (e.g. 0.9074 for the top position if you want it 100 pixels from the bottom on a 1080‑height screen).
I would go to the UI, scroll down in properties and use the AnchorPoint. Change the numbers to 0.5 , 0.5 so the middle of the UI is the centerpoint. It should then stay locked to the area where you want the UI to be, but may still shrink just a tiny little bit. But it will stay above that other UI box.
I’m already using scale and it just won’t stay in the same position.
{0.5, 0},{0.896, 0} is the position of the sort inventory button.
{0.5, 0},{0.95, 0} is the position of the hotbar.
i’m pretty surprised nobody suggested using 0.5, 1 AnchorPoint for the solution.
a simple fix would be to make a holder frame for both the ‘Sort Inventory’ button and the hotbar
then you could just position the holder frame to have 0.5, 1 AnchorPoint and 0.5, 0, 1, -PaddingY Position
here i set the ‘Sort Inventory’ button’s AnchorPoint to 0.5, 1 and the Position to 0.5, 0, 0, -10
If you really don’t want to use a holder frame for both elements then you could still use AnchorPoint but make sure the ‘Sort Inventory’ button’s Y matches the hotbar’s size - Padding
if my hotbar is scaled at 0.35, 0, 0, 120 (OffsetY) or 0.35, 0, 0.125, 0 (ScaleY)
then the ‘Sort Inventory’ button should be positioned with 0.5, 0, 1, -130 (OffsetY) or 0.5, 0, 0.875, -10 (ScaleY)
Thank you so much for making this post. This eases my OCD so much. I love this and I fantasize about this constantly. This idea of having the resolutions the same across every screen resolution infatuates me
Hey, I’ve just tried this and the end result is well… still the same…
I’m either too dumb to understand a step to step process and execute it or it just doesn’t work.
And by the way, this is the hierarchy, the underlined elements are the elements im referring to.
The position of “TextButton” (Sort inventory button) is {0.5, 0},{0.904, 0}
The position of the “Hotbar” is {0.5, 0},{0.988, 0}
Alright, I’ve updated both elements as you’ve said, the hotbar is where it is intended to be, however, the button’s position still changes.
The Sort inventory button’s position is {0.5, 0},{1, -80} with anchor point of 0.5, 1
PC Resolution
Mobile Resolution
And when I try to position it correctly for the mobile resolution, this happens to the PC resolution (Sort Inventory button’s position changes to {0.5, 0},{1, -60})
