Scaler uses UIScales to automatically scale your UI across different resolutions at runtime. This uses CollectionService to keep track of all the UIScales and updates the Scale property for each of them when you change your ViewportSize.
The demo place has a bunch of premade UI examples. You can check where I placed the UIScale object; I named them UIScale.TAGGED as to not get it confused with other UIScales that I do not want Scaler to automatically scale.
Links
Github: https://github.com/Y1195/Scaler
Roblox Model Scaler - Roblox
Demo Place: UI Scaler Demo - Roblox
Video Demo: Roblox UI Scaler Demo - YouTube
Requirements
Tag Editor: Tag Editor - Roblox
Basic usage
Place the LocalScript in StarterPlayerScripts.
Use
Scaler:GetAttribute("Scale")
and
Scaler:GetAttributeChangedSignal("Scale")
to get the current scale value.
Designing your UI
I recommend using Emulation when designing your UI. Set the size to Actual Resolution so as to not get any pixel rounding weirdness.
Step 1
Pick a resolution you feel comfortable designing your UI at. In my case, I have a 1440p monitor, I pick HD720 in the device emulator. Try to keep a 16:9 aspect ratio if you can as most people will have this aspect ratio. Scaler will work with different aspect ratios; you have to test your UI to see if it scales nicely. This will be the size of your UI when the Scale value is 1.
If you pick a too big resolution
You will end up having to scroll in order to see each corner of the screen. You can use Fit to Window or pick a smaller resolution to see everything.
Example: I cannot emulate a 4k display using Actual Resolution without scrolling the viewport.
Step 2
The LocalScript should have the attributes Resolution and Scale. Take the Y value of the resolution you picked and divide 1 by that number. I picked HD720, the Y resolution is 720 so the Resolution attribute will be 720. If you picked 1080p to design your UI at, then your Resolution attribute will be 1080.
Step 3
Place UIScales in your UI. Tag them using the Tag Editor. You can change the tag name in the Scaler ModuleScript, see SCALE_TAG variable.
You only need 1 Scale per UI “container”.
Use Offset instead of Scale to size your UI. You can check the example place to see where and when I use Scale and Offset.
Step 4
Test your UI. Disable the device emulator and run a play solo test. You should see that your UI has scaled to your viewport’s resolution.
Play around with the viewport size to see how your UI scales. You can also change the Resolution attribute during run time if you find your UI too big or too small.
Notes
You may have to divide by the scale if you are scripting UI in some cases. If you find that the size or position is not correct, try dividing the final calculated size by Scaler:GetAttribute("Scale")
Summary
Making sure your UI scales nicely across different resolutions is hard. Many people suggest using Scale instead of Offset or use a plugin to properly scale your UI. This method of using UIScale to scale your UI allows you to use Offset instead of Scale.
Updates
v1.1
Now is a LocalScript instead of a ModuleScript.
Now uses attributes instead of going into the script to change values.
I highly recommend checking out the demo place as it is somewhat difficult to explain the process.
If you are free, please contact me via Discord: undaunted#4227