How do I achieve UI scaling like that?

If this is not performed by a script, then i’ll move it to art desgin support!

Pretty self explanatory title. I’m not very experienced in UI scaling but I’d love to know how that UI manages to scale evenly depending on the screen resolution!

Thanks in advance!

2 Likes

might wanna use UiAspectRatioConstraint?

2 Likes

I tried that, but it still doesnt behave how i’d want it to.

Am I not understanding UiAspectRatioConstraints correctly?

I would say that UiAspectRatioConstraints sucks. Use scale. There are plugins that convert from Offset to Scale, or you can do it manually. Using Scale will work with Almost any screen size and device.

1 Like

Scale wont work for what im attempting to do.

1 Like

This might not be exactly what you’re looking for, but I find that it works nicely for me so I figured you might want to give it a try.

In my game I scale my primary / base frame using Scale, not offset.

I then use a UISizeConstraint to set a min/max size of the frame in offset (I know the aspect ratio doesn’t 100% match up between my Min/Max values but it shouldn’t matter anyway). You can also uncap the max size for all screens by setting the values to inf, inf.
image

Finally I use a UIAspectRatioConstraint to ensure the frame keeps a constant aspect ratio, for this specific UI I have the DominantAxis as Height, but Width is also an option incase you do not like the results with Height.
image

The end result should be something similar to this:

9 Likes

You should do everything that @Tom_atoes said to do, but you can do that easier with this plugin, if that helps you at all AutoScale Lite - Roblox
you can convert the offset immediately to scale without having to calculate, and it will put an aspect ratio constraint with all the properties already done for you.

2 Likes

Some of my friends have just used a .1 or decimal into the positioning of the UI, sometimes it works and sometimes it doesn’t. Hopefully this can help.

yes, this is not related to scripts (or is it)

there’s a plugin that auto scales any GUIs without using your calculator (lol)

other people already sent the link, but i’ll send one anyway

it let you scale texts too (and it let you adds UIAspectRatioConstraint to your GUI as well)

Check for Camera.ViewportSize changing, and then update scaling inside code.

What they did was more than likely just scale it using aspect ratios. I’d only do the ViewportSize stuff if you tryna get square based objects in a GridLayout

To Everyone Replying to use AutoScale Lite: the screenshot I took comparing the two was made using that plugin

2 Likes

The thing is though, aspect ratios still dont give me the desired effect :confused:

Viewports (although keep a very nice scaling UI) mess up the positioning and dont scale down enough (look at comparison)

I thought of maybe using UIScale and changing its value based on the resolution?? But I dont know how to properly run calculations for something like that

1 Like

You can use both UIAspectRatioConstraint and UIScale. UIAspectRatioContraint is self-explanatory, but UIScale makes it so that every pixel gets scaled-down based on UIScale.Scale.

This would require some scripting. Checking the canvas size and dynamically change the UIScale based on one or both axis.

Great plugin, I use it all the time.

Sadly, this is still not what im looking for, however I really appreciate the tutorial as I surely will utilize those tips in the future! :grin:

I’m pretty fine with scripting, but horrible at math. If someone here could explain me how would that work atleast in theory (more elaborated) I could see if it matched my goal.

It takes just a bit of testing to see the pattern you can use for the Scale property of the UIScale to make it fit. I find that dividing the ViewportSize.X by 886 works:

UIScale.Scale = workspace.Camera.ViewportSize.X / 886

I Just use this plugin that automatically translates the position or size to scale or to offset

Autoscale - Lite

Please read the replies. AutoScale Lite is not the solution to my problem and it’s been posted 3 times here now.

1 Like

I have been able to achieve this by using [Plugin] AutoScale Lite for GUIs - Scale your UI to convert to scale and to automatically add UiAspectRatioConstraints