How can I fix the UiStroke Sizing

Hello! How can I make my UIStroke not go to big on other devices/rescaling your tab? This ruins the look of the UI, and I would like it to not do this. How can I do this, without really ruining any performance? I know Pet Simulator X has this, and I am really curious on how they did it.

Example on what I mean:
PC:


Mobile:

Any help will be appreciated! :slight_smile:

6 Likes

You can create a system with the camera’s viewport size to provide a proportional experience for all devices. This is what I do because I don’t know any other ways to do it either.

Introduction (pls read)
I’m trying not to overcomplicate this but I would like you to learn how this works so I’m having a lengthy response, this is also for people in the future who are struggling with this sort of issue and they can refer to this.

I’ll provide sample code on how to start this, but you should read the code because it’s not going to automatically work straight away. You will need to add your own logic, I’m just providing the base work. I think that it’s best you learn how it works instead of just copying and pasting the code and expecting it to be 100% perfect, but that’s my opinion.

You should start by getting your screen size on the X axis (for studio). You can do this by going to workspace > Camera and then properties and ViewportSize and the X part of that.

Fractions
You can then set up a fraction that’ll work for the code below, such as 5/989, this creates a very small number but it’s very crucial to making this scale properly. For example, my 5 pixels is different from someone with a screen size of 667x375 (iPhone 6). This code will multiply the client’s screen size by the fraction, and for example the 5 pixels for me is now 3.37 pixels on iPhone 6!

I’m sorry if I gave you a stroke trying to understand that, but I’m not really the best at explaining things. If you have questions PM me and I can go more in-depth.

Code example ig?:
please note that this code is not 100% flawless and can have performance issues if the client does something stupid but it’s a base concept idea for you

local currentCamera = workspace.CurrentCamera
local runService = game:GetService("RunService")
local heartbeat = runService.Heartbeat;
local pixelFraction = 5/989 --> Pixels in studio divided by workspace.Camera.ViewportSize.X (for me)

local onViewportSizeChange = function(vector2)
	local pixelSize = vector2.X * pixelFraction --> This will be the size of your UI stroke
end

-- We'll link the property changed signal because the client can change their viewport size if they're on PC
currentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
	heartbeat:Wait() --> Roblox is wack and when the camera viewport size property is changed it doesn't update instantly
	onViewportSizeChange(currentCamera.ViewportSize)
end)
onViewportSizeChange(currentCamera.ViewportSize)
14 Likes