FANDOM


Graphical User Interfaces(GUIs) are two-dimensional visual interfaces that humans use to interact with their computers. This tutorial is here to help users create Roblox GUIs in their own games.

Setting Up Studio

For this tutorial you will need to use a program called Roblox Studio. On most computers, it is located in Start Menu->All Programs->Roblox->Roblox Studio.

NewFile

Creating a new document

Once you open it, you will need to create a new game(File->New). After that make sure all the necessary windows are open, Properties(View->Properties), Explorer(View->Explorer), and Output(View->Output).








Understanding Roblox's Pixel Formatting

To understand how to use Roblox GUIs, you need to know how Roblox formats their pixels. Roblox uses two things, Scale and Offset.

  • Scale is a way of formatting size and position based on the total size of the screen. Example: A scale of 0.5 would fill up half of the screen and a Scale of 1 would fill up the whole screen.
  • Offset is a way of formatting size and position based on individual pixels. Example: An offset of 302 pixels is about 8 inches on the screen.

This is one of the most important things about using GUIs, so please note it down.

Creating a Gui

There is basically two ways to create a GUI in Roblox: Using studio, or creating them from a script. I will show you how to do both.

Using Studio


InsertWindow

Using Roblox Studio to create GUIs has it's pros and cons, but overall, it is good way to go for users aren't

GuiProperties

TextLabel Properties

intermediate scripters. Once you have Studio set up from the Setting Up Studio section, in the explorer window, click StarterGui, then click Insert->Object->ScreenGui. ScreenGui is used as a holder for other GUIs. You will put all your GUIs in ScreenGui. Now let's make a welcoming screen for users when they enter the game. Now, click the ScreenGui you just inserted in the Explorer window. Click Insert->Object->TextLabel. You can't see anything yet, but you are very close. Now click the TextLabel you just inserted and look in the properties window. In the properties window, you should see something that says, "Text". Now, change the Text property to "Welcome to my game!" or anything else you want to. Now, you don't see anything yet, but look in the Properties window for "Size". Now, it may look kinda funny, saying "{0, 0}, {0, 0}" but that is how Roblox formats its GUI's Size and Position in the Properties window. Look on the side of the Size property and click the "+" sign, expanding it. Once you expand it, you should see two more properties, "X" and "Y". Click the "+" beside them and expand them too. You should now see two more properties from both the "X" and "Y" properties, called Scale and Offset. Please refer back to the previous section, Understanding Roblox's Pixel Formatting, for more information.

GUIPixels

Our GUI's Position and Size

Now back to our GUI, change the size to 300 Offset and 0 Scale for both the "X" and "Y" properties. You should now be able to see the Gui in your game. For our welcome screen, we want it to be in the middle of the screen. Well, how do we do this? It is a very simple way, if you think about it. Expand all the properties of the TextLabel's Position property just like we did for Size. Now change the scale property to 0.5, for both the "X" and "Y" properties. This centers the GUI in the middle of the screen. You may be asking, "It doesn't look like it is in the middle of the screen, mattchewy. Are you crazy?" Well, I am crazy, but that is besides the point. A GUI's axis is based on its top-left corner. So, your welcome GUI is actually in the middle of the screen, based on its axis, but it just doesn't look like it. But how do we fix that? It's actually a quite simple answer. If you change the GUI's positions offset to -GuiSize/2, it becomes centered. So since we made are GUI's size 300 pixels, it's offset position will be -150. This makes it centered. Now you have a welcome GUI for your game. To do much more with GUIs, you will need a basic knowledge of scripting. You can look at the next section for more help with that.

Using Scripts


Here is the second alternative: Using Scripts. This section is for intermediate scripters. Please read the Using Studio section if you do not already understand what Scale and Offset are. Please open Roblox Studio from the Setting Up Studio section. In the Explorer window, click StarterGui. Then click Insert->Object->ScreenGui; ScreenGui is just a holder for other GUIs. Once you have done that, click the ScreenGui you just made and then click Insert->Object->Script. Next, double click the script you just inserted. You should see:

print("Hello world!")

Erase all of that, and add this code:

local Button = Instance.new("TextButton")
Button.Parent = script.Parent
Button.Size = UDim2.new(0, 100, 0, 15)
Button.Position = UDim2.new(0.5, -50, 0.5, -7.5)
Button.Text = "Click Me!!"

function OnClick()
Button:remove()
print("I was clicked!")
end

Button.MouseButton1Click:connect(OnClick)
If you test this in solo, you should see a button on your screen, that once clicked, removes itself, and prints that it got clicked in the Output window. Let's examine the code:
local Button = Instance.new("TextButton")
This snippet creates a new Text Button
Button.Parent = script.Parent
Since the script's parent is ScreenGui, a GUI holder, we want to also make the Button's Parent ScreenGui.
Button.Size = UDim2.new(0, 100, 0, 15)
Here, we are going to resize the button. Roblox GUIs use a function called UDim2 to use with GUIs. It is based off a previous section, Understanding Roblox's Pixel Formatting. The first argument of UDim2 is X-Scale. The second argument is X-Offset. The third is Y-Scale, and the fourth is Y-Offset.
Button.Position = UDim2.new(0.5, -50, 0.5, -7.5)
Here we are using the UDim2 function again, and we are basically centering the GUI; See Using Studio for more info on centering GUIs.
Button.Text = "Click Me!!"
This basically just shows the users the Button wants you to click it. You can change it to anything.
function OnClick()
Button:remove()
print("I was clicked!")
end

Button.MouseButton1Click:connect(OnClick)
Here are just setting up an event that removes the Button the button when it is clicked, and prints some information.

That is basically what the code does, and how it interacts with the GUIs. You can experiment with all of these, and change some stuff around.

Property Help

Here are some core properties that you can use to customize your GUIs.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.