UICorners and UIStrokes break on different screen resolutions... and other UI struggles

[XavvDev (xavvvv)]

I’ve designed a lot of UI for a game I’m working on, and a few days ago, I remembered that I needed to make it work for other screen resolutions too. This is what my UI looks like in Studio:

But, when I emulate a 1080p display, it looks like this:

Yikes. Not amazing. The thickness on the UIStroke and the radius of the UICorner seem to break on higher/lower res screens. Out of curiosity, I tried it on mobile:

Wha- Well now the thickness is too big! Well… it’s actually not too bad. Anyway, my point is, UIStroke thickness and UICorner radius doesn’t seem to work on higher resolutions. It is extremely annoying, because if I raise the thickness to make it look good on PC, it’ll look terrible on mobile. I want it to look exactly how it looks in Studio. What am I doing wrong??

P.S.: I’ve used Autoscale Plus’ SmartScale feature. Not sure if that’s important or not.

[bitsplicer]

Your are using offset size in UICorners like 0, 16. Use something like .5,0

[XavvDev (xavvvv)]

For circles, I use 1, 0, as this gives the most circular effect. As for non-circles, this may be able to help. My main problem though was that the UIStroke thickness was incorrect. Thank you anyway though!

[blve_hxrizon (toast)]

From what I have seen from the attached images, you’re using Scale in your UIs, which is interesting since UIStroke’s Thickness property refers to how many pixels it would take. So for example, if you put 10 in the Thickness, it would take 10 pixels for the stroke same thing goes for the Offset, it’s based on the pixels, Scale expands according to the screen ratio, not the screen pixels.

Size Scale Method:

Scale shrinks the size of the UI resulting in the UIStroke appearing thicker.

Size Offset Method:

Offset maintains the size of the UI and the UIStroke appears the same thickness across all devices.

Many popular games utilize the Offset sizing method as it serves far more compatibility than Scale has. Adopt Me, Murder Mystery, Welcome to Bloxburg, and even Roblox themselves utilize Offset in their core guis.

So to fix this issue, convert your UIs to offset, or maybe you can create a system of UIStroke autosizing according to the user’s viewport size (might be inefficient for performance).

[XavvDev (xavvvv)]

Hi,
I forgot to say this earlier, but I have fixed the issue.
Here is what I did:
First of all, in the command bar, I ran print(workspace.CurrentCamera.ViewportSize)
Then, I made this script (not entirely mine)

local Players = game:GetService("Players")

local Player = Players.LocalPlayer
local Camera = workspace.CurrentCamera

local PlayerGUI = Player:WaitForChild("PlayerGui")

local StudioViewport = Vector2.new(1079, 694) -- this is the value I got from the print
local SVAvg = (StudioViewport.X + StudioViewport.Y) / 2
local CurrentAvg = (Camera.ViewportSize.X + Camera.ViewportSize.Y) / 2

for _, v in ipairs(PlayerGUI:GetDescendants()) do
	if v:IsA("UIStroke") then
		local ratio = v.Thickness / SVAvg
		v.Thickness = CurrentAvg * ratio
	end
end

PlayerGUI.DescendantAdded:Connect(function(v)
	if v:IsA("UIStroke") then
		local ratio = v.Thickness / SVAvg
		v.Thickness = CurrentAvg * ratio
	end
end)

This works perfectly.

[XavvDev (xavvvv)]

One question, however. How do people use offset in their GUIs without the GUIs becoming inconsistent between screen resolutions. Is it a possibility that perhaps they make the GUIs smaller on 1080p, so it appears a good size on mobile?

[blve_hxrizon (toast)]

I do my UIs in offset and I always come across with sizing issues. My base frame is the iPhone 5s (iPhone 4 is unsupported).

It’s a whole trial and error process but in the end, it’s a lot better than Scale’s behavior, since in Scale if you have a decent size Settings Panel, it will be small on mobile and hella big on 1080p (or 4k) monitors, but with Offset; in mobile it’ll be big enough to be interacted with a finger and on 1080p (or 4k) monitors it’s just the right size.

Along the process, you can take advantage of the built-in objects such as; UISizeConstraint, UIPadding. No shade on Scale because sometimes I use it for fullscreen backgrounds.

In my case,

The confirmation prompt seems to be clipping into the screen but, with the use of AutomaticCanvasSize on ScrollingFrame, mobile players can navigate the clipping portion by scrolling. In modern phones, clipping should be infrequent.

[XavvDev (xavvvv)]

Interesting… Thank you for this insight!