GUI: The Ultimate Guide

Introduction
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 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

TextButton - A button with text.

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


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



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.



Now open Roblox studio and click this button:



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



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 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 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 Active] : A boolean: The GUI is either active or not active (So if a button is not active you can not click it)

[|BackgroundColor3 BackgroundColor3] : A color3 value to change the background colour.

[|BackgroundTransparency BackgroundTransparency] : A Float value, changes the background transparency.

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

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

[|Name Name] : A string value used to change the name.

[|Parent Parent] : The parent of the object

[|Position Position] : A UDim2 value: Changes the Positi on of the GUI

[|Size Size] : A UDim2 value: Changes the Size of the GUI

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

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

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

[|className className] : The className of the GUI

[|AutoButtonColor AutoButtonColor] : Automatically Changes the color of the button when clicked.

[|Image 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:



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:



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:



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!



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.



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.



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.



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.