FANDOM


250px-Operating system placement.svg

Example of GUI 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

GuiProperties

Properties of a Roblox GUI. The properties of your GUI should look similar to this. Thanks to mattchewy for this image.

like this: {0,0}, {0,0}. Only edit the second number between each bracket. Mess around with this for awhile 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 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= .


Common GUI Properties

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)

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. You health GUI is editable, but the rest are locked.

Player Gui

ScreenGUIexample

A simple menu 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.

Links

Official Roblox Website

Official Roblox Wiki

More Information on GUIs

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.