NOTE: THIS PAGE IS CURRENTLY A WORK IN PROGRESS.
Hi all. Odds are, if you're reading this, you want to learn more about GUIs. Well, you've come to the right place. Through this article, we'll teach you how to make GUIs of all kinds, shapes, and sizes!. I promise I'll make you a pro at this by the end of the article.
NOTE: This tutorial assumes that you have basic knowledge of scripting and using the Explorer and Properties features in ROBLOX.
GUI Terminology for Section 1
There are certain terms that you need to know before you read the rest of this article
Scale - This is a property of GUI objects that helps determine the GUI object's size. Scale is a number between 0.0 and 1.0 which will determine the size of a GUI object relative to the size of its parent object, for example if I stored a GUI with a scale of x = 0.8 and y = 0.8 inside a GUI with a total size of x = 1 and y = 1, then that secondary GUI's size would be x = 0.8 and y = 0.8.
Offset - This is also a property of GUI objects that helps determine the GUI object's size. Offset, unlike Scale, is not a percentage but a fixed integer which can be used to state the definite size of an object, and this size will remain constant regardless of the size of the parent GUI.
UDim2 - UDim2 values are values that closely resemble Vector3 values, except instead of storing 3 values (x,y,z), they store 4 values - x scale, x offset, y scale, y offset - and are formatted in according order.
BackgroundTransparency - This is a property indicative of how transparent the background of the GUI will be. Plain and simple.
Text - The text property on GUI objects such as TextLabels and TextBoxes
Visible - A true or false property. True means you can see the GUI, false means you can't.
Section 1: Making a Basic Text Display and Decorating It
Let's start nice and simple. Open up roblox studio and crack out an empty baseplate. Let's make a text display. We're going to create a simple text GUI saying "Welcome to my place! Have fun!"
The first thing we want to do is create a parent GUI for our main text GUI to be housed in, this must be done every time you decide to add a GUI to your place for users to see- so to do this, we must first select the "StarterGui" object in our Explorer. This will be the main directory which will house our first parent GUI. Now to insert the actual parent GUI itself, go to Insert>Object.. then select the ScreenGUI and press OK.Next, we want to add text to our GUI, so select our new ScreenGUI and go to Insert>Object..>TextBox. When you've done this, your Explorer should look something like the picture on the right.
Now, what we want to do, is, first, modify the size and position of our TextBox. For convention's sake, we're going to make this TextBox half the size of our screen, so input x scale = 0.5 and y scale = 0.5 for your TextBox's Size property. Next, we want the TextBox in the middle of our screen, so input x scale = 0.25 and y scale = 0.25 for your TextBox's Position property.
Now we need to change the actual text of the TextBox. To do this, change the "Text" property to "Welcome to my place! Have fun!"
If you performed all the steps above correctly, your screen should look something like the image on the right-hand side:Now, if you have any graphics designing experience on your shoulders at all, you may be noticing that our GUI is a little drab, and that the text is WAY too small. We can fix this. As you've probably seen before, our GUI object contains properties for modifying how the GUI object looks, along with a bunch of other cool settings that we can tweak to make our GUI even better! Firstly, we're going to learn to change the color and transparency of our GUI's background.
Colour and TransparencyAs you can see (left-hand side), our GUI contains 2 properties named BackgroundColor and BackgroundTransparency. If you weren't trying to follow this tutorial directly to the line you've probably messed around with them already. Anyhow, when we try to modify the BackgroundColor property, a color menu appears (right-hand side). This color menu allows you to pick a color for your TextBox's background to be. We're going to choose the Cyan that I currently have selected in the photo.
We've also noticed that our box's background makes it seem a little too "solid", so we're going to go ahead and modify its transparency - these transparency rules are the same rules used for modifying brick transparency. 1 is full transparency, 0.5 is half transparency, and 0 is no transparency. For now, we're going to go with 0.5.Now, if you've performed both of these tasks correctly, your GUI should currently look like the one in the picture on the right-hand side: