UI Stroke Thickness

[JTeaRBLX (JTea)]

UI Strokes make buttons look great with a little outline, however, the thickness property is not measured in scale or proportion relative to the parent ui but instead measured in pixels. This makes for perfect uistrokes on pc but awful uistrokes on mobile devices due to touching buttons

Mobile:

Laptop:

What would be a way to fix this issue? Would I have to create different UI versions for different devices? That seems inefficient when making changes to your ui.

[AmoraFolf (Amora)]

There is no way to get around this. You could use frames with smaller Z-indexes and make them larger to create a stroke, but that is annoying, not nearly as efficient or flexible, and if you make slightly transparent UI like I do, that will cause issues with the color.

As you said, you could make two UI versions, but that is incredibly painstaking and unethical.

[JTeaRBLX (JTea)]

Why would thicknesses be measured in pixels instead of scale anyway?

[bluebxrrybot (blueberry)]

Make a script to automatically scale the thickness of UIStrokes, based off your studio screen size, and the game screen size. The studio size would be hardcoded into your script, and you can compare the user’s screen size with this. The Y size should be dominant in determining the thickness.

[JTeaRBLX (JTea)]

Thats going to be quite challenging considering the different hierarchical structures. Is there a way to quickly filter out any UIStrokes in a big system?

[bluebxrrybot (blueberry)]

Something like this:

local studiosize = Vector2.new(1600,900) -- change this, I just pick random numbers

local function getratio()
    return workspace.CurrentCamera.ViewportSize.Y / studiosize.Y
end

local function onobject(stroke: UIStroke)
    if stroke:IsA("UIStroke") then
        stroke:SetAttribute("Thickness", stroke:GetAttribute("Thickness") or stroke.Thickness)
        stroke.Thickness = stroke:GetAttribute("Thickness") * getratio()
    end
end

local player = game.Players.LocalPlayer
for _, stroke in pairs(player.PlayerGui:GetDescendants()) do
    onobject(stroke)
end
player.PlayerGui.DescendantAdded:Connect(onobject)

[JTeaRBLX (JTea)]

Thank you so much, it works perfectly!

I wasn’t aware that “:GetDescendants()” was a thing, but that sure is useful.

Thanks again