UIStrokes Scaling made simple

[Yarik_superpro (Yarik)]

Yall all had an issue scaling UISrokes right?

Well for that i made a simple formula that will let you scale them properly
I were in need of scalable Border/UIStroke/RichText and i decided to mess around with formulas and somehow managed to find a working method.

If you want short simple answer here is the formula:

local size = 50
local ViewPort = workspace.CurrentCamera.ViewportSize
math.min(ViewPort.X,ViewPort.Y)/ViewPort.Y *size

How does it work?
It works similar to UIAspectRatioConstraint
If X is bigger than Y then we round it to Y and devide by Y and multiply by size
I haven’t found any tutorial like mine with this answer; It were either some meh UI bloatware frameworks or such plus they all were doing this simple thing WRONG.
Funny how i figured out answer randomly

UPDATE:

Hower i just made another formula (with ChatGPT’s help this time) that works similarly and fully replicates UIAspectRatioConstraint
IF YOUR UISTROKE DOESNT USE UIAspectRatioConstraint THEN USE PREVIOUS FORMULA!

--Tips:
	--1920/1080 = 1.7777777777777777 Ratio
	--Ratio*Y = X
	--X/Ratio = Y
local size = 50
local ViewPort = workspace.CurrentCamera.ViewportSize
local Ratio = Vector2.new(1080, 1080) -- `UIAspectRatioConstraint`'s Ratio would be 1
local Scaled = ((ViewPort.X/ViewPort.Y>Ratio.X/Ratio.Y and ViewPort.Y/Ratio.Y) or ViewPort.X / Ratio.X) *size

Goodluck!

[FinsterHorizon (polyheaddude)]

Is this for like, when it’s on a BillboardGUI?

[Yarik_superpro (Yarik)]

No.
Only for 2D.
It is very expensive for 3D; Consider stacking UI Objects ontop of each other for this effect/canvas groups

[JAcoboiskaka1121 (Skellyton)]

@Yarik_superpro

I haven’t found any tutorial like mine with this answer

UIStrokeAdjuster - Properly scale your UIStrokes!

PROBLEM Simply…UISTROKES ARE THE PROBLEM! After its release, there have been many complications using UIStroke in projects. UIStrokes don’t properly scale relative to screen resolution (devices) nor relative to camera distance on BillboardGuis. To counter this issue, I created the “UIStrokeAdjuster” module! BEFORE UIStrokeAdjuster AFTER UIStrokeAdjuster SOLUTION Features Effectively uses CollectionService Automatically recursively tags ScreenGuis and BillboardGuis i…

How to scale UI Strokes across All Devices

Hello! My name is Caelm, and I am going to teach you how you can scale UIStrokes in these three easy steps! By using this tutorial, you can turn unintentional large UIStrokes on smaller devices into UIStrokes that look exactly the same on different screens! Step One Open Explorer, and find StarterGui. Add a ScreenGui into StarterGui. You can name this ScreenGui whatever you want, but I’m going to name mine UIStrokeScaler. [image] Step Two Inside your ScreenGui, you want to add a L…

UIStroke not scaled perfectly in different device

So I make a stats gui that look like this [image] In my screen (desktop) it looks good. But when I test it from mobile view, the UIStroke is not perfectly scaled like in the desktop view [image] is there any way to fix this?

Make UIStroke Responsive on All Screen Size

Hi UIStroke is now live but the Thickness property accepts a number instead of UDim and with that it’s rather difficult to make it responsive. If you apply a UIStroke to a button and set the Thickness to 5 this is how it will look on a 1920x1080 resolution screen: [image] while it looks like this on the 667x375 screen [image] finally, this is how it looks like in studio [image] pretty big difference, we can make all of them look like the one in studio with some code though. I’ve decide…

Its not new, and most of them work, especially the last one i linked. which I use personally.

[Yarik_superpro (Yarik)]

The problem with them is they simply don’t work as promised.
While they may do work but the point with Thickness is to shrink it down incase it covers your screen.
All they did is devide it by 2?(that stuipid) or do some weird/scary calculations
In other words complete misunderstanding on how screen resolutions work.
Hower im gonna be honest UIStrokeAdjuster - Properly scale your UIStrokes! did it probably the closest; yet still failed with some weird “Studio Resolution” constants.
You still haven’t provided any argument of them doing it right
Also my tutorial is right to the point with formula and not some annoying UI frameworks.
Dont want to look egoistical but please lets be honest here.

[JAcoboiskaka1121 (Skellyton)]

@Yarik_superpro

The problem with them is they simply don’t work as promised.

Wdym?? I usually use the last one, and it works perfectly on everything.

@Yarik_superpro

All they did is devide it by 2?(that stuipid) or do some weird/scary calculations

Kinda, but it works, thats what matters.

If you call these scary calculations, you havent seen scary calculations:

local studioAverage = (STUDIO_SCREEN_SIZE.X + STUDIO_SCREEN_SIZE.Y) / 2
local currentScreenAverage = (camera.ViewportSize.X + camera.ViewportSize.Y) / 2
local scaleFactor = currentScreenAverage / studioAverage

@Yarik_superpro

You still haven’t provided any argument of them doing it right

Wdym? go test out one of these, or if you’re to lazy, try the last one i linked. They work. And if it works, why reinvent the wheel? I dont think they are doing anything inherently wrong.

@Yarik_superpro

Also my tutorial is right to the point with formula

So are all of the ones I linked, you just have to do some digging, people still have to implement yours and make it work, unlike the last one i linked which literally has 2 solutions.

@Yarik_superpro

please lets be honest here.

I kinda am?? do some digging before posting something.

[SomeFedoraGuy (octav)]

@Yarik_superpro

It is very expensive for 3D

It is?

[Yarik_superpro (Yarik)]

Billboard GUIs are more specific when it comes to that.
I recomend you to use frames as outline in this case.

[Yarik_superpro (Yarik)]

Ok i made another method for scaling
Better than first one if you combine that with UIAspectRatioConstraint
For rest i would still use first method as since it is more simple and looks better on regular non UIAspectRatioConstraint scaled GUI

[Yarik_superpro (Yarik)]

btw if you want raw ratio:

local AspectRatio = 1.7777777777777777777
local Ratio = Vector2.new(1080*AspectRatio,1080)