Fandom

ROBLOX Wikia

GUI Basics/Functions

< GUI Basics

12,805pages on
this wiki
Add New Page
Comments0 Share
StarterGui-1-

Bigger view of the StarterGui.

  • The StarterGui picture that you see in the Explorer window.
  • What you put into the StarterGui. The ScreenGui gives it to everyone's PlayerGui.
  • Where the StarterGUI clones objects in to.
  • The TextBox. Read the description of it farther down on the page.
  • The TextButton. Read the description of it farther down on the page.
  • The TextLabel. Read the description of it farther down on the page.
  • The ImageLabel. Read the description of it farther down on the page.
  • The ImageButton. Read the description of it farther down on the page.
  • A script inside the GUI "Frame" object.
  • The crucial object GUI object called "ScreenGui" being select. Make sure all your other GUI objects are placed inside this, that way it shows!


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:

  • Tree-collapse
    ExplorerImageIndex 46
    StarterGui
    • Tree-collapse
      ExplorerImageIndex 47
      ScreenGui
      • Tree-collapse
        ExplorerImageIndex 50
        TextLabel
        • Tree-collapse
          ExplorerImageIndex 51
          TextButton
          • ExplorerImageIndex 49
            ImageLabel


Example two:

  • Tree-collapse
    ExplorerImageIndex 46
    StarterGui
    • Tree-collapse
      ExplorerImageIndex 47
      ScreenGui
      • ExplorerImageIndex 50
        TextLabel
      • ExplorerImageIndex 51
        TextBox


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):


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:


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):


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:


AncestryChanged

Changed

ChildAdded

ChildRemoved

DescendantAdded

DescendantRemoving

MouseEnter

MouseLeave

MouseMoved


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!

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.