How Can I Scale UI Strokes

[CaelmDev (Caelm)]

Hey. I am working on a UI, but I notice when I shrink the screen as small as a phone, the UI strokes applied to the UI element stay the same size as the original screen. If you don’t understand what I mean by that, the UI stroke compared to the UI element itself is bigger than the UI element.

Expectation

Reality

If you can help me please do. Thanks!

[Exarpo]

Unfortunetely, UI Strokes don’t scale automatially. You may need to set the thickness programatically.

Let the buttons AbsolutePosition determine the thickness, for example:

stroke.Thickness = button.AbsoluteSize / 20

This would make the stroke’s thickness a twentieth of the buttons size on any device

[BendsSpace]

You’ll need code. Here is some:

-- LocalScript parented to a UIStroke

local BASE_SIZE = 1200

local uiStroke = script.Parent
local initialStrokeThickness = uiStroke.Thickness
local camera = game:GetService("Workspace").CurrentCamera

local function updateStrokeThickness()
    uiStroke.Thickness = initialStrokeThickness * camera.ViewportSize.X / BASE_SIZE
end

camera:GetPropertyChangedSignal("ViewportSize"):Connect(updateStrokeThickness)

updateStrokeThickness() -- nice catch from @ItsCaelmYt :)

This code scales the stroke by the x-axis of the screen.

If you want it to scale per UI element, Exarpo has an example of how to do that.

[CaelmDev (Caelm)]

This isn’t working for me… The stroke’s thickness is just set to 0.

[CaelmDev (Caelm)]

The code doesn’t seem to modify it at all…

[BendsSpace]

I just tested it and it worked for me. Try adding the code to a LocalScript inside a UIStroke:

Also note that the code only does anything while the game is running. You’d need a plugin to make it run while editing.

[CaelmDev (Caelm)]

I made it work. In the code you made above, it doesn’t call the function alone. I added updateStrokeThickness to the end of it, and it seemed to work. Is this what you meant to put or has something else happened?

[BendsSpace]

Ah you’re totally right. I’ll add that to the code.

I forgot to call the update function initially.

[CaelmDev (Caelm)]

Hey I have a question about the script
What is BASE_SIZE ?

[BendsSpace]

The code scales the stroke by the screen size, but it needs a screen size to compare to. Base size is the screen size that corresponds to a scaling of 1 (the stroke is scaled by screen size over base size).

It’s easier to explain with an example: say you had a stroke thickness of 4. If your screen size was half of base size, the stroke thickness would be 2 (half of the set thickness). If the screen was 2400 pixels wide, the stroke thickness would become 8.

You don’t really need to change that, it’s just a constant. You want it to be about the width of a regular screen.

[CaelmDev (Caelm)]

Also I made this thing

-- Made by @BendsSpace and edited by @ItsCaelmYt
-- Place in StarterGUI

for i, v in pairs(script.Parent:GetDescendants()) do
	
	if v:IsA("UIStroke") then

		local BASE_SIZE = 1200

		local uiStroke = v
		local initialStrokeThickness = uiStroke.Thickness
		local camera = game:GetService("Workspace").CurrentCamera

		local function updateStrokeThickness()
			uiStroke.Thickness = initialStrokeThickness * camera.ViewportSize.X / BASE_SIZE
		end

		camera:GetPropertyChangedSignal("ViewportSize"):Connect(updateStrokeThickness)
		updateStrokeThickness()
		
	end
	
end