Hiya!
I’ve been working on finding the perfect size for my UI for a while, but I haven’t been able to find anything that looks good across multiple devices. Currently, I’ve played around with plugins like Auto Scale Lite and changed the Offset Values to scale, but nothing seems to be working.
Is there any way for me to detect the size of the player’s screen in a Local Script and change the UI size for that player based on that information?
Thanks
Replying for the boost on forum ^
You can get the players window size using Mouse.ViewSize[Dimension]
local Player = (…)
local Mouse = Player:GetMouse()
local WindowSize = Vector2.new(Mouse.ViewSizeX, Mouse.ViewSizeY)
Although I’m a little confused, are you not using scale for your gui’s size?
UDim2s have a scale and offset component, and scale can automatically adjust the size of an element for you based on the size of the players screen and any constraints applied.
I would probably look into UDim2.fromScale() first.
You could also experiment with the SizeConstraint property for UI elements. I sometimes use RelativeYY for the SizeConstraint property. However, I wouldn’t change it for every element—instead only the main frames/containers, not their children.
Hi mizal, I can tell you how I process to make my UI responsive design. I dont know if that will help you but I take the chance.
Firstly It’s important to know the difference of Scale and Offset. Scale is the normalized percentage of the screen resolution, so if you set Scale at 1 the frame will take the entier screen. Offset is the resolution of the frame in pixel. So if you set the offset at 200, it’s 200px and that not change with the screen resolution of the client like with Scale.
So if you want to make it easly I recommand to use Scale and change the SizeConstraint or use a UIAspectRatioConstraint. I recommand to made a square with the UIAspectRatioConstraint or change the SizeConstraint and made your UI in this square, like that you are sure your interface is everytime the same on all device and all resolution and that automatically change when the client resize the roblox client window on computer.
Example:
If you don’t want to do that, you can also use a the property AbsoluteSize of the ScreenGui and manually change the offset of your UI when the value of AbsoluteSize change. Personally I always develop on a 1920x1080 screen using the implemented tool named “Device” to lock the screen of the studio to this resolution. So I know what’s the original development size of my UI and I do a “cross product” to find the good size. This is an example:
-- Variables
local ScreenGui = script.Parent
local Frame = ScreenGui:WaitForChild("Frame")
local originalSizeX = 700 -- I assume the original size is 700x300 px for this frame.
local originalSizeY = 300
-- Functions
local function ResolutionChanged()
local screenResolution = ScreenGui.AbsoluteSize
local offsetX = (originalSizeX / 1920) * screenResolution.X
local offsetY = (originalSizeY / originalSizeX) * offsetX
Frame.Size = UDim2.new(0, offsetX, 0, offsetY)
end
-- Connections
ScreenGui:GetPropertyChangedSignal("AbsoluteSize"):Connect(ResolutionChanged)
-- Initialize
ResolutionChanged()
The first solution is the best I think, I personally use the second because I have had a lot of time to perfect this kind of practice. The second option requires a certain mathematical logic and more time unlike the first.
I hope I have helped you a little in your quest. If you have any questions, don’t hesitate to ask me!
Hello NiniScripter,
Thank you so much for your response, I was able to replicate both examples you provided and ended up going with the first one. The help is appreciated.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.