FANDOM


Please note

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.

PlayerGui StarterGui

To insert something into the StarterGui, use the Insert menu. Insert > Object..

InsertMenu


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.

ScreenGui placement


In this example, you see how a TextLabel appears on the screen of the player.

Properties

Properties Tab while selecting TextLabel

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?

Moving GUIs

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.

Frame Usages

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.






Changing Color

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 (...)

Background Color

The background color property

Color Dialog

The Color Dialog, used in other Windows programs.

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.


Copying Texture

Selecting the Texture

ImageLabelInserteed

Finished 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!


GUI Objects

TextLabel (Add link)

ImageLabel (Add link)

TextButton (Add link)

TextBox (Add link)

ImageButton (Add link)

Frame (Add link)

ScreenGui (add link)

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.