How do I achieve UI scaling like that?

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:

10 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

There are still cases where you should maintain aspect ratio instead of solely depending on scale.

EXAMPLE: Sizing guis inside of scrolling frames. If you only used scale, when you change the CanvasSize everything would stretched or shrunk on the axis you changes. Aspect ratio solves this.

1 Like

Sorry for re activating this, to get that type of scaling, you just have to do the following:

local CurrentViewport = game.Workspace.Camera.ViewportSize
local ReferenceViewportSize = Vector2.new(1920, 1080) -- change this to whatever screen size you want as reference.
local newViewport = Vector2.new(CurrentViewport.X/ReferenceViewport.X, CurrentViewport.Y/ReferenceViewport.Y)

-- Reference formula use:
TextLabel.TextSize * newViewport.Y -- Based on Text Bound property on the text label, X auto scales for Y, in which Y is TextSize.

Frame.Size = UDim2.new(0,100*newViewport.X,0,100*ReferenceViewportSize.Y)

The NewViewport is a multiplier where we divided the current to the reference, where it translate it into percentage

If both are the same size, then the result is equals to 1, meaning it doesn’t change anything.
If it is less than, then it will be a multiplier less than 1, which will make it smaller while if it is bigger then it is more than 1, which of course increases the size.

I actually use this to make an AutoScale for text.
Why I don’t just use text scaled? Well using this formula has more advantages, such as being able to edit the text size at will.

It is recommended, that this be used as a outer layer rather than an inner layer (Aka the ut most top of the heighercy before the ScreenGUI, why? If it is parented to another frame, and you want that frame be dynamic, while inside has autoscale, then instead of the viewportSize as your current viewport, change it to the AbsoluteSize (aka Translated to Pixels) to achieve the same effect. (You might also change the reference to the parented UI’s CONSTANT (aka non changing) absolute size))

1 Like