How can I make GUI adjust its position to the size of the screen on their device

Chrisy_RBX · August 26, 2021, 9:23am

I have made a UI however it needs to work on different screen sizes.

I want it to adjust its position to the middle of the screen that its on.
How can I do this?

For example, for it to go to the middle of the screen

epochzx · August 26, 2021, 9:31am

Refer to this thread, should help you.

Chrisy_RBX · August 26, 2021, 9:44am

I’ve tried this and used the plugin linked but I still get wierd stuff like this?

epochzx · August 26, 2021, 9:46am

You are using the plugin incorrectly; could you send a picture of the position & size properties?

Chrisy_RBX · August 26, 2021, 9:47am

Explorer window and properties shown here.

epochzx · August 26, 2021, 9:51am

Your position values are still in offset.

Also, a word of advice, group your UI into a 1,0,1,0 container frame.

Chrisy_RBX · August 26, 2021, 9:58am

I tried this and it still does not work, and putting the UI into a frame (position, 1,0,1,0) i think that’s what you meant makes it just go off screen

epochzx · August 26, 2021, 10:01am

If it doesn’t work you’re doing it wrong, it’s as simple as that. Make sure that every UI object that you have is positioned and sized in scale.

YosemiteMe · August 26, 2021, 10:18am

Go through this tutorial to learn about positioning screen GUIs. Getting Started (roblox.com)

For your specific question, on your root GUI, set the AnchorPoint to { 0.5, 0, 0.5, 0 } and set the Position to {0.5, 0, 0.5, 0}. This puts the anchor of your GUI in its center and positions the GUI in the screen’s center. To maintain a consistent aspect ratio add a child UIAspectRatioConstraint and set the proportion how you like (something like 1.7 is usually nice). See UIAspectRatioConstraint | Roblox Creator Documentation

Chrisy_RBX · August 26, 2021, 10:25am

I’ve done this and it still does not scale or position properly.

epochzx · August 26, 2021, 11:39am

Your warning frame is scaled, however the children of it are not.

Chrisy_RBX · August 26, 2021, 4:17pm

I’ve done this now however this breaks it further.

Batimius · August 26, 2021, 4:44pm

My suggestion is to revert back to offset and then slowly convert each element of the GUI to Scale from child to parent. Just like everyone said, use Scale to achieve this and make sure you use the proper anchor point. I HIGHLY suggest you experiment around and try to learn how it works.

StarJ3M · August 26, 2021, 4:59pm

Your honestly making it harder than it seems, Every new GUI and I mean EVERY new one has to have its offset at 0 for X and y, You only scaled the frame which just makes it look broken even more.

Chrisy_RBX · August 26, 2021, 5:13pm

Hi,

Just been playing around a bit with a fresh GUI (I kind of remade it) and got it to scale correctly.
Not too sure what I did but I did restart and used scale and anchor points.

Thanks for your support!

Here’s the final

AltraeonNova · November 23, 2021, 10:22am

Download Autoscale. On each frame of UI (individual) parts of UI click and press scale on both position and size, you must click each UI individually, or it won’t work at all