GUIs

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.



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.

ZIndex is the depth a object is at. A larger ZIndex is on top of GUIs with a lower ZIndex.

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.



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

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 a ImageLabel or ImageButton, change the Image property.

This is the same as what the Texture is in a Decal. To get a Decal onto a 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.