Keeping the Aspect Ratio of your GUIs

a 2am in the morning tutorial, hooray!

I’m putting this out for people who want to know a way to keep the aspect ratio of GUIs the same whenever the Roblox game window is resized. I used to stick with the offset size a ton because in general it looked better and scaling usually has those blurry text or images, etc. But the downsides with the offset is that players with very small resolution or very high resolution end up having tiny GUIs or large GUIs covering up the screen. This can be especially useful for mobile users and devs who plan to utilize GUIs on console!

So we want to achieve here is this:

The turtles above have the same aspect ratio, but when used in a scaling GUI resized, it may end up not keeping the same dimensions:

The XY, YY, XY frames. The XY’s resemble the SizeConstraints of the Frame. The above example is the a centered aspect ratio. (Of course the frame sizes can be resized to your preference (must be scaled though!)

The property that you want to configure is the SizeConstraint Property!

Now, from looking at this it resizes only vertically, well it’s preferred that way since monitors are typically landscape and playing portrait is probably not done (possibly with multiple monitors to create one extended monitor, which still works) If you want the same aspect ratio but on the side of the window, it can be done as well!

Scaled text, images, other frames, whatever you want can be placed within the blue frame that has their sizes by scale. (The colors and XY’s are for visuals, you can have it transparent or whatever) Just wanted to put this out if you wanted a way to keep your GUIs looking like an offset but able to scale.

It can be done as to something like this:

Some size samples:

Bottom-center:

XY- Size:{1, 0},{0.1, 0}, Position: {0, 0},{1, 0}
->YY- Size:{1, 0},{1, 0}, Position: {0.5, 0},{-1, 0}
–>XY- Size:{4, 0},{2, 0}, Position: {-2, 0},{-1, 0}

Center:

XY- Size:{1, 0},{0.1, 0}, Position: {0, 0},{0, 0}
->YY- Size:{1, 0},{1, 0}, Position: {0.5, 0},{0, 0}
–>XY- Size:{8, 0},{8, 0}, Position: {-4, 0},{1, 0}

Top-left corner:

XY- Size:{1, 0},{0.1, 0}, Position: {0, 0},{0, 0}
->YY- Size:{1, 0},{1, 0}, Position: {0, 0},{0, 0}
–>XY- Size:{1, 0},{4, 0}, Position: {0, 0},{0, 0}

Just remember that you aren’t limited to these values and that you can change it to suit your needs. Also mind when using ClipsDescendants on the first 2 frames! Dragging the frame is also do-able. :stuck_out_tongue:
######btw if you’re making a menu, plz try not to use only offset. cough apoc rising menu*

Hope to see more of this, and less offsets! :wut:
If you have any other questions about it or know of an alternative, feel free to respond! :wink:

178 Likes

clicks

6 Likes

Can I add you on your skype for help on this?

Really late for me right now, if you still have trouble I’ll try to make it easier to understand or provide a sample model.

Could use a few more turtles. :slight_smile:

Nah but would it be difficult to change an already made UI to optimize this?

[quote] Could use a few more turtles. :slight_smile:

Nah but would it be difficult to change an already made UI to optimize this? [/quote]

It really depends on the complexity and whether you used scales or offsets. If it was scaling then I guess you could drop your UI in the frame and adjust the size of the XY frame. If it was based on offset then you would need more time on changing it to scaled. I’m thinking that it doesn’t take that long. Also any scripts inside might need some configuration if necessary.

I kind of understand but not really, I don’t know how to do it with the gui I already have…

1st image - my screen
2nd image - on a smaller screen

everything is scaled and size constraint is xy for everything, what do I make yy and xx?

I meant what part of the gui do i make xy and what part yy

Also this isn’t how I do it, if the image is say 32x64 the size would be {0, 32} {0, 64} and keep the value equal distance. (So if you add 10 to 32, also add it to 64)

edit: oooooohhhhhh you mean the entire GUI not just the images, [size=1]it’s 2:23am ok[/size]

Great tutorial, an interesting trick for scale UI design that I never thought of.

Now to begin the harrowing task of converting my offset GUIs I was so found of into the more robust solution.

My biggest problem with this is that there are no min and max constraints for size using this. So your GUIs will be either HUGE on large screens or SMALL or mobile screens.

4 Likes

It seems as if everything has a tradeoff. Personally I’m a fan of being able to make GUIs once and have them work across any resolution. It lifts so much work off of my back.

1 Like

Just got linked back to this thread (I forgot about this method) and it’s still probably the most useful GUI tutorial out there right now.

At the same time, though, is anyone else irked that these aren’t easy, built-in options? Like, this feels like a weird secret workaround (it also creates a TON of clutter in Explorer) instead of an intended feature, and that really bothers me. 99% of developers still use offset because of how easy it is, and how difficult it is to make scaled GUIs look decent without knowledge of this trick. Y’know?

7 Likes

Corrected the formatting for the original post. (also - fun fact: previous reply was 223 days ago)

7 Likes

Any way to do this on the right side? The left and center is easy to get the nick for, but the right side is ehh.

Have you tried using an setting the X AnchorPoint to 1 and the pushing the position all the way to the right edge?

4 Likes

you can do this with UIAspectRatioConstraint now, theres no need to use this method anymore

9 Likes

I prefer using this than the UIAspectRatioConstraint. Maybe i’m bad with the UIAspectRatioConstraint but this is way better. The UI control with this method is better.

4 Likes

AutoScale Plugin

I have a plugin to automatically do this for you now, it uses your absolutesize and calculates the resoluation/aspect ratio for the property. Select your frame/gui element (not screengui) and then just press scale!

LINK:

11 Likes