What I mean is, when you change your window ratio, how do I make it have the same size? Examples are in RoBeats where when you change the window size, the images change resolution, but the ratio is the same. How would I do that? I cannot really find anything helpful on the internet. All I find is about UIAspectRatio, which makes it a perfect square.
You can set the Size of the GUI to use pixels instead of percentages. So a GUI Frame with a Size of UDim2.new(0, 250, 0, 25)
will ALWAYS be 250px
wide and 25px
tall, no matter the screen size.
the reason why I don’t use offset for size or position is because it might be too big or not in the right place in different devices.
One way you can deal with this, although it might not be the best way its the only way I can think of atm, is detect the screen size of the device. Then you can use an if / elseif / else
statement and change the size in pixels of the GUI so that it syats the same size unless the screen size os too small, after which it down-scales (a bit like using @media screen
queries in CSS
). Here is an example of what I mean:
-- (In a local script)
local Mouse = game.Players.LocalPlayer:GetMouse()
local ScreenX = Mouse.ViewSizeX
if ScreenX > 940 then
GUI.Size = UDim2.new(0, 250, 0, 50)
elseif ScreenX > 720 then
GUI.Size = UDim2.new(0, 200, 0, 40)
elseif ScreenX > 560 then
GUI.Size = UDim2.new(0, 150, 0, 30)
elseif ScreenX > 480 then
GUI.Size = UDim2.new(0, 100, 0, 20)
else
-- Screen width < 480 pixels
end
To keep my UI somewhat constant, I size the main frame relative to YY. And I basically never use offset, for the same reasons as you said :
The rest of the UI can be scaled relative to XY.