Roblox Wiki
Register
Advertisement
Roblox Wiki
This page is incomplete.
Please continue to add info to this page until it is complete.
TextLabel()

An example of a GUIObject (TextLabel)

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 a part 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 (or you may learn here) 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!

You should have the Explorer window and the Properties window open at all times when working with GUIs.

  • To open the Explorer window, go to View > Explorer.
  • To open the Properties window, go to View > Properties.

GUI Instances[]

GUIObjects & UIComponents[]

In Roblox, objects like buttons or text labels are known as GUIObjects which is an abstract class for a UI object. Every UI object will have inherited properties like Size, BackgroundColor3, etc. GUIObjects also have defined functions and events. A GUIObject or it's children can be manipulated through UIComponents. The UICorner component can alter how the corners of a GUIObject look, and the UIListLayout component can manipulate the layout of a GUIObject.

Properties[]

Type Property Description
Boolean Active Determines whether a UI element sinks input
Vector2 AnchorPoint Determines the origin point of a GUI, relative to its absolute size
Enum.AutomaticSize AutomaticSize Determines whether resizing occurs based on child content
Color3 BackgroundColor3 Determines a GUI's background color
Float BackgroundTransparency Determines the transparency of the GUI's background and border
Color3 BorderColor3 Determines the color of a GUI's border
Enum.BorderMode BorderMode Determines in what manner a GuiObject's border is laid out relative to its dimensions.
Integer BorderSizePixel Determines the pixel width of a GUI's border
Boolean ClipsDescendants Determines if descendant GUIs outside of the bounds of a parent GUI element should render
Integer LayoutOrder Controls the sort order of a GUI when used with a UIGridStyleLayout
GUIObject NextSelection Sets the GuiObject which will be selected when the Gamepad selector is moved in this direction
UDim2 Position Determines the pixel and scalar position of a GUI
Float Rotation Determines the number of degrees by which a UI element is rotated
Boolean Selectable Determine whether the GUI can be selected by a gamepad
GUIObject SelectionImageObject Overrides the default selection adornment (used for gamepads)
UDim2 Size Determine the pixel and scalar size of a GUI
Enum.SizeConstraint SizeConstraint Selects the GUIObject.Size axes that a GUI will be based relative to the size of its parent
Boolean Visible Determines whether a GUIObject and its descendants will be rendered
Integer ZIndex Determines the order in which a GUI renders relative to other GUIs

LayerCollector[]

A LayerCollector is an abstract class that holds 3 types of GUI containers. A ScreenGui, a SurfaceGui, and a BillboardGui. ScreenGui and SurfaceGui are pretty self explanatory. A ScreenGui is a container for GUIObjects that appear on your screen. A SurfaceGui is a container for GUIObjects that appear on surfaces (like on parts). A BillboardGui is a 2d container that is bound to a 3d object.

BRUH1

An example of ScreenGui

BRUH3

An example of a BillboardGui

Bruh2()

An example of SurfaceGui


Frame[]

GUI Frame

The default Frame

A Frame is a simple yet applicable type of GUIObject that can be used for your GUI. They inherit a GuiObject's properties including BackgroundColor3, BackgroundTransparency, Size, Position, etc. They can look and be used in many different ways.


Text Objects[]

Text objects are GUIObjects like Frames, but they contain text. Because text objects are GUIObjects, they inherit the properties of them. Text objects also have their own unique properties like Text or Font. There are 3 types of text objects.

Default TextLabel

The default TextLabel

  • TextLabel: A label that contains text.
  • TextButton: An interactable button that contains text.
  • TextBox: A label that can take input. (Like a search bar or password box)

Image Objects[]

Ima(g)e

The default ImageLabel

Image objects are also GUIObjects like Frames, but they contain an image. (Like a decal). They inherit the properties of a GUIObject but also have their unique properties like Image, ImageColor3, ImageTransparency, etc. There are 2 types of image objects.

  • ImageLabel: A label that contains an image.
  • ImageButton: An interactable button that contains an image.

UDim & UDim2[]

Udim2

An UDim is a component used when working with GUI. An UDim can be either X or Y in an UDim2 coordinate and have 2 main properties.

  • Scale: The value this represents is scaled relative to the axis that this UDim is representing in a UDim2.
  • Offset: The pixel unit component of the UDim

Notation[]

UDim2 values is often denoted with brackets, but when writing UDim2 values in the properties window, brackets can be omitted as Roblox will automatically implement the brackets back in. When trying to write a UDim2 value in a script, you can use the .new constructor.

UDim2.new(XUDim, YUDim)
UDim2.new(XScale, XOffset, YScale, YOffset)

Now you're probably wondering why I put two different ways of using this constructor. (no you're not, but I'll tell you anyways). It's because there's 2 ways of using this constructor.

  • Way 1: Using UDims
    • You can use the UDim.new constructor to make an X UDim and a Y UDim for your UDim2
  • Way 2: Altogether
    • You can simply put your scale and offset for each axis and that'll work too

These methods can be mixed as UDim2.new(0.5, 10, UDim.new(1, 0)) will also work

(un)centered frame

(Anchor point is at the top left of the GUI)

Scale[]

What the scale component represents is scaled relative to the axis that this UDim is representing (usually the parent). For example, if we were to set the position of a frame to {0.5, 0}, {0.5, 0}, the frame would be in the center of the screen. That is if we center the anchor point, else, it'll kind of just look like this. It's recommended you use Scale for sizing and positioning so it can maintain a size on all devices. if you use offset, it might look normal on a computer, but too big on a phone.

Offset[]

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.

AnchorPoint[]

Anchor point is a very important property when positioning and scaling GUIs. The type data for anchor point is Vector2 (X & Y). Anchor point is the origin point of a GUI relative to its absolute size. Basically what this means is, the anchor point of a GUI tells where to resize the GUI from or position it. So basically when you position something, you're basically only positioning the anchor point, and the GUI itself is moving relative to the anchor point. Anchor point works just like scale. If the X value is 0.5, the anchor point will move to the middle horizontally.


GUI Tutorials[]

Well now that you've learned about GUIs, let's make one! Before we get into it, let's make our ScreenGui where the GUI will appear.

Create a new ScreenGui into StarterGui by hovering over StarterGui and clicking the plus button, then find ScreenGui. (You may search for it if you need to) And that's the first mandatory step! You can look at the tutorials below if you'd like. I'll be on my way, cya!

Advertisement