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 apart 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 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!

It helps to have the Properties and the Explorer windows open during the tutorial.

GUI Instances
In Roblox, each GUI object has an object (like a Part, SpawnLocation, Model, or Humanoid). In fact, there are many objects to make it easy for you to create a GUI for your game. Here are the basic things that are put on your screen. Reading this information is not totally necessary for your success in the tutorial. It helps to know this when creating your own GUI, though.

Frames
Frames are simple boxes or lines on your screen. An example of a frame is the salmon colored box in the image to the top right of this article. Frames can be used to contain other GUI objects. Frames support many properties, including Size, Position, BackgroundColor3, BorderColor3, ZIndex, and more. Be warned - the Size and Position properties are UDim2-type properties and are different from normal properties. You can read more about UDim2 type properties later. BackgroundColor3 and BorderColor3 properties are both Color3 type properties. They are similar to Part's Color property. It also has a BackgroundTransparency property, which functions just like the Transparency of Parts ("0" is visible, "1" is invisible).

TextLabel
A TextLabel is like a Frame, only it can contain text. It has all the properties of Frames, and more. It has a Text property, a TextColor3 property (self-explainatory?), and several Text Alignment and Wrapping properties. To enable Text Wrapping, have the TextWrap property set to true (or checked in the properties window). TextWrap will make the text break to the next line if it does not fit inside the TextLabel itself. If you make the BackgroundTransparency property "1" and set the Size property accordingly, you can wrap the text without much difficulty. An example of a TextLabel is the words "This is a simple GUI!" in the image to the top right of the article.

TextButton
TextButtons are clones of TextLabels, only there are added events that scripters love to use in their scripts. TextButtons support more mouse interactivity without using HopperBins or Tools. Some new Events are MouseButton1Click, MouseButton1Down, MouseButton1Up, MouseEnter and Mouse Leave. See the TextButton entry in the Object Browser to learn more about the TextButtons properties and events.

ImageLabel
An ImageLabel is like a mix of a Decal and a Frame. It shows an image on the user's screen. There is a small drawback to using ImageLabels, though. The image is stretched to the the size of the ImageLabel, so if you have a 100 by 100 image on a 200 by 200 ImageLabel, you will notice a loss in quality of the image. The image shown on an ImageLabel is noted by it's Image property, and functions exactly like the Texture property of Decals. It is recommended that you copy and paste the Texture property of a Decal into an ImageLabel's Image property (using the Properties window). An example of an ImageLabel is the light bulb picture in the image at the top right of this article.

ImageButton
ImageButtons and ImageLabels are just like TextButtons and TextLabels. ImageButtons are just ImageLabel clones with more Events and functionality. There is not much to say about them except to see their entry in the Object Browser and see all of their Events.

Crash Course of UDim2
UDim2 is a strange name for a strange concept. There are two main properties that are UDim2-type property: Size and Position. They hold four values: XScale, XOffset, YScale and YOffset. The image to the right shows how the Properties window displays UDim2 type properties. '''Note that this is NOT how you define UDim2 values in scripting! For that one uses the UDim2.new(xscale,xoffset,yscale,yoffset) function! If you use the braces and commas, your script will not work.'''

Scale is a unit that changes as the GUI object's parent changes. If the object is in a ScreenGui, a Scale can be thought of as a "Screen". If you have an object's position as {0.5,0}, {0.5,0}, it's top left corner will be in the dead center of the screen. If an object is inside another GUI object, "1" on the XScale becomes the parent object's width and on the YScale becomes the parent object's height.

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. It is recommended you Size objects via XOffset and YOffset.