Mobile UI Scaling Help

Hello, my name is Zentuz.

Today, I will like to ask your help, I need someone to inform me and teach me about Resolution scaling, what properties I should use for Mobile? Offset, Scale? UIScale, UIAspectRatioConstraint? If someone can teach me about these things and the best way to make a high quality looking mobile UI, please send me some tutorials.

Btw, I experimented myself a little bit, and using scale, I got some mashed potatoes results.

2 Likes

It’s actually kind of simple
first you will have to fit everything in one frame that is scaled to fit the whole screen
then, you will have to add a UIAspectConstraint to that frame
every other gui object you make will be in this frame and you have to make sure every position and size is based on scale because if any offset is accounted for, it will make it look different on other resolutions and thats what you dont want


2 Likes

So you would want to set all your UIs to have a Scale size. Then add in a UIAspectRatioConstraint. The best way to get the accurate AspectRatio is to divide the absolute size of the UI.
image
For example I would be dividing 721.6/286.065 to get 2.522503626798105. Then paste that number inside of the Ratio value. There are other ways to get a correct size, the way I use normally works.

1 Like

To make converting your sizes/positions to scale easier I would recommend this plugin -

It has a simple interface that will do it for you with one click of a button.
Alternatively, you could get the plus version that automatically does it as soon as the UI element is inserted into StarterGui, if you plan on purchasing this then you could just drag your ScreenGui into the workspace then back into StarterGui to have it automatically scale rather than having to manually scale it all, it’s a really good investment for UI developing.

Hope this helps!

1 Like