So lately, I’ve needed a method of scaling UIStrokes efficiently across billboard GUIs and screen GUIs so I created this module and I’ll also release it because I have nothing else to lose I suppose.
Historically my code hasn’t been 100% flawless so if you are an earlybird to when this post is initially released you might want to bookmark it to stay up-to-date with bug fixes & updates. Also it’s like 3AM when I’m writing this and I’m like mentally gone with writing so this could be a trainwreck post.
Please note if you have any questions, ask them on the thread and I will do my best to reply. This is so others can read the posts and if they have similar questions it can be potentially solved with my response to yours. I’m very open to questions since I don’t explain this well enough (imo)
Features: (as of now)
- Billboard GUI UIStroke automated scaling
- ScreenGui UIStroke automated scaling
- Support for PascalCase and camelCase
- Automatic disconnection of events when UI objects are removed
Note
This will become way easier to do the more you end up using the module.
Model: (or module) (technically both)
This model contains the module (that’s a mouthful) for the project. It’s fully open-sourced and ready for you to use!
- Get the model here!
Confusing Documentation: *scroll down for less complicated documentation
- scaleGuiObject (or ScaleGuiObject)
--[[
This method scales a UI stroke on a standard screen GUI to
account for different screen sizes. This shouldn't need to be used if
you're using Offset in your UI design.
arguments:
<instance> UIStroke "The UIStroke you're trying to scale ykyk"
<integer> Pixels "The relative pixel size you're going for"
<integer> RelativeSize "Set this to workspace -> CurrentCamera -> ViewportSize.X
for your in-studio camera for the UI to maintain the scale it has in studio"
returns <array>
- <function> :disconnect or :Disconnect "Disables scaling"
]]
local strokeScale = require(...)
local uiStroke = ...
local methods = strokeScale:scaleGuiObject(uiStroke,10,1000)
-- These lines below are not necessary, they just show you how you can
-- disable scaling when needed
task.wait(1)
methods:disconnect() --> or methods:Disconnect
- scaleBillboardGui (or ScaleBillboardGui)
--[[
This method scales all UIStrokes in the specified BillboardGui
arguments:
<instance> BillboardGui "The BillboardGui you're trying to scale ykyk"
<integer> RelativeSize "Once all the UI strokes look nice in your billboard GUI
this will be the billboard GUI's AbsoluteSize.X property"
returns <array>
- <function> :disconnect(<void>) or :Disconnect "Disables scaling"
- <function> :changeRelativeSize(<integer>) or :ChangeRelativeSize "Exactly what it's called."
- <function> :changeStrokeSize(<instance>,<integer>) or :ChangeStrokeSize "Changes the
base size of the specified UI stroke for scaling"
]]
local strokeScale = require(...)
local billboardGui = ...
local methods = strokeScale:scaleBillboardGui(billboardGui,550)
-- These lines below are not necessary, they just show you how you can
-- disable scaling when needed and use the other methods
task.wait(1)
methods:disconnect() --> or methods:Disconnect
methods:changeStrokeSize(billboardGUI.UIStroke,50)
methods:changeRelativeSize(750)
More in-depth documentation
If that was way too much to comprehend (I get it lol I’m a horrible teacher), I will provide screenshot examples and code on how to do this while trying my best to explain it.
:scaleGuiObject
This is for GUI objects that use Scale instead of Offset
UI File: repro file 2.rbxm
- Getting the relative size
The relative size is what makes the cool stuff happen & scale the UIStrokes properly. To get this, all you need to do is go to workspace → CurrentCamera → ViewportSize.X
Your relative size is the X part (1000 for me)
- Writing your code
This process is pretty straightforward and I’ll get started right away.
local scaleModule = require(PATH HERE)
local uiStroke = PATH HERE
local pixelSize = 5 --> The pixel size
local relativeSize = 1000 --> The X part that we got above
scaleModule:scaleGuiObject(uiStroke,pixelSize,relativeSize) --> Scaling
That’s it! It should properly scale once you set up all the paths and variables.
:scaleBillboardGui
This is for BillboardGuis that use Scale instead of Offset and have UIStrokes only!
UI File: repro file.rbxm
- Create a billboard GUI and get the relative size
I created a billboard GUI with a frame and an UI stroke inside of that frame. I’m creating this function because if you have a UIStroke and you move far away from a scaled billboard GUI it looks like this:
But, I want it to have a smaller border. I’ll move the camera closer until the border looks better. Like this:
You’ll then take the “AbsoluteSize” X property of the BillboardGui (mine is 250)
Bam! This is your 'RelativeSize ’ property for the next step.
- Writing your code
Add the model from here and put it where you want it to go. Then start with the base code:
(THIS NEEDS TO BE IN A LOCALSCRIPT)
local relativeSize = 250 --> The absolute size property we got in the last step
local strokeScale = require(YOUR PATH HERE) --> This is the module:tm:
local billboardGui = YOUR PATH HERE;
strokeScale:scaleBillboardGui(billboardGui,relativeSize)
That’s it! My documentation may have made it seem way more complicated but it’s much easier than it looks. Now all of the UIStrokes will scale once the code runs and it’ll look nicer.
Outro:
Hooray! We’re done with this trainwreck post I wrote for an hour at 3AM with 1 brain cell
(What’s funny is I was supposed to do homework that would’ve taken 1/10th of the time I spent writing the code and then writing this post BUT NO I decided to do this for some reason pls help)
Other resources:
- RbxProxy - Ingame roblox web API wrapper
- Simple BubbleChat - Custom bubble chat system
- RbxLua - Lua API wrapper (not for in-game use)
- BetterChat - Custom chat system
- MarketplaceService Wrapper - Quick marketplace service wrapper
- Quickrun - Plugin running system
Credits
- @stravant for GoodSignal
If some like YouTuber that makes tutorials for some reason is seeing this and they happen to be a scripter can u pls PM me lol