As a beginner-level UI designer, one of the problems I run into (I like to designate this one a keyboard-smash problem) is consistent UI scaling. I’d like my UI to maintain a consistent feel across several types of computer resolutions – wouldn’t we all?
What I’ve tried so far
It is inevitable that someone will say “just use UIAspectRatioConstraints!”… and I do believe you’re right.
Constraints are definitely a powerful tool. However, in my experience, they don’t scale the GUI the way I want.
Original UI the way I’ve designed it!
UI at 1920 x 1080
What I want to accomplish
I would like my original UI to scale upwards/downwards (with bounds, obviously) while maintaining the same look and feel.
My problem above is that the text becomes extremely small, which is not good on a larger screen, since I’d like my players to be able to read the text fairly easily.
What I’m looking for
I’m looking for a method to scale UI consistently that does not involve using:
TextScaled (because it relies on the size of the element, and it doesn’t look good to me?)
Offset only (almost every post I’ve read on here recommends against the sole use of Offset because UIs will look tiny on high-res screens!)
I’m also not sure if I’ve been using UIAspectRatioConstraints incorrectly – I use AutoScale to create and insert the constraint, but that post only says to put the constraint under children of the LayerCollector.
Additionally, I welcome feedback on my UI itself, but I’ve put that into its own thread.
It looks like your only problem is getting text to scale correctly. I would suggest trying out Defaultio’s RichText module – it adds tons of features and has more granular scaling/overflow control.
OK! I know you said you don’t want to use TextScaled but you honestly should. Just make small invisible frames inside your elements that limit the max size TextScaled will be able to apply.
Here is an example:
The red box represents the size of the nested frame containing the restricted text label.
I would advise you using TextScaled as it is the only efficient way that I know of that will fix your problem. I understand you do not want the text to fill up the boxes completely, so I suggest you to take advantage of Borders or perhaps parent the TextButton/TextLabel to a new frame that will make up for the shorter (height wise) box.
Look at @EpicMetatableMoment’s representation of it.
Using UIAspectRatioConstraint does not solve parent-child proportionality issues unless you implement it intelligently. I typically solve proportionality issues by doing this:
Create a parent Frame with a UIAspectRatioConstraint in the ScreenGui.
Check AbsoluteSize Vector2 property of said instance in the “ideal” screen resolution using the device emulator in Roblox Studio.
Set the UIAspectRatioConstraint of that parent frame as AbsoluteSize.X / AbsoluteSize.Y. This allows the instance to maintain relative proportion across all resolutions.
Repeat for child GuiObject instances by checking AbsoluteSize and implementing UIAspectRationConstraints.
With respect to scaling text, I do use TextScaled, but I also make sure that the TextLabel or TextButton is a Scale-based child of another frame or GuiObject Instance so that it’s always maintaining the same relative whitespace between the text itself and the outline of its parent frame or GuiObject. Use UIAspectRatioConstraint and the AbsoluteSize method I mentioned before to accomplish this. If I want a TextLabel to fill something across resolutions the same way I typically assign its size to UDim2.new(.9, 0, .7, 0) and then set TextScaled to true. After this, I check the AbsoluteSize property and create a UIAspectRatioConstraint with AbsoluteSize.X / AbsoluteSize.Y and do not usually use ScaleWithParentSize, but rather FitWithinMaxSize.
I hope this helps a little bit, but typically with the aforementioned steps I achieve readable and consistent proportionality.
No only specific instances. If a TextLabel’s parent has a UIAspectRatioConstraint and the TextLabel is some scale-based fraction of the size, it should be fine.
Ah, okay. So UIAspectRatioConstraints don’t need to be placed into GuiObjects whose sizes use scale (based on the parent which has a constraint in it)?
Well… that’s not true either. For example, in your picture, if you knew the parent had a UIAspectRatioConstraint ratio of 2:1 and then you had a child GuiObject of size UDim2.new(.5, 0, 1, 0), you would know it would fill up half of the parent and be a perfect pixel square. However, a smaller different-proportioned child might need its own UIAspectRatioConstraint if it wants to keep its relative proportion. It’s mostly a case-by-case basis that can be tested by resizing your Studio window in addition to using the device emulator feature.
Theoretically, every component could use a UIAspectRatioConstraint, but that’s a lot of work.
After testing @GGGGG14 and @EpicMetatableMoment’s ideas, I noticed that the UIs began to scale text proportionally. However, I ran into another issue.
If you look at the Package and Pushbar fields, you’ll notice that there are back/forward buttons, since there are a variety of choices. The problem is that, when you change the amount of text in a TextLabel with the TextScaled property enabled, the font size will change with it.
When I tested TextScaled, “Slicktop” ended up being huge in size, but “Westin Wraparound” shrunk significantly.
@Deferend Hi, yes TextScaled can definitely be troubling if one TextLabel is supposed to contain a variety of text lengths. However, if you make the TextLabel some scale-based sized child of a frame with UIAspectRatioConstraint and its the TextLabel is like UDim2.new(.9, 0, .7, 0), TextScaled will always scale the text to fit within that constant proportion of the parent frame… you will get varying font sizes if you put in “ABC” versus the entire alphabet… you could use the truncation property if you wanted to.
This is confusing, but I understand what you mean now. Thank you!