Need help regarding GUI placement across devices

Help and Feedback Art Design Support
1

Okay so to preface I’m rather new to the world of GUI but I have a decent understanding of it. My GUI has an anchor point of {0.5,1} but when i align it using scale, or offset to the bottom of my screen how I want it, it just moves when I switch my testing device. This GUI is also the main GUI that you see that is larger that is the parent to the hotbar, as when i changed devices a huge gap would be created between the two.

Examples:
On IPhone6

image
image799×383 35.5 KB

On IPad2

image
image991×528 51.5 KB

Please help me understand what i need to change to have it stick to the bottom properly.

2

interesting.

the anchor point is right for this scenario… it should be working!

could you send a picture of your hierarchy / explorer? point out which frame is the one bugging out!

1 Like
3

This should make UI same size and position across all devices:

  1. For UI you want to set the scale to (0.1,0,0.1,0) so whenever you resize it it changes Scale instead of Offset.
  2. Then when you have the size of frame you want you get the AbsoluteSize and use calculator and divide the X by the Y then insert an “AspectRatioConstraint” and set the ratio to the value you just got.
  3. Then you want to set the anchor point. If frame is top left set it to 0,0, bottom left would be 0,1 top right 1,0 and so on.
  4. Verify the position is in scale and not offset

Any frame you put in there only needs their size to be scale, ignore the ratio thing.
I hope this helps

4

Okay so to cover both replies I got I will send the hierarchy and the size, and position I have set for each frame, as they are already scaled

image

image
image320×139 5.5 KB

image
image347×180 5.5 KB

So here the bag is the larger GUI you see and the hotbar is well the hotbar. As for dimensions, the Bag has a anchor point of {0.5,1} and a position of {0.5, 0},{1.289, -340}, it’s size is {-0.43, 0},{-0.176, 0}, with the aspect ratio is has being 1.71. The hotbar itself has an anchor point of {0.5,0.5} and a position of {0.502, 0},{1.154, 0} it’s size is {0.97, 0},{0.108, 0}, with the aspect ratio being 6.88. Then each box in the hot bar has an anchor point of {0.5,0.5}, the position is irrelevant as it is in a list, and the size is {1, 0},{1.32, 0}, with an aspect ratio of 1.

5

So my ui already uses scale for each GUI part or frame, the position also was in scale and still had the same problem so i tried it with offset and nothing changed for me, I also have the anchor point for the main frame set as 0.5,1 to be at the bottom.

6

{0.5, 0},{1.289, -340}
remove the -340 offset since that means it is 1.289 screens down minus 340 pixels

8

When i change it still shifts the position of my gui

On iphone6

image
image800×389 33.4 KB

On ipad2

image
image1009×526 56.1 KB

9

Pretty sure that you are using the scrolling frame wrong since on ipad there is a button below the row of 5 but on phone that button is inside the middle button of row of 5

10

that button there is the hotbar used when you have the inventory closed its in the placement i want the other hotbar

11

I don’t fully understand the issue but I am assuming it is the scrolling frame’s fault that is pushing the frame up when it goes a row down

12

The same issue occurs even when i delete the scrolling frame

13

I think you should remake the entire thing since ther could be something small you did not catch

14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.