Tutorial:GUI

GUI is an acronym that stands for Graphical User Interface. There are two types of GUIs in ROBLOX: the game (core) GUIs, which are not editable in-game, and player GUIs, which can be custom-made. User Interface basically means your connection between you (user) and the computer (interface). How you and the computer communicate is done graphically, hence Graphical User Interface. Common uses for GUIs are leaderboards and tutorials.

Core GUIs
The game GUI includes the Leaderboard, your health bar, the chat interface, your tool's icons, the report button, the window buttons, and the camera view buttons. Game GUIs cannot be edited because they are locked in the GuiRoot, but fake ones can be added, Such as an oxygen bar when you go underwater, or moving your health bar to another place. Your health bar GUI can be edited, but the other core GUIs cannot.

Player GUIs
These are GUIs that can be created and edited by the player. There are two types:

ScreenGui
These GUIs stick to the front of the game on your screen. They can allow you to do a variety of things such as change your team, view a map, or reset your character. Every ScreenGui that an individual player sees is in PlayerGui, which is in the. All GUIs inside the StarterGui will be given to all players upon entering the server and every time they respawn.

BillboardGui
These GUIs are attached to a brick and always face towards the player.

GUIs are useful for a welcome page, rule page, reset button, or to give tools to players. All of these features can be used by medium-level scripting and basic knowledge about GUI features. For more information go to a tutorial site to begin your GUI.

SurfaceGui
Surface GUIs are similar to BillboardGUIs, except they are on a single side of a part rather than always facing the player. Depending on the size of the part and the size of the GUI, uses can vary.

SurfaceGUIs have a property called CanvasSize, which determines how the GUI registers 'pixels'. A smaller CanvasSize leads to larger GUI elements, and a larger one leads to smaller elements.

GUI Elements
The main items that can be inserted into a GUI.
 * Frame - Used to group GUI elements together. When a frame moves, every element in it moves as well. A frame's background and border can be edited like all other GUI elements.
 * TextLabel - Displays text.
 * TextButton - Clickable GUI button.
 * TextBox - Lets the player enter text.
 * ImageLabel - Displays an image.
 * ImageButton - Clickable image.

Properties of GUIs
AbsolutePosition : A vector 2 value: The GUI's absolute position as if you use Scale instead of Offset then this will show you its position.

AbsoluteSize : A vector 2 value: The GUI's absolute size as if you use Offset instead of Scale then this will show you its size. Opposite of the above.

Active : A boolean: The GUI is either active or not active (So if a button is not active you can not click it)

BackgroundColor3 : A color3 value to change the background color.

BackgroundTransparency : A Float value, changes the background transparency.

BorderColor3 : A color3 value to change the border's color.

BorderSizePixel : Int value used to change the size of the border.

Name : A string value used to change the name.

Parent : The parent of the object

Position : A UDim2 value: Changes the position on of the GUI

Size : A UDim2 value: Changes the size of the GUI

SizeConstraint : Sets the direction that an object can be resized in.

Visible : A boolean, if the GUI is visible or not.

ZIndex : An Int value, alters the order in which GUI items are placed.

className : The className of the GUI

AutoButtonColor : Automatically changes the color of the button when clicked.

Image : A texture is needed to get the image for the button.

Universal Dimensions on 2 Axes
Universal Dimensions on 2 Axes, or UDim2 for short, are a special positioning system used in the ROBLOX GUI that consists of 4 separate values. In ROBLOX Studio, the position property in graphics is something like:{ 0.5, -150, 0.5, -150} Let me explain this:

The first number is the x percentage on a scale of 0 to 1. The second number is the x offset. The third number is the y percentage on a scale of 0 to 1. The fourth number is the y offset. This means that { 0.5, -150, 0.5, -150} means: Halfway on the x-axis add negative 150 pixels. Halfway on the y-axis add negative 150 pixels. If you set a Graphic's size to 0.5, 0, 0, 0.5 (taking up half of the x and half of the y), what position would you set it to, in order to make it appear in the center of the screen? 0.25, 0, 0.25, 0!

Tutorials

 * /ForceField GUI/
 * /Reset GUI/