GUI isn't the same size for all devices

So I have created some buttons for my game, but when the buttons go to another device, its way too big to fit. How can I fix this?

GUI’s position/size (UDim2) is made of four numbers, Scale and Offset (for both X and Y). You can see this when you expand UDim2 values to show what the four numbers represent. You’re making your GUI with offset, meaning literal pixel values (for example, {0,32}, {0,32} is a 32x32). Scale is a percentage of the screen size, which is probably what you want. You can’t just copy paste the numbers, so there’s some plugins I’d use to convert existing UI. If it matters that something’s aspect ratio is constant (image you don’t want stretched or something) then you can use a UIAspectRatioConstraint.

4 Likes

Thank you very much :slight_smile:

1 Like

So if I put all of my GUIs into an UIAspectRatioConstraint, would it make sure that the GUIs are perfect no matter what the screen dimensions are?

Right now, I have to manually convert (0, 100, 0, 100) types of UDim values to something like (0.01, 0, 0.01, 0) values so that it will resize based on the screen size… (And this is a little tedious considering that I have a lot of GUIs…

2 Likes

You can add a UIAspectRatioConstraint object into any GUI object with the Size property.
It will keep the size of the object at the correct ratio specified without going over either of the object’s size values.

I recommend looking at the wiki for different types of UI constraints and layouts, some are very useful - for example, a SizeConstraint can stop an object getting too small to be readable even when the screen is tiny. The layouts are super useful too!

https://developer.roblox.com/api-reference/class/UIAspectRatioConstraint

1 Like

The plugin I posted automatically converts them from offset to scale, AspectRatioConstraints are unrelated and can force an ImageLabel (for example) to be square regardless of screen size.

5 Likes