GUI screen AutoScaler

Resources Community Resources
, , , ,
#1

Hey!
I want to show you a script I just made to make the UI autoscale.

This script will help you make your GUI fit for all the Screens. For that just follow the following steps:

local Frame = script.Parent --Frame To Scale
local Proporcionality = Vector2.new(0.75,1) --Frame proportions (over 1)
local Camera = workspace.Camera or workspace:WaitForChild("Camera") --Don't touch
local ReductionRat = 0.8 --Reduction Ratiio (Is recomendable to don't touch)

Camera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
	local NewViewportSize = Camera.ViewportSize
	local Widther = (NewViewportSize.X/Proporcionality.X)>=(NewViewportSize.Y/Proporcionality.Y)
	if Widther then
		local SizeY = math.floor(NewViewportSize.Y/Proporcionality.Y)*ReductionRat
		Frame.Size = UDim2.fromOffset(Proporcionality.X*(SizeY*Proporcionality.Y)/Proporcionality.Y,SizeY*Proporcionality.Y)
	else
		local SizeX = math.floor(NewViewportSize.X/Proporcionality.X)*ReductionRat
		Frame.Size = UDim2.fromOffset(SizeX*Proporcionality.X,Proporcionality.Y*(SizeX*Proporcionality.X)/Proporcionality.X)
	end
end)

1. Insert the script parented directly with the UI element you want to autoscale
2. Set all it descendants size to only scaled size
3. Go to the third like of the script and write the proportionality your frame must have (over 1). For example, if your frame has a size of (200,400), you will need to put Vector2.new(0.5,1), or if your frame has a size of (60,90), you will have to put Vector2.new(0.666,1), The highert value will always be sustitued by 1 and the other one by the division of itself by the higher.

Now it should work perfectly!
Enjoy your autoscalable frame!
Optional: You can change the reduction ratio to make it bigger or smaller.

3 Likes
#2

It’s better if you used Responsive UI instead of this

2 Likes
#3

What’s the point of this script? Just use Scale instead of Offset and add a UIAspectRatio.

3 Likes
#4

All it does is mimic an aspect ratio, I don’t see any actual use in this.

2 Likes
#5

Sorry, I didn’t knew that existed on roblox. Could you send me the documentation please?

#6

Well, I made it to show the people how can they make it if they want to do smt that the UIAspectRatio don’t allows. The point of making this, is give the flexivility of variate the UIAspectRatio.

#7

What can you do with this that you can’t do with a UIAspectRatio…

2 Likes
#8

I don’t have the documentation but I will make a tutorial when I get some info about Responsive UI

1 Like
#9

With this, nothing. As I said, the idea is the people to modify if they need more flexivility. I just want to show a way of doing it. More times I feel stuck with a logic math problem and lose around 20 min, I just want the people to be able to solve it by just searching it on the dev forum, what takes much less than thinking it.

#10

But it is any type of roblox feature or it is one you will make? Since I have searched it and I didn’t find nothing about it.

#11

It is a roblox feature that ensures that the UI works in all devices

#12

Don’t it has documentation or any type of reference? Since if it is usefull, I would want to learn how it works and all it’s posibilities.

#13

I will make a topic which will help you, but I will draft it in my computer since I can’t make multiple topics at once

#14

Ok, thx!
Before you to publish it, where can I learn about it?

#15

a
b
c
d

these are what I found on google, the letters are clickable and it will take you to one (also why would a car company make a page about it)

#16

Id why a car company would make a page about it, but there isn’t in roblox any fueature called “Responsive UI”, no? I mean, (I have not readed the pages) but I don’t think they include smt about roblox and roblox don’t include it on it’s docs.

1 Like
#17

These are for Responsive UI in general but It’s possible in roblox

also let’s continue in DM’s

#19

I have run into such issues and I frankly hate working with UI constraints on Roblox. I have taken the approach of using offset almost exclusively, with sizing functions

You can make yourself a “BaseOffset” variable of some sort, which is calculated from the screen size, and used to set the size of all the UI elements

Setting the size of the parent depending on childrens is much easier

You can make more complex stuff like determining the amount of slots in a UI depending on the size of the UI and threshold values

I am someone who likes having a lot of control over what I do, and using offset gives me that control

The UI I make is also made from scripts

#20

UIAspectRatios are much easier than copying a script. You add one and then change the ratio value and that’s it

1 Like
#21

As far as I know you don’t need to use Scale for it anyways, and I don’t know anything that can’t be acomplished with Scale.

1 Like