How to properly set GUI sizes?

Hello.
Recently, I noticed that players with larger screens/displays have a problem or get annoyed by large GUIs.
Currently, I’m using “scale” so it’s the same on all devices, but I still want to solve this problem.

I know, there’s offset, but I don’t know how to properly use it?

I’m wondering:

  • how do you solve this kind of “issue” in your games,
  • and what would be the best way for me to solve it.

Thank you!

2 Likes

Are you using the AutoScale plugin as I am a bit confused for what plugin or property you are using. :eyes:

If you are using AutoScale, then have you maybe tried using the position button onto the frame that is holding text, buttons and images?

1 Like

Oh, I’m not using any plugin, although I’ll check them for sure!

1 Like

So Offset will measure in Pixels. This will be the same for every single device.

Scale measures in percentage. It will grow/shrink based on the dimensions of the screen. If you do a 0.5 x 0.5 scale that would be half of the x axis by half of the y axis. Relying solely on this means that square buttons will become rectangular on some devices.

You can use a UIAspectRationConstraint in order to lock it to a certain aspect ratio and use scale. That way it will always try to rescale itself to the device and it will also stay the same shape.


You do not need any plugins for doing this and you can do the math yourself, but again this is one of those problems with virtually infinite solutions.

3 Likes

Thank you so much for your help!
But, I already know about scale. I’m basically asking how would I make GUIs smaller on large displays, and normally big on average displays. Are there any plugins for it?

Again, UIAspectRatioContraint and UIScale are your best options for doing it natively. UIAspectRatio allows you to make it look nice and normal on smaller displays at the same time as big displays.

There are plugins that just insert a UIAspectRatioConstraint for you if you want. There’s millions of AutoScale plugins such as this one.

Yeah, I always forget to use that UI stuff.
But I’m trying to point out this:

This is a large screen (/resolution) and the GUI looks like this compared to the leaderboard:
image

On my screen, it looks like that (1920x1080)
image

Is there a proper way to fix it? I could use offset, but that would result in other GUI issues on smaller devices …

This is unavoidable without a custom leaderboard. Usually for Position you should use either only scale or scale and offset. (Never just offset unless you’re creating it dynamically)

This is something that really isn’t too big of a problem. Most of the time it’s ok to leave UIs independent of the default Roblox UIs. If you’re talking about the rounded corners, however, then it’s pretty much just a matter of using offset for the Size as for those it’s best to be pixel accurate (only if it’s a requirement that your UI stays consistent).


TL;DR: You shouldn’t worry about that. Just ignore the default Roblox UI and make your own if absolutely necessary