UI Elements Shifting and resizing

So, I’m getting really annoyed by this. I’m currently working with 1366 x 768 for a resolution in studio with the simulate/emulate device future.

The UI looks perfect for what I want to do for Laptops at 1366 x 768, but the problem is that not everyone is going to be running that resolution or window size.

Avarage Laptop:

XBOX One/TV:

Any ideas for these to adjust to the size of the screen and stay in the same place?

4 Likes

I know there’s ways to scale/lock UI pieces in place, but I totally forgot how to do it. I’m gonna bookmark this to see if anyone else knows :wink:

1 Like

There are various ways you can do it.

For the aspect ratio/size of the elements, using a UIAspectRatioConstraint may be useful. This should mean they all resize together (if the constraint is parented to the container that holds all three of the elements you have you in your screenshots, and if those elements sizes are all based off the size of the container). To set this up, make your frame to its desired size and set its children elements’ sizes with scale (so they are able to scale lol). Then give the frame a UIAspectRatioConstraint, get the aspect ratio of the frame and the set the constraint’s aspect ratio value to the frame’s aspect ratio. It’s on my to-do list to make a constraint tutorial so maybe that will help.

You can use AnchorPoints combined with both position units (scale and offset AKA {0, 0}) to get the right position for your element. For example, if you wanted it to be anchored to the right side of the screen, you’d set the AnchorPoint’s X value to 1, and the X position to {1, 0}. That 0 could also be replaced with an offset (so if you wanted it to have a space of 10 between the edge of the element and the edge of the screen, you’d make the offset -10).

4 Likes

How do I set it to the correct aspect ratio?

Pretty sure the ratio is 16/9 = 1.77778

No, I figured it out, it depends on how wide you want it or whatever, maybe your right but I think it depends on size?

Oh, I thought you just wanted to know how the aspect ration works. Was giving you the ratio.

16/9? What do you mean by this, sorry, I’m a bit new to this. Your probably right, could you just elaborate more XD

What I said was not completely accurate, I was talking about a certain size. Check out these developer hub articles for more information:
UIAspectRatioConstraint | Documentation - Roblox Creator Hub UIAspectRatioConstraint | Documentation - Roblox Creator Hub

Thank you sir, the help is appreciated.