Tutorial:Absolute Beginners Guide to GUIs

Welcome to the Absolute Beginners Guide to GUIs. This guide will guide you through several crash courses on creating GUIs and understanding the words behind all of it. GUI stands for Graphical User Interface. GUIs on Roblox are shapes, text, images and other 2D items on your screen that are a part of your Roblox gameplay. An example would be your health bar to the right.

GUIs are easy to make, but to make them interactive requires basic scripting knowledge. It is highly recommended you read some tutorials on scripting in Roblox Lua (or you may learn here) before you read about GUIs, as they are pretty advanced. However, if this did not discourage you, then I wish you luck in your quest to master GUIs!

You should have the Explorer window and the Properties window open at all times when working with GUIs.


 * To open the Explorer window, go to View > Explorer.
 * To open the Properties window, go to View > Properties.

GUIObjects & UIComponents
In Roblox, objects like buttons or text labels are known as GUIObjects which is an abstract class for a UI object. Every UI object will have inherited properties like Size, BackgroundColor3, etc. GUIObjects also have defined functions and events. A GUIObject or it's children can be manipulated through UIComponents. The UICorner component can alter how the corners of a GUIObject look, and the UIListLayout component can manipulate the layout of a GUIObject.

LayerCollector
A LayerCollector is an abstract class that holds 3 types of GUI containers. A ScreenGui, a SurfaceGui, and a BillboardGui. ScreenGui and SurfaceGui are pretty self explanatory. A ScreenGui is a container for GUIObjects that appear on your screen. A SurfaceGui is a container for GUIObjects that appear on surfaces (like on parts). A BillboardGui is a 2d container that is bound to a 3d object.



Frame
A is a simple yet applicable type of GUIObject that can be used for your GUI. They inherit a GuiObject's properties including BackgroundColor3, BackgroundTransparency, Size, Position, etc. They can look and be used in many different ways.

Text Objects
Text objects are GUIObjects like Frames, but they contain text. Because text objects are GUIObjects, they inherit the properties of them. Text objects also have their own unique properties like Text or Font. There are 3 types of text objects.


 * TextLabel: A label that contains text.
 * TextButton: An interactable button that contains text.
 * TextBox: A label that can take input. (Like a search bar or password box)

Image Objects
Image objects are also GUIObjects like Frames, but they contain an image. (Like a decal). They inherit the properties of a GUIObject but also have their unique properties like Image, ImageColor3, ImageTransparency, etc. There are 2 types of image objects.


 * ImageLabel: A label that contains an image.
 * ImageButton: An interactable button that contains an image.

UDim & UDim2
An UDim is a component used when working with GUI. An UDim can be either X or Y in an UDim2 coordinate and have 2 main properties.


 * Scale: The value this represents is scaled relative to the axis that this UDim is representing in a UDim2.
 * Offset: The pixel unit component of the UDim

Notation
UDim2 values is often denoted with brackets, but when writing UDim2 values in the properties window, brackets can be omitted as Roblox will automatically implement the brackets back in. When trying to write a UDim2 value in a script, you can use the .new constructor. Now you're probably wondering why I put two different ways of using this constructor. (no you're not, but I'll tell you anyways). It's because there's 2 ways of using this constructor.


 * Way 1: Using UDims
 * You can use the UDim.new constructor to make an X UDim and a Y UDim for your UDim2
 * Way 2: Altogether
 * You can simply put your scale and offset for each axis and that'll work too

These methods can be mixed as UDim2.new(0.5, 10, UDim.new(1, 0)) will also work

Scale
What the scale component represents is scaled relative to the axis that this UDim is representing (usually the parent). For example, if we were to set the position of a frame to {0.5, 0}, {0.5, 0}, the frame would be in the center of the screen. That is if we center the anchor point, else, it'll kind of just look like this. It's recommended you use Scale for sizing and positioning so it can maintain a size on all devices. if you use offset, it might look normal on a computer, but too big on a phone.

Offset
Offset is just that - a pixel offset. If an object's position is {0,100}, {0,150}, it will be placed 100 pixels from the left of the screen and 150 pixels from the top of the screen. Using XOffset and YOffset in Size will size the object by pixels.

AnchorPoint
Anchor point is a very important property when positioning and scaling GUIs. The type data for anchor point is Vector2 (X & Y). Anchor point is the origin point of a GUI relative to it's absolute size. Basically what this means is, the anchor point of a GUI tells where to resize the GUI from or position it. So basically when you position something, you're basically only positioning the anchor point, and the GUI itself is moving relative to the anchor point. Anchor point works just like scale. If the X value is 0.5, the anchor point will move to the middle horizontally.

GUI Tutorials
Well now that you've learned about GUIs, let's make one! Before we get into it, let's make our ScreenGui where the GUI will appear.

Create a new ScreenGui into StarterGui by hovering over StarterGui and clicking the plus button, then find ScreenGui. (You may search for it if you need to) And that's the first mandatory step! You can look at the tutorials below if you'd like. I'll be on my way, cya!

also wip yes: wip hi wip! wip
 * -|Annoy button GUI=
 * -|Typewriter=
 * -|Disco GUI=
 * -|Animatable Show/Hide=
 * -|Shop GUI=