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.
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:
Example of MouseButton1Down being used (put a script OR local script inside the Button object):
gui = script.Parent -- This will define "gui" as the script's parent. In this case, the GUI button. player = gui.Parent.Parent.Parent -- This will be the player. gui.MouseButton1Down:connect(function() local ch = player.Character -- The player's character. if (ch ~= nil) then -- If the character exists. ch.Head:Remove() -- I think you know what this does. end end)
All GUI labels/boxes include the following:
Example of MouseEnter and MouseLeave. Same follows as the above example for MouseButton1Down (MouseButton1Down does not work on labels or boxes):
gui = script.Parent -- You know what this does already >_> gui.MouseEnter:connect(function() for i = 1, 10 do -- It will repeat 10 times. gui.BackgroundTransparency = gui.BackgroundTransparency + .1 wait() end end) ----------------------- gui.MouseLeave:connect(function() for i = 1, 10 do gui.BackgroundTransparency = gui.BackgroundTransparency - .1 wait() end end) -- When you move your mouse inside the object this is in, taking that it's in the right place, it will turn invisible. The opposite happens when your mouse leaves the area.
The GUI frame includes the following:
Functions at MarketplaceService, or Others
Example of an open-close Frame (LocalScript) script on GUI:
local button = script.Parent --Location of the button. local function onClick(button) if script.Parent.Parent.Frame.Visible == false then script.Parent.Parent.Frame.Visible = true script.Parent.Text = "Close" elseif script.Parent.Parent.Frame.Visible == true then script.Parent.Parent.Frame.Visible = false script.Parent.Text = "Open" end end script.Parent.MouseButton1Click:Connect(onClick)
Example of a purchase gamepass script (LocalScript at Button, parented at Frame):
local MarketplaceService = game:GetService("MarketplaceService") local button = script.Parent local player = game.Players.LocalPlayer script.Parent.MouseButton1Click:Connect(function() game:GetService("MarketplaceService"):PromptGamePassPurchase(player, 0000000000) --The gamepass ID. if game:GetService("MarketplaceService"):UserOwnsGamePassAsync(player, 0000000000) then --Checks if player owns gamepass or not. error("Gamepass already owned") --Errors that the gamepass was already owned. end end)
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!