Contents

Creating your first GUI

In ROBLOX Studio, select the StarterGui object in your Explorer.

Object Menu

Next, click Insert -> Object, you will see a menu like the image to the left, keep hitting 's' on your keyboard until you come across an Object called 'ScreenGui'. Select ScreenGui and press OK to insert the Object.

The ScreenGui is basically the container for the rest of the GUI, the StarterGui clones all its children into any new Players PlayerGui.

Every Player who joins a game has a PlayerGui object inside them, the contents of

any ScreenGui there is displayed to that Player.

Your Explorer panel should now look like the image above. Next, go to the Object Menu and insert a 'Frame' Object into the ScreenGui.

When you click on the Frame Object, take a look at the properties panel, You can use this as a reference throughout the tutorial.

Size

When resizing or repositioning a GUI, you must use something called 'UDim2'.

Here is an example of how UDim2 works

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

UDim2 can take something called 'Scale' and something called 'Offset'.

==== Scale:
====

If you expand the Size property of the GUI, you will see the X and Y properties, if you expand X or Y, you will see Scale and Offset.

Lets make our

UDim2.new(1,0,1,0)

The Frame would fill the entire screen, for Scale, 1 is the same size as the Parent GUI Object.

If there isn't a GUI Object as Parent, the GUI object will fill the full size of the screen, as if the screen is the Parent.

If I did this to the Frame instead

UDim2.new(0.5,0,1,0)

Then the GUI would take up the left side of the screen.

Position

The Position property of GUI Objects also take a UDim2, here is an example to fill the right side of the screen