Fandom

ROBLOX Wikia

GUI Basics

12,569pages on
this wiki
Add New Page
Talk0 Share

This page has been suggested to be merged with another article, Gui.

If you think this subject deserves its own page, please explain why at Category talk:Candidates for merging or try to expand the page and remove the {{merge}} tag.

Remember to move what links here to the merged page before deleting this one. The page history will remain at this page.

Creating your first GUI

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

ObjectbGUIS

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.

ObjectbGUIScreen

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

UDim2.new(

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.