This tutorial is intended for people who already know a little bit about how to navigate ROBLOX Studio.
What is a GUI?
GUIs are on-screen graphics, like the healthbar display on the right of your screen.
GUI stands for (G)raphical (U)ser (I)nterface. How a user (a player) interfaces (interacts) with the game.
How do I make GUIs?
GUIs go into the PlayerGui pack in a Player. All things in the StarterGui pack automatically is put into a player's PlayerGui when they spawn.
To insert something into the StarterGui, use the Insert menu. Insert > Object..
In order for a GUI to be displayed, you need to place it in a ScreenGui in the PlayerGui.
Insert a TextLabel into the ScreenGui by selecting the ScreenGui, and opening the Insert menu and choosing TextLabel.
In this example, you see how a TextLabel appears on the screen of the player.
The properties tab shows this TextLabel's properties, including Text, Position, Size, and color.
The Size and Position are both UDim2 values. They are in the form of (xscale,xoffset,yscale,yoffset).
- Scale is a percentage, 1,0,1,0 being the bottom right and 0,0,0,0 being the top left.
- Offset is offset in pixels, so 1,-32,1,-16 would be 32 pixels left and 16 pixels up from the bottom right.
0.5,0 , 0,50
would be at halfway across the screen left and right, and 50 pixels down from the top of the screen.
ZIndex is the depth an object is at. A larger ZIndex is on top of GUIs with a lower ZIndex.
How do I Change GUIs to look how I want?
A useful part of GUIs is the object called a Frame.
If a Frame moves, then all of the GUIs in it move as well.
The image to the right shows the use of a Frame. Notice how the position of the TextLabel is 0,0,0,0, however, it appears at the center of the screen. This is because the Frame's position is 0.5,0,0.5,0.
Frames help a lot with layout, especially when scripts are controlling sliding sections of the GUIs or similar things.
Color is an important part of making your GUIs look good. To change color, look at the Properties tab. Find BackgroundColor3, and click the button with the ellipses in it (...)The color dialog shown at the right will open, and you can choose a color. Once you have one, press the OK button and it will change the color of the GUI.
If you would rather use the HSV and RGB color sliders, switch to the Custom tab to get a lot more color choices.
Changing Text and Images
A TextLabel or TextButton have a 'Text' property. Type in what you want in order to change the text displayed on the button. Other text formatting properties include TextXAlignment, which tells where the text starts, left aligned, center aligned, or right aligned, and TextYAlignment, which tells if it is centered vertically at the top, middle, or bottom.
There is also the TextWrap property, which will wrap text into multiple lines if it stretches outside of the TextLabel or TextBox's boundary.
To change the image shown by an ImageLabel or ImageButton, change the Image property.
This is the same as what the Texture is in a Decal. To get a Decal onto an ImageLabel or ImageButton, insert the Decal from 'My Decals' or 'Free Decals' in the Insert toolbox. Once it is ready to be inserted, copy the 'Texture' property of it into the 'Image' property of the ImageButton or ImageLabel.
Click the image at the left to see how this comes together.
Scripting a GUI
Please note, this is advanced. If you do not know Lua, you should probably learn first.
Moving GUIs with Code
In order to move it, you would need to change the Position value of the object.
gui = game.Players.Player.PlayerGui.ScreenGui.TextLabel --A TextLabel inside of the ScreenGui inside of a player's BackPack x = 0 while true do wait() --Pause after each loop x = x + 1 --Count 'x' up one. This will move our GUI. ud = UDim2.new(0,x,0.5,0) --0 scale, + x offset, and 0.5 scale + 0 offset. --UDim2.new creates a UDim2 value, which is what Size and Position both are. gui.Position = ud end --End the loop
This will move the GUI across the screen from left to right.
Find out when a Player Clicks a GUI
Only the TextButton and ImageButton have events which happen when someone clicks it.
function click(mousex,mousey) end textbutton.MouseButton1Down:connect( click )
Given 'textbutton', this would make the function 'click' happen every time the mouse is clicked over it. mousex,mousey are the x and y that their mouse is at.
MouseButton2Down, MouseButton1Up, MouseButton2Up, MouseMoved, MouseEnter, MouseLeave are all events that can be used.
Have fun with your newfound GUI abilities!
TextLabel (Add link)
ImageLabel (Add link)
TextButton (Add link)
TextBox (Add link)
ImageButton (Add link)
Frame (Add link)
ScreenGui (add link)