Heya, I’m actually a scripter making a game, and have no opportunity to hire a UI designer, so I’m trying to make a barebones UI myself. Obviously, I’m lost in the maze of scaling and aligning UIs.
I’m going to keep it short, I’m trying to get this frame to align with the sides of these four image labels:
But I am stumped on how to make it align on all screens, for example this is how it looks on tablet:
So, what magical thing do I do/use to make this work?
Scale instead of offset mmmmmmmm
I am using scale, both on the frame, and the image labels.
Maybe the background doesn’t have scale
It does, the lower frame with the image labels scales perfectly fine, really, it’s the upper frame that’s causing trouble.
Personally what I would do is have the parent of all the UI to one invisible frame. If you want I can do it for you if you get in contact with me. Let me know.
So create a frame and set it to the middle of the screen and 1,0,1,0 for size then make it invisible. Now add all the frames you want as children. If you really want you can the UIAspectRatio to make it the perfect size and scale for all devices.
I did what you described, and it looks the exact same? Maybe I didn’t quite understand something
Could you show us the GUI organization and it’s properties?
Alright, here’s the hierarchy.
InvisFrame:
Hotbar:
ImageLabels inside the Hotbar:
Inventory:
You don’t need to make position as scale, make it offset because it works fine for me
If I use offset for position then the UI is just off the screen for smaller screen sizes?
Nope, when I made it offset it’s still fine.
Which UI elements are you positioning with offset, exactly?
frames, textlabels, but image labels would break
Shouldn’t the Inventory Position be 0.5 on the X axis?
Ah, I think I got it to work for now, thanks!
This is no solution.
I recommend this UI setup from a post by @Dummiez. I’ve been using this kind of setup for years now and it works splendidly. You’d want to create a box (see the post) centered in the bottom of the screen, then have the image labels and the frame that you want to keep aligned parented to the same box that you’ve just created. This way no matter what the resolution is, it will stay the same and scale properly.
Edit: Basically to create the box that’ll make sure its children stays proportionally correct to one another, you create a frame and set these properties:
0.1, 0, 0.1, 0
0.5, 0, 1, 0
0.5, 1
1
RelativeYY
then you parent the gui objects to this frame.