A Complete Guide to GUIs.
Written by Discgolftaco231.
This is 2 of 5 guides that will come out every day or half-week.
Before we get started, I just want to let you know that this information is not final and if there is anything that is incorrect, please let me know and I will edit the wrong information. Thanks! 
So, What Even is a GUI?
As many of you already know, the acronym GUI means Graphic User Interface. Also, just want to let you know, UI means the same thing as GUI There are three types of GUIs in Roblox:
- ScreenGui
- SurfaceGui
- BillboardGui
GUIs Contain a list of instances, which can be used to create amazing 2D Menus! These are the different UI instances:
-
ScreenGui
Where all GUI elements have to be placed depending on which type of GUI is preferred. Shows on screen like a menu and is placed in the StarterGui Folder.
-
SurfaceGui
Where all GUI elements have to be placed depending on which type of GUI is preferred. Shows on a Part’s surface and is usually placed in a Part, in the Workspace.
-
BillboardGui
Where all GUI elements have to be placed depending on which type of GUI is preferred. Shows as a “floating” GUI above the parented Part and is usually placed in a Part, in the Workspace.
-
Frame
Holds all UI elements listed and helps organize different GUI layers such as menus.
-
ViewportFrame
Renders 3D objects such as Parts in a scalable Frame.
-
ScrollableFrame
Just like a regular Frame, but can be scrolled up and down.
-
TextLabel
A containment box for pre-written text that cannot be clicked on.
-
TextButton
A containment box for pre-written text that can be clicked on.
-
TextBox
A containment box for text that the player can insert into
-
ImageLabel
A containment box where an uploaded image can be inserted into but cannot be clicked on.
-
ImageButton
A containment box where an uploaded image can be inserted into and can be clicked on.
There are other GUI modifiers such as UICorner, but we will get into those in the next Guide.
Alright. Let’s keep going 
What Can a GUI Be Used For?
GUIs can be used for my things, but the most common is game menus. A GUI artist can make their game menu any way they want; and you can too! As you get more comfortable with GUIs, you can begin making more complex designs!
Here are a few examples of great GUIs:
Click here to view @exshop’s GUIs
Click here to view @infiniteRaymond’s GUIs
Click here to view @Alend43’s GUIs
Click here to view @LoadingL0n3ly’s GUIs
Are There Any GUI Effects?
Yes! There are special effects for elements in your game called Tweening. What Tweening does is it allows certain GUI animations and transitions to be applied to your GUI. These Tweens are applied by LocalScripts. Although they seem confusing at first, once you get used to scripting them, it gets really easy! Here is a code snippet of a Tween:
local START_POSITION = UDim2.new(0, 0, 0, 0)
local GOAL_POSITION = UDim2.new(1, 0, 1, 0)
local guiObject = script.Parent
local function callback(state)
if state == Enum.TweenStatus.Completed then
print("The tween completed uninterrupted")
elseif state == Enum.TweenStatus.Canceled then
print("Another tween cancelled this one")
end
end
-- Initialize the GuiObject position, then start the tween:
guiObject.Position = START_POSITION
local willPlay = guiObject:TweenPosition(
GOAL_POSITION, -- Final position the tween should reach
Enum.EasingDirection.In, -- Direction of the easing
Enum.EasingStyle.Sine, -- Kind of easing to apply
2, -- Duration of the tween in seconds
true, -- Whether in-progress tweens are interrupted
callback -- Function to be called when on completion/cancelation
)
if willPlay then
print("The tween will play")
else
print("The tween will not play")
end
This code is from the DevHub Tweening page.
We will get more into tweening in the next Guide!
GUI Object Coloring? What is That?
It is pretty much exactly what it sounds like. In certain GUI elements, you can change the color of the background, border, and others! You can even select Color Gradients to apply to background colors. You can find these settings as well as other fun settings in the Properties tab of certain GUI elements.
Thank You!
Thank you for reading my guide! The next guide will come out between 9/13 to 9/20. Please let me know if there is anything that needs editing, or needs to be added/removed.
If you would like to have your own GUI on display, please reply with a link to a #bulletin-board post with your GUI submission.
Have a great day/evening!
Special Thanks to:
- @exshop for display of their GUIs.
- @infiniteRaymond for display of their GUIs.
- @Alend43 for display of their GUIs.
- @LoadingL0n3ly for display of their GUIs.
Links Used:
- https://devforum.roblox.com/t/thoughts-on-guis-i-have-made/733824
- https://devforum.roblox.com/t/what-do-you-think-of-my-gui/761792
- https://devforum.roblox.com/t/feedback-on-my-ui/731378
- https://devforum.roblox.com/t/feedback-on-some-of-my-uis/741737
- https://developer.roblox.com/en-us/api-reference/function/GuiObject/TweenPosition
Thanks for reading! Stay tuned for the next Guides!