GUI: The Ultimate Guide

12,577pages on
this wiki
Add New Page
Comments11 Share



This tutorial has been made for absolute beginners in scripting. Beware, though some parts may become advance you can always search the object up in the wiki search. I recommend you have basic knowledge of the ROBLOX Studio. The English I will use in this guide will be very basic for not everyone learns English and some of the players are very young. Learning how to control GUI is not just hard, but can take hours of practice. That however can be overcome, starting out simple is the best path.

GUI: What are they?

A GUI, Graphical User Interface, is a 2d object which can be viewed through your computer screen, however there are 3D GUI which will be explained later. User Interface basically means your connection between you (User) and the computer (Interface). How you and the computer communicate is done graphically, hence Graphical User Interface.

Everything you are able to see in a computer screen is a GUI and knowing this means you already have the key knowledge to understanding GUI

Special uses for GUI

In ROBLOX, the main uses for GUI was to show the Health bar and to use it for weapons. However, since the GUI system was released there has been many other Uses for GUI. These include:

  • LeaderBoards
  • Tutorials
  • 2D Games
  • Animations

The list is limitless, generally speaking, and its only limit is your imagination!

GUI System

As GUI was released, the service StarterGui was also released, it is like the Starterpack but it is used only for GUI. Furthermore, along with the StarterGui, the PlayerGui was also released. It holds all the player's GUI just like the Backpack.

The GUI Elements

ImageButton - A button with an image that you can choose by putting the link of the picture in ImageButton      

TextLabel - A label with text.

ImageLabel - A label with an image.
Frame - A container used to contain GUI.


TextBox - A container used to contain text.


Getting Started with GUI


The Start Button.

To start building your very own GUI, press the button .


The screen.

Now your screen should look like this if you have ROBLOX or ROBLOX Studio as a Shortcut press it,

If not press All Programs.



Now your screen should look a lot like this, also now find and click roblox: Ignore the other programs as these are the basic programs that my computer has.


The roblox screen

Now open ROBLOX studio and click this button:


Press the Tools button.

If your screen looks like this, then press the Tools button.


The correct studio view.

Now your screen should look more like this. This is the best view for the studio when using GUI. It can be changed around.

Inserting a GUI

To insert a GUI you must first go to [Insert]


Then click [Object] and a window like this will appear:


Now if you double click any of the GUI elements you learnt earlier it should appear in your explorer. Now double click the ScreenGui and place it in the StarterGui

It should look like this so far:


Congratulation! You have inserted your first Object.

GUI Properties In Studio

There are many properties however I'll explain the main ones that nearly every GUI has, then I'll explain the individual properties.

AbsolutePosition : A vector 2 value: The GUI's absolute position as if you use Scale instead of Offset then this will show you its position.

AbsoluteSize : A vector 2 value: The GUI's absolute size as if you use Scale instead of Offset then this will show you its size.

Active : A boolean: The GUI is either active or not active (So if a button is not active you can not click it)

BackgroundColor3 : A color3 value to change the background colour.

BackgroundTransparency : A Float value, changes the background transparency.

BorderColor3 : A color3 value to change the border's color.

BorderSizePixel : Int value used yo change the size of the border.

Name : A string value used to change the name.

Parent : The parent of the object

Position : A UDim2 value: Changes the Positi on of the GUI

Size : A UDim2 value: Changes the Size of the GUI

SizeConstraint : Sets the direction that an object can be resized in.

Visible : A boolean, if the GUI is visible or not.

ZIndex : An Int value, alters the order in which GUI items are placed.

className : The className of the GUI

AutoButtonColor : Automatically Changes the color of the button when clicked.

Image : A texture is need to get the image for the button.

Using GUI in ROBLOX Studio

I recommend this for everyone who is starting out on GUI. If you have read the guide so far you will know what to do. We are going to make a pop screen for users who have just joined your game. First insure that you have roblox studio open. Now press [File]->[New] to open a new roblox place or press CTRL + N. Now insert a ScreenGui onto the StarterGUI. Now insert a Frame into the ScreenGui and resize to {0,100}{0,100} and position it at {0.5,0}{0.5,0} also name it "Box" you can also color it. Your screen should have a box in the middle that looks like this:


Changing the color.


A few changes.

Now insert another frame into your frame, color it the color you want. Name it "Top". If everything you have done was correct so far, then insert a TextLabel. Its Text should say "Pop Up" and its Name should be "Pop" and its Parent should be "Box". Its Position should be {0.5, 0}, {0.125, 0} and do not insert anything into its size. Your GUI should look like this so far:


We changed the text.

Great, now lets insert TextLabel and name it "Down" and its Text should be "Welcome to my place!". Its Parent should be "Box" and its Position should be {0.5, 0}, {0.648, 0} and you are finished! It should all look like this:


The TextButton is at the top-right corner of the Frame "Box".

Now if a player joins your game, this will popup and the player will read it. The only problem here is that it will stay there permanently, unless scripting is involved. This GUI is not finished yet. Now it needs a Button!


Now we have changed the Position and Size of TextButton.

Now change the Position of the TextButton to {0,0},{0,75}. Change it's Size to {0,100},{0,25}. Now that should fit perfectly down at the bottom of your GUI. However, its color is bland and boring. Lets change it into a color that will fit the color scheme.


Now changing the colour is not so hard. Press the [...] button.

Insert the Textbutton like it shows on the picture. It is very important as we will use it to close the GUI later on when we are going to learn how to use scripting with GUI.


The BackgroundColor3 is 255;255;0 the color of pure yellow.

As you can see you can change the color by pressing the [...] button and a window should appear. Click the color you want and that will change the color of the GUI. I chose the best color I think is suited for this.


You can see the Text is Close.

As you can see I chose the color 255;255;0 the color of pure yellow. Now you can choose any color you want as long as the text is visible. Unless you do not want it to be visible.

Make the Text "Close" or you can choose anything else. However for this case I used "Close". It can be anything though, even "jkbf834rthuhw". We are finally finished with the GUI, congratulation! Now all we have left is the scripting, if you found this easy scripting is a piece of cake.

Using GUI in Scripts

Now the problem we encountered earlier can be fixed with a little bit of scripting. In this guide I'll show you how to make this appear when a player has entered and make it disappear on a click of a button. Now insert a script into the textbutton and copy and paste this:

bin = script.Parent

function Clicked()
bin.Parent.Visible = false

Now this script is very simple. I'll explain it carefully.

We created a new variable, named it bin and tagged it to script.Parent

bin = script.Parent

A new function called Clicked

function Clicked()

Bin's parent is "Box" so we will make "Box" invisible.

bin.Parent.Visible = false

Ended function


We used this listening event. The event is if mousebutton1down, if left clicked, then connect to Clicked.


Important Links

These are important links that will help you learn GUI. Visit them if you want to learn more.

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.