Tutorial:Intro to GUIs/Functions

Basics
A GUI (Graphical User Interface) is an object that appears on your screen that you can interact with (like the ROBLOX health GUI which displays (shows) your health). You may ask yourself, "Why are these important?". The answer is quite simple. If you're an elite scripter (or have some experience), you could create a game out of GUI's, instead of bricks. Or you could create a game using both, such as a zombie game that tells how many zombies are left and other crucial stuff.

How To Use GUIs
While editing your place, make sure you are viewing the Explorer window. There will be several objects listed in it, with one labelled "StarterGui". Select this object by clicking on it, go up to "Insert" button to the right of the "View" button, click it. Now click the one labeled "Object" that appears on the list. Look for an object called "ScreenGui" and select it. You can now either double-click or click ok, as either one does the same thing. The Explorer will stay the same, only with a StarterGui > ScreenGui now. From now on, when you insert GUI related objects (ImageLabel, ImageButton, Frame, TextLabel, TextBox, and TextButton), they will go directly into the ScreenGui, NOT the StarterGui. Another thing you should know is that GUI's don't use Vector3.new(0,0,0) like bricks do. They use UDim2.new for the size and position. Ex: GUI.Size = UDim2.new(0,0,0,0) (UDim2.new uses 4 values instead of 3) GUI objects also contain other values inside them, but you only need to know a few of them to make a basic GUI-created model.

Example one:

Example two:

As you may have noticed, you can have multiple objects inside the ScreenGui (how else would you make completed based GUI games?). You can also rename the ScreenGui AND objects in it with the Properties window while selecting the object. I will now define each GUI object in a way that anyone can understand:

StarterGui: Anything placed in here will be put in the player. The only thing you should really put in here is the ScreenGui.

ScreenGui: Anything placed in here will be displayed to the player that it's in.

PlayerGui: What the StarterGui puts objects in. This is inside the player.

BillboardGui: A GUI object placed in the Worspace. Any GUI objects inside it will be desplayed near its Adornee (set the Adornee to a brick). Invisible unless objects are placed in it.

TextBox: A resizeable GUI object that can be edited by the player in-game. Simply by clicking on it and typing. Very useful for GUI-based admin commands.

TextButton: A resizeable GUI object that can be clicked and, if programmed, cause an event. This object can not be edited in-game by a player. Only by a programmed command.

TextLabel: A resizeable GUI object that can be clicked. Has no real important use in programming. It only displays text which can't be edited in-game by a player. Only by a programmed command.

ImageLabel: A resizeable GUI object that displays an image. This can be set through the Properties window. Can't be edited in-game by the player. Only by a programmed command.

ImageButton: Same as an ImageLabel, but if programmed will cause an event when a player clicks it.

Frame: A resizeable GUI object that any GUI object can go into. Anything put into a frame will be edited to its size, so it makes multiple windows.

Functions/Statements for GUI's
All GUI buttons include the following:

AncestryChanged

Changed

ChildAdded

ChildRemoved

DescendantAdded

DescendantRemoving

MouseButton1Down

MouseButton1Click

MouseButton1Up

MouseButton2Down

MouseButton2Click

MouseButton1Up

MouseEnter

MouseLeave

MouseMoved

Example of MouseButton1Down being used (put a script OR local script inside the Button object): All GUI labels/boxes include the following:

AncestryChanged

Changed

ChildAdded

ChildRemoved

DescendantAdded

DescendantRemoving

MouseEnter

MouseLeave

MouseMoved

'''Example of MouseEnter and MouseLeave. Same follows as the above example for MouseButton1Down (MouseButton1Down does not work on labels or boxes):''' The GUI frame includes the following:

AncestryChanged

Changed

ChildAdded

ChildRemoved

DescendantAdded

DescendantRemoving

MouseEnter

MouseLeave

MouseMoved

Functions at MarketplaceService, or Others
Example of an open-close Frame (LocalScript) script on GUI: Example of a purchase gamepass script (LocalScript at Button, parented at Frame): I'm pretty sure you can figure out what most of these do, as all of the mouse-involved functions are rather easy to understand. Have fun using this knowledge in your game!