Graphical user interface

Roblox has many in-game interfaces, plus ones that the users can customize. The GUIs that Roblox allows their users to customize are very simple text/image based 2-D objects that can viewable on any given player's local screen. This article will teach you about the basics, and some cool things that you can do with Roblox's in-game GUIs. Once you become familiar with the GUIs, the possibilities are almost endless!

Creating a Roblox GUI Button
This tutorial will tell you, in list form, how to create a GUI, and explain some of the properties and the basics of scripting a GUI.

1. Start Roblox Studio, and go into Edit Mode on the desired place.

2. Select the 'StarterGui' in the object browser.

3. Click Insert > Object > ScreenGui. An object called 'ScreenGui' should appear in the StarterGui.

4. Select the ScreenGui, then click Insert > Object > TextButton.

5. An object called 'TextButton' should appear in the ScreenGui, select the TextButton and you should be able to see it's properties. If you can't view it's properties, click View > Properties. (You should now be able to see the properties window.)

6. In the properties window, you will see a long list of properties. Select the property called 'Position,' the entry box should look something



like this: {0,0}, {0,0}. Only edit the second number between each bracket. Mess around with this for a while until you find the desired position for your GUI. Note: If you're agood scripter, you should know that this property is a UDim2 value.

7. The Size property is very similar to the Position property. Change the size property until you find the desired size for your GUI.

8. Now, we'll edit the Text in the GUI, change the Text property to whatever you want. Resize the GUI to fit the text if needed.

9. Remember: this is a BUTTON. So, now we can get it to do something when it's clicked, using script. So, what are you waiting for? Let's get scripting!

b) Select the TextButton in the ScreenGui, and click Insert > Object > Script. An object named 'Script' should appear in the TextButton. Double-click it.

c) A tab should open. That's the script, now delete the part that says 'print("Hello World!").' Copy and paste the script shown below: script.Parent.MouseButton1Click:connect( function script.Parent.Parent.Parent.Parent.Character.Humanoid.Health=0 end) d) You have now created a Reset button. Click Tools > Test > Play Solo to test the GUI. You should be able to click it and it will reset your character.

How to Create an Image GUI

 * NOTE: If you are not experienced with Roblox GUIs, it is recommended that you read the first tutorial before attempting this one.

Image GUIs are very similar to other GUIs, but they can display images. Referring to what you've learned in the previous tutorial, follow these steps:

1. Select your ScreenGui.

2. Click Insert > Object > ImageLabel

3. Re-size/re-position to your liking.

4. Find the image (must be on roblox.com) and copy the ID. Put the following in the 'Image' property of the ImageLabel: http://roblox.com/asset?id=

b) In the Image property of the ImageLabel, it should say: http://roblox.com/asset?id=. Paste the ID of the desired image behind ?id=.

Size
This sets the size of a GUI (in pixels), in the form of a UDim2 value. Feel free to adjust this to your needs.

Position
This sets the position of a GUI on a user's screen (in pixels), also in the form of a UDim2 value. Feel free to adjust this to your need.

BackgroundColor3
This sets the color of a GUI's background, in the form of a Color3 value.

BorderColor3
This sets the color of a GUI's border, in the form of a Color3 value.

TextColor3
This sets the color of any text GUI's text, in the form of a Color3 value.

Text
This sets the text that any text GUI will display, as a string value.

Visible
This sets if the GUI is visible to the player or not, set as a bool (true or false) value.

ZIndex
Specifies the order of the GUIs from back to front on a player's screen.

Useful GUI Scripting Reference
Change the position of a GUI using script: gui.Position = UDim2.new(0,0,0,0) Change the size of a GUI using script: gui.Size = UDim2.new(0,0,0,0) Change the background color of a GUI using script: gui.BackgroundColor3 = Color3.new(0,0,0) -- (red,green,blue) min 0, max 255

Roblox GUI Events
Events are things that can happen to a GUI that can trigger a function in a script. (See: Functions)
 * MouseButton1Click
 * MouseButton1Down
 * MouseButton1Up
 * MouseButton2Click
 * MouseButton2Down
 * MouseButton2Up
 * MouseEnter
 * MouseLeave
 * MouseMoved

The Game GUI
The game GUI includes the Leaderboard, your health bar, the chat interface, your tool's icons, the report button, the window buttons, and the camera view buttons. Game GUIs cannot be edited because they are locked in the GuiRoot, but fake ones can be added, Such as an oxygen bar when you go underwater, or moving your health bar to another place. The health GUI is editable, but the rest are locked.

Player Gui
These are GUIs that can be created and edited by the player. There are two types:

ScreenGui
These GUIs stick to the front of the game in your screen. They can allow you to do a variety of things such as making a radar, a menu, a login instead of VIP doors, or show DISMOUNT as it is shown in the skateboards made by the admins.

BillboardGui
These GUIs are attached to a brick and always face towards the player.

GUIs are useful for a welcome page, rule page, reset button, or to give tools to players. All of these features can be used by medium-level scripting and basic knowledge about GUI features. For more information go to a tutorial site to begin your GUI.

GUI Elements
The main items that can be inserted into a Billboard or Screen GUI.
 * Frame
 * TextLabel
 * TextButton
 * TextBox
 * ImageLabel
 * ImageButton

Links
Official Roblox Website

Official Roblox Wiki

More Information on GUIs