Using Guis in Roblox

What is a Gui?

A Gui, or a Graphical User Interface, is a composition of 2D objects that are displayed on the screen in front of all 3D objects. They can be used to have more interactivity in your roblox stages, such as with menus, buttons, and text boxes, or can even be used to make a special effect.

What types of Guis are there?

To begin, you must note that there are two types of Guis: ScreenGuis, and BillboardGuis. A ScreenGui lays over the screen and will render Gui components inside of it. A BillboardGui can affix itself to a part and render its Gui components in 3D space, but will always face the camera.

Note: the BillboardGui object is not yet documented by the ROBLOX developers, likely because it has a few bugs.

Why are these important?

Many games on ROBLOX haven't seen many Guis, and this is because they require understanding some complex elements about them. Also, knowledge of scripting is almost necessary to use these objects effectively.

Learning how to use them, however, can allow the stage designer to display an immense amount of information on the screen, something that before Guis was nearly impossible. This can be good for:

- High score charts

- Custom leaderboards

- RPG statistic screens

Guis can also be used to accept user input. Sometimes the stage designer wants to allow a user to pick and choose what will go on in the stage. This can be used in:

- Disaster scripts that allow users to vote for a certain disaster.

- Shops to give users the tools they want.

- Admin commands that aren't chatted.

So you can see Guis have many uses. Some things that are common in stages now could even use Guis to upgrade to be more advanced than the competition, so get a head start on them now.

Guis look so complex. How can I use them?

Well, at first it may seem like a challenge to understand how to build them. I'll show you how you can use the properties to adjust Guis to look good.

http://images3.wikia.nocookie.net/__cb20100611231324/roblox/images/b/b5/ExampleStudio.jpg

On the far left, you can see that the Tools button has an 'x' next to it. You need to make sure that your tools are open. This is vital to being able to make changes to your Gui and to view the current properties. Next, you should try and find your Explorer and Properties window. In the picture, you can see them on the right and the far right, respectively. If you can't find them, go to the file bar and find Tools, then click either Explorer or Properties, depending on what you need.

After this, you'll have to insert a ScreenGui into StarterGui. To do this, select StarterGui.

http://images4.wikia.nocookie.net/__cb20100612012054/roblox/images/e/ef/StarterGui.jpg

Then go to Insert > Object... > ScreenGui.

http://images1.wikia.nocookie.net/__cb20100612011959/roblox/images/0/05/Insert_Object.jpg

All you have at this point is a ScreenGui inside a StarterGui. One thing to remember about the StarterGui is that anything inside of it will get replicated to each player's PlayerGui each time they spawn.

Now we get to begin building our Gui. Before we begin, we have to make sure that the Gui will get rendered in studio. To do this, click on StarterGui in the Explorer menu, then find the Properties menu. In there, you should find the property ShowDevelopmentGui. Make sure this is checked, otherwise you will not be able to see your Gui in construction.

http://images4.wikia.nocookie.net/__cb20100612013957/roblox/images/8/86/ShowDevelopmentGui.jpg

Let's insert our first object. In this case, we're going to use a Frame. A Frame is simply a rectangle with a solid colored interior. Select ScreenGui, then go to the Insert Object window, and find a frame.

http://images2.wikia.nocookie.net/__cb20100612012637/roblox/images/d/de/InsertGuiElement.jpg

On the far left you can see a frame, but I have circled all of the other Gui elements, such as a TextLabel or an ImageButton. For now, we will just work with Frames.

Now that you have inserted a Frame into your ScreenGui, you're probably wondering where it is. Well, as a default, the Frame is in the upper left corner, and is so small that it isn't visible. Now would be a good time to make it large enough to be seen. If you click on the Frame, you'll notice the property "Size" in the properties menu. Expand the property by hitting the + signs around it.

http://images2.wikia.nocookie.net/__cb20100612021542/roblox/images/f/f4/ExpandSize.jpg

Now you'll see there are four numbers to modify the size. Size is broken down into X and Y, which are broken down into Scale and Offset. The X property changes the width of the object, and the Y property changes the height of the object. To modify these two dimensions, you have to change the Scale and the Offset. The Scale of the height is sort of like the percentage of the entire screen. If you use a scale of 1, the Frame will be as tall as the screen. If you use a scale of .5, the frame will be half as tall as the screen. Offset, on the other hand, is an absolute property. If you set offset to equal 50, the object will be 50 pixels tall, no matter how large the screen is. Got it?

For now, we can start with a Size of 0, 200, 0, 140. This means that the x-scale is 0, the x-offset is 200, the y-scale is 0, and the y-offset is 140. Here's what the Gui looks like right now.

http://images3.wikia.nocookie.net/__cb20100612025647/roblox/images/8/84/GuiAppearance1.jpg

I'm sure at this point you're thinking that the color of the box is a bit boring, and the position of it is off. I'll first change the position. We're going to center it. To do this, we have to modify the position of the frame. Expand the Position property like you did with Size. Right now, we want to make the frame in the center of the screen, no matter how large or small the screen is. Start out by setting the Scale to .5 for both X and Y. At this point, you'll notice that the position is slightly to the right of the center, and below the center. This is because the top left of the frame is in the center, but it expands to the right and down when you set the Size. To correct this, we'll set the position of the Frame some more. Set the offset for x equal to -100, and the offset for y equal to -70. This is half of the size, making the frame directly in the center.

http://images1.wikia.nocookie.net/__cb20100612031200/roblox/images/thumb/8/87/GuiAppearance2.jpg/800px-GuiAppearance2.jpg

The final thing to change is the color of it. Find the property "BackgroundColor3" and click on the text that says "BackgroundColor3." Now you'll see a button in the value side of the properties menu that has an ellipsis. Click on that button, and a Color menu will open.

http://images4.wikia.nocookie.net/__cb20100612031750/roblox/images/thumb/d/d4/ColorMenu.jpg/800px-ColorMenu.jpg

In this example, I chose a blue tone. You can choose whichever color you please.

Next we're going to insert a TextLabel into the Frame. This will make the TextLabel's Size and Position relative to the Frame's Size and Position. You should know how to insert a TextLabel by now, but in case you need instructions, you must select the Frame, go to Insert > Object... > TextLabel, and then hit OK.

http://images1.wikia.nocookie.net/__cb20100612032709/roblox/images/thumb/d/d7/InsertTextLabel.jpg/800px-InsertTextLabel.jpg

Let's change the Size to be as wide as the frame is, and make it 20 pixels tall. Move to the properties menu, and expand Size if it isn't expanded already. Change the x-scale to 1, and the y-offset to 20. Here's what the label should look like.

http://images3.wikia.nocookie.net/__cb20100612033610/roblox/images/4/4b/GuiAppearance3.jpg

At this point, you may wish to make a few changes to the Label, such as changing the color and the label. You can change the color in the same way you change the color of the frame. As an alternative to changing the color of the label, you can make the background part of a label transparent by finding the property BackgroundTransparency and setting it equal to 1. In my example, though, I'll just change the color.

Now we must change the label. We're going to make it say "Adjust your Max Health." To do this, select your TextLabel, and go to the Properties tab. Find the property "Text" and type in the following text: "Adjust your Max Health".

http://images2.wikia.nocookie.net/__cb20100612034130/roblox/images/0/04/ChangeText.jpg

At this point, your Gui should look something like this (colors may be different):

http://images4.wikia.nocookie.net/__cb20100612034907/roblox/images/a/ab/GuiAppearance4.jpg

Now you're probably starting to get the hang of modifying your Guis. Your next step is to add a TextBox to the Frame so you can get user input. We want to position it near the top of the frame, but underneath the label. If you center it, it will look a lot nicer. Be creative here! Some design tips:

- Center the TextBox. It looks nicer that way.

- Make the BackgroundColor3 a light color so that there's good contrast against the black text.

- Don't make the size much larger than is necessary.

- Change the text to better describe what the user has to type in the TextBox (the desired MaxHealth).

Now that we have the TextBox ready, we need to make a button for the user to click after inputting their desired Max Health. We are going to use an ImageButton for this. Click on the Frame, and go to Insert > Object... > ImageButton. Modify the Size and Position of this like you did with other objects. My suggestion is to center across the page, and place it near the bottom. Make it take up enough room so that there isn't too much empty space on the Frame, but don't make it too big that it looks disproportionate.

Now for the important part: putting an image on it. You have to make an image that will help people understand what pushing the button will do. In this case, I chose an image that says "Submit" on it. If you want to make your own image, consider these steps* for getting the image link. Type the text into the "Image" property. You can make a few aesthetical changes at this point if you want. Here's what my Gui looks like at the moment.

http://images2.wikia.nocookie.net/__cb20100612045019/roblox/images/8/81/PropertiesForTextBox.jpg

So, that looks pretty good, and it will be added to everyone's PlayerGui when they spawn. Unfortunately, it doesn't do anything. It simply looks pretty. You can add Scripts to Guis to make them work, or more specifically LocalScripts. LocalScripts can run inside the PlayerGui, making them ideal for use with Guis. On top of that, they can access properties like AbsoluteSize, AbsolutePosition, and can get more arguments of events than normal Scripts can. If possible, use a LocalScript for all Gui usage.

In this case, we'll use a LocalScript to check when the ImageButton is pressed. We can start by inserting a LocalScript into the Frame. Double-click it to open up the source editing window. Paste the following script in.

function onClicked --creates the function named onClicked local player = script.Parent.Parent.Parent.Parent --defines player to be the script's 4th parent. local character = player.Character -- defines character for use later if character ~= nil then --does a player really exist? If so, continue with the script. local humanoid = character:findFirstChild("Humanoid") --find the humanoid if humanoid ~= nil then --was there a humanoid there? If so, continue along with the script. local textBox=script.Parent.TextBox --simply referencing the textBox

local health=tonumber(textBox.Text) --the desired health that the player typed in. if health<0 then health=0 end --make sure the health isn't less than 0 if health>5000 then health=5000 end --make sure the health isn't *too* high up.

humanoid.MaxHealth=health --set the MaxHealth to equal the desired health if humanoid.Health>health then --check if they have more Health than MaxHealth humanoid.Health=health --if so, lower the health to equal MaxHealth. end --end the if conditional.

end --end the humanoid check end --end the character check end --end the function

script.Parent.ImageButton.MouseButton1Down:connect(onClicked) --create an event that waits for ImageButton to be clicked.

This will allow interactivity between the Gui and the player.


 * (I made a note earlier, so I want it to link here)

A quick way to get the image link of a decal you uploaded is by navigating to the decal page. You'll then take a look at the number on the far right of the URL. Take that number and subtract 1 from it. Your new page should be the same decal, except it's called an "Image." Take that URL, and select everything after ".com/" and before "?id=", and remove it all. Replace that with the text "asset/". Now you have your image link.

http://images4.wikia.nocookie.net/__cb20100612051935/roblox/images/6/6a/GettingTheImageLink.jpg