Hi guys I have a problem with ui stroke on pc the ui stroke looks normal my and clear but on mobile ist very big and not clear how can I fix this
Ui stroke size always changed a bit depending of the screen size, it is bigger on smaller screen and smaller on bigger screen, unfortunatly, there is no way to fix it via studio…
There is 3 solutions to this:
-
You have to do your Ui’s as images, so you made your Ui’s on an external website or software and add the stroke outline to it, then import it to Roblox as Image.
-
About the frames, buttons or images, you can do a background copy of them.
As an exemple, add a Frame as a “background” which will be the stroke outline, then add a new Frame and a UiGridLayout as child of the background frame. Change the settings of the UiGridLayout to keep the new frame at the center, with a size of something like 0.95 (scale). -
Make a Local Script to detect if player is on PC, Console or Mobile, then change the Stroke size depending of the device.
I’m not sure if it is possible, but if you can dirrectly get the screen size, or the Roblox Player App windows size, then you can do a small calculation to adjust the stroke size depending of it.
I will explain this simply.
The thickness of a UIStroke is based on offset, and offset essentially equals pixels on the screen.
Since mobile screens have less pixels, possibly half as much, the ui stroke will look twice as big because its size is not dependent on the screen size
I would make a script that compares the viewport camera size to adjust it.
local StandardX = 1920
local ClientX = game.workspace.currentcamera.ViewportSize.X
local Multi = StandardX/ClientX
UIStroke.Thickness = math.clamp(5 / Multi, 1, math.huge)