Troubles with UI scaling for larger screens

Help and Feedback Art Design Support
, , , ,
#1
Former Question

I went to check how scaling is affected on different screen sizes, and while my laptop’s current display looks good enough, for 1080p and onward the scaling becomes too tiny.

Laptop

image
image1223×726 60.6 KB

1080p

image
image1224×724 68.8 KB

4k (3840 x 2160, 16:9)

image
image1226×728 80.1 KB

I wanted to make the GUI to look close to what the laptop screenshot looks for bigger screens.

Things I Have Tried:

AutoScale Lite

It didn’t work that well for scaling parts of the UI. Either that or I just don’t know how to use it. Conversion of Size units worked weirdly, with objects shrinking everytime I convert.

Size/Position.Scale

While this does work, it would take too much time to apply for every single object that needs scaling, not to mention converting Offset to Scale, and scaling Text.

UIAspectRatioConstraint

I had limited success with this, although Text won’t scale. TextScaled is bad for text appearance too because of how the size varies by length of string and the TextLabel/TextBox’s size. Based on other posts, this might not work to all of the components of my UI that required adaptive scaling.

So, uh...

Is there something else I could do to make my UI resize better for larger screens?

This post is now solved:

1 Like
#2

If you want to keep the UI scale for bigger screens, the only way to do it is simply use Position and Size scale.
To adjust text size while TextScaled is on, use UIPadding and UITextSizeConstraint on the text label.

#3

I have no clue how to perfectly convert Offset to purely Scale though.

For text adjustment, I think that’s literally how AutoScale does it.

#4

Honestly, I think that using the Scale properties is the only way.

What I typically do is scale normally, but add a bit of offset or even a UISizeConstraint for mobile devices since things can get cramped. You can use a UIListLayout in some areas if size might collide for something that has multiple parts set a distance from each other.

With my game primarily being Computer users, and it being the device I prefer, I can’t really stand the ‘mobile-first’ approach, as it seems to make things look quite big and like it was made for mobile.

I know converting everything will take some time, but you generally want to preview different resolutions as you’re working on interfaces so you don’t have to change it up later.

I still do have issues scaling some interfaces at times nicely (it’s not as simple as just adding scale on everything unless if you want it looking awful), but it does help that the majority of users aren’t on a device that handles non-upscaled 4K, so you should try and focus on 99% of screen sizes.

For example, I scale my inventory hotbar by XX, but widescreen monitors might suffer with it filling up half the screen for ~1:3. It would be insanely too much effort to pull off something like this for me, for the tiniest bit of reward, for something very few users have. I could totally script it to clamp the size depending on the viewports Y size, but I really like to leave as much to the engine as I can.

1 Like
#5

Curious though, have you tried UIScale? It can be a bit buggy at times, but I have used it to scale interfaces made entirely in offset in increments, like how Minecraft does it.

1 Like
#6

I’ve used UIScale in some other UI elements, but they’re mostly used for animating buttons.

Although, your suggestion kinda gave me another idea to make some sort of module to “lazily” scale my UI. I’ll see what I can do with UIScale.

#7

I’m not really a UI designer but I think a good solution would be UISizeConstraint.
I always set the scale, a little bit of offset size too and then add size constraint to set the MaxSize so the GUI gets bigger to some point and then it stays the same size.
Looks good for mobile, “normal” screens as well as huge screens.

#8

there are many plugin that do it try using this plugin

#9

I’ve already tried that plugin, as already said in my post.

#10

then i suggest using scripts to make it

#11

I’m already trying to create one, as said in this reply:

#12

Just set the offset to 0 and keep changing the scale until it looks the way you want?

#13

This is something I will always refused to do, since I will have to be accurate about the scales, and that I have probably gone too far. The screenshots I have don’t even include all the ScreenGuis.

I did find out that @Evercyan’s suggestion could work when a UIScale is parented inside a ScreenGui, since everything scales (even text) while maintaining window size, but I need to code a script that automates the scaling to see if it works.

#14

I’ve managed to make the script for UIScale now. It works just the way I like it! Also works when making the window smaller too:

Demo

The code is a module script. When required, it can be used to make ScreenGuis automatically scale. A Target_Resolution attribute is added to make the scaling and positioning look almost the same as if the user’s screen is the same as the attribute (in my case, my screen is at 1366 x 768).

The way is works is by inserting a UIScale inside the ScreenGui itself, and by comparing the shortest axis of the Target_Resolution and the player’s Camera, a value for the UIScale’s Scale property can be calculated.

Thanks, @Evercyan!

1 Like