What are GUIs?
GUI is an abbreviation of Graphical User Interface. The GUIs make the computer easy to understand - have you ever seen how DOS looks?
UDim2
UDim2 is the positioning system for 2D GUIs. It consists of two categories: X and Y. X and Y each have subcategories - scale , relative to the size of the screen, and offset, in fixed units: pixels.
UDim2 - both. The object is rendered n pixels away from the scaled position on x axis, and m pixels away from the scaled position on the y axis. Ending position is displayed in red. UDim2 - scale only
UDim2 is formatted like this: scalex ,offsetx ,scaley ,offsety .
UDim2 - offset only You can use scale and offset together:
Position 0.5,-55,0.5,-55 would make the object appear 55 pixels to the left and up of the centre of the parent component (rendering area)
GUI basics
Player's GUI
Player's GUI is always in PlayerGui object in Player object.
Starter GUI
StarterGui is a service found in the DataModel . It holds GUI items that will get copied over to the player's GUI every time the player respawns.
Public GUI
Only a few objects can be used in workspace, like SelectionBox .
Your first GUI
- Insert a "ScreenGui " object into StarterGui.
- Insert a "TextButton " object into the ScreenGui.
- Set its position as UDim2: 0.4,0,0.4,0
- Set its size as UDim2: 0.2,0,0.2,0
- Create a script inside the TextButton
- Now, you can make it do something
- Set script source as
script.Parent.MouseButton1Click:connect(function() print("Hello World!")end)
- Now play in Solo! In the Output, you should see "Hello World!" affter you lick the button!
Understanding the structure
Like in Windows, each window has a process (some processes can have a few windows). ScreenGui is like a process - it holds the components.
Each 2D component can act as a frame. E.g. you can add a TextButton into an ImageLabel.
As you add components inside the other components, UDim2 scale will become relative to it's parent.
Main 2D components
- Frame - a basic container that can be coloured in, as most of the other 2D objects.
- TextLabel - a frame with text in it.
- ImageLabel - a frame with an image in it (decal).
- TextBox - a TextLabel with an ability of editing it's text.
- TextButton - a TextLabel that can detect the mouse events like MouseButton1Clicked.
- ImageButton - like a TextButton, but with an image in it.