IMPORTANT!
This tutorial was created by Azuelix for the use of users of Lua Learning. It is not to be redistributed on any other platfrom without express permission from Azuelix and without the proper credits. It is strictly prohibited to take credit for this tutorial and all rights are reserved to Azuelix. You must at least know the basics of Roblox Studio and ScreenGUI's for this tutorial. Enjoy!
INTRODUCTION
Hey there! My name is Azuelix. I am an experienced Roblox Developer and I am going to be showing you how to scale your ScreenGUI's properly. A lot of people recommend using scaling plugins however when you do use these, you'll find that your GUI will 'squish' making it look very unprofessional and can ruin things like images. In this short tutorial, I will be showing you how to scale your GUI's professionally.
GETTING STARTED
To get started, all you need is to have your ScreenGUI ready. It is recommended that you follow this step by step so having a ScreenGUI at hand will be useful otherwise you may get stuck. Don't worry if you don't have one as there are pictures attached below to help you!
THE PROBLEM
It is very simple to scale your ScreenGUI. In the sample below, I have a Frame. In Studio, it seems completely fine and it seems to be to scale. However it isn't which is shown when I switch to mobile view.
This is a common problem among the development community and it is quite unknown how to fix it properly. However there is no need to worry because you have come across this tutorial! We will now get into why scaling plugins don't work.
THE PROBLEM WITH SCALING PLUGINS
Scaling plugins do the job but they never do it properly. The examples below show the GUI in studio and then on a narrow screen. As you can see, these plugins only do one part of the job. There are two parts to scaling a GUI. Making it stay on the screen and ensuring it doesn't change shape.
As you can see, these plugins don't at all fix the problem and can sometimes make it worse as they only do half of the job. Now let's get onto how to properly scale ScreenGUI's. This technique is used by all of the top developers and now you can use it too!
SCALING GUI'S PROPERLY
Firstly, you need to go to your ScreenGUI's element. In my case, the Frame in my ScreenGUI. Select it and go to it's properties in the Properties window. In the element's properties, you must expand the Size property fully by clicking the little grey arrow on the left until the property is unexpandable as shown below.
As you can see, there are two sections under the X and Y size property. These are Offset and Scale. These both work very differently and we now come the hard part. Now what we must do is set the Offset property in both the X and Y property to zero. This will do as shown below:
Don't panic! This is supposed to happen. If this does happen, congratulations! You are doing this all correctly. Now comes a bit of an explanation. You will now have to scale your ScreenGUI element using numbers and not the drag boxes. But don't worry! This isn't as tricky as you think. You just need to experiment with the numbers. Remember that if you put in 1, the ScreenGUI element will fill the entire axis you have put 1 into. For example, if you set the Y and X axis scale to 1, it will fill your entire screen no matter what. Once you have rescaled your ScreenGUI element as shown below, you can move onto the final stage.
Once it looks like this, you can use the drag boxes. Now what we want to do is scroll to the top of your properties for your ScreenGUI element. You will see some slightly transparent boxes. The one we are interested in is the Absolute Size property. Expand the property like we did previously with the Size property and you will see two properties which are the X and Y properties.
Now what you want to do is get out a calculator and divide the value in the X property by the value in the Y property. You can round it off to three decimal places if the number is very long. Now we need to do the something that will make this whole thing work. This thing is the secret ingredient to scaling ScreenGUI's. What we want to do is add a ScreenGUI element inside the ScreenGUI element we are trying to scale. This element is called the UIAspectRatioConstraint and is very crucial to this whole process. The element you are scaling will immediately be turned into a square shape.
Don't panic! This is supposed to happen. Now, get the number which was the result of the calculation you did earlier. Inside the UIAspectRatioConstraint you will find a property called Aspect Ratio. Now paste the number from the calculation in there and boom! Your ScreenGUI element is now scaled properly and professionally on all devices!
And just like that, you have scaled your ScreenGUI properly! This needs to be done for every ScreenGUI element even if they are inside another element that is scaled or not. Please do note that if you end up putting the finished result in another frame, it will shrink, so only do this on the elements that are direct children of the ScreenGUI.
CONCLUSION
I hope this has helped with your game development, project or whatever you are doing! If you have any problems, don't hesitate to contact me! I would be more than happy to help you out. Thank you for reading this tutorial and I will see you in the next one!
Azuelix ©