Fandom

ROBLOX Wikia

How To Create GUIs

12,748pages on
this wiki
Add New Page
Comments0 Share

So what exactly IS a GUI?

GUI stands for "Graphical User Interface". They are 2D bits of image and text that go on a player's screen. In ROBLOX, there are several types of GUI you can use. I am going to through them now, so that by the end you should be able to know everything you need to know about GUIs.

Setting up a GUI

Heirachy

This is what your Explorer should look like

There are several things you have to do to set up a GUI. First, you need to put everything into the StarterGui. The StarterGui service is just like StarterPack, except for GUIs. Everything that you put in here will be cloned into a player's "PlayerGui", which is a special object inside every player that lets them view GUIs. So if you just want to make a picture that everyone can see, you would insert it into the StarterGui.

You should know that whenever a player is reset after dying, all the items in the PlayerGui are removed and replaced. This means that the entire screen is reset once someone dies.

Next, ScreenGuis. ScreenGuis are the objects where YOU put all your GUIs in. So if you want to display a piece of text, you put it in a ScreenGui, and then you put the ScreenGui in the StarterGui. Confused yet? Don't worry, with enough practice, this will become second nature.


Let's try a practical task. We will try and make a GUI that covers our whole screen.

Your First GUI

1) Open up ROBLOX Studio, and create a new place with a baseplate. Make sure that Tools, Properties and Explorer are all switched on.
SdfgwStep1

ROBLOX Studio is best for editing GUIs, and most other things

2) In the Explorer panel, select the StarterGui. (This makes sure that anything you insert goes directly in there, and not into the Workspace.) Once that is selected, click "Insert" in the toolbar, then click "Object". In the box that pops up, choose "ScreenGui".
SdfgwStep3

This inserts the ScreenGui straight into your StarterGui

3) An object called ScreenGui should have popped up in the StarterGui. Select this, then click Insert, Object, Frame.
SdfgwStep2

A Frame is a rectangular shaped GUI

4) Frames are basically rectangles that go on your screen. Once they are in a ScreenGui, that is in the StarterPack, any player that enters should receive a copy. Now let's edit it. In the Explorer, select the Frame, and in the Properties Panel, its properties should pop up.
SdfgwStep4

Does your Explorer look like this? Because it should

5) In the Properties, find the property named "Size". By default, it reads "{0, 0}, {0, 0}". I'll explain what all those numbers mean in a sec. For now, just edit it so that it says "{1, 0}, {1, 0}".
SdfgwStep5

Edit your Frame's Size to read {1, 0}, {1, 0}.

6) Your screen should've just been engulfed in the grey Frame. If you can no longer see your screen properly, congratulations, you have edited your Frame correctly. To test it properly, click Tools, Test, Play Solo.
SdfgwStep6

Grey.

7) Is the grey GUI covering your screen in the test mode as well? If so, excellent! You have successfully set up a GUI that all your players could see. If your GUI isn't working, consider the follow possibilities:


  • Is the Frame in the ScreenGui?
  • Is the ScreenGui in the StarterGui?
  • Did you use Edit mode to make it?
  • Is the Transparency of the Frame set at 0?
  • Is the Visible of the Frame checked?
  • Is the Size equal to {1, 0}, {1, 0}?
  • Is the Position equal to {0, 0}, {0, 0}?




Make sure that ALL these are true, and your GUI should be working fine.

SdfgwStep7

If your screen looks like this, well done.



Now, we are going to look at what those numbers meant...

Understanding UDim2

UDim2 sounds pretty tricky even in its name, right? Well, once you get the hang of it, it won't be too hard. Put simply, UDim2 are the coordinates of a GUI. Both the Size and Position of any GUI is measured in UDim2. The X and Y points that make them up. But I guess you're wondering "Hey, if it's just the X and Y, why are there FOUR numbers?" Well, let's take a look at them.

Here is a typical UDim2 value: {1, 0}, {1, 0}...

UDim2

The four numbers are: X scale, X offset; Y scale and Y offset.


1) The first pair of numbers is the X property (This means how far left or right it is.)

2) The second pair of numbers is the Y property (This means how far up or down it is.)

3) The first number in both pairs is called the Scale. The Scale is a fraction, showing how much is compared to the user's screen. For example, if we went back to our big grey Frame, if we changed the size to {1, 0}, {0.5, 0} then the frame would only take up the TOP half of the screen. This is because the X scale is 1, meaning the full screen, but the Y scale is 0,5, meaning only half the screen.

4) The second number in both pairs is called the Offset. Basically, the Offset is the number of pixels added on the Scale. You could just make the whole GUI using offset, and measure in pixels instead of screen size. For example, a GUI with the size {0, 300}, {0, 200} would be 300 pixels wide and 200 tall.


So why, you may be wondering, do we have Scale AND Offset? Wouldn't it be easier to just have Offset? Well, the issue comes when you think that different computers have different screen sizes. If you made a GUI entirely out of Offset, and designed it for a very big screen, it might appear to be off-screen for someone with a very small screen. So if you want your GUIs to look good for EVERYONE, you need to learn how to combine Scale and Offset.

If you are planning to edit the Position or Size in a script, you need to know how to use UDim2 in ROBLOX Lua. Here's a snippet of a repositioning GUI script:

MyFrame.Position = UDim2.new(0.5, 100, 0.5, 200)

UDim2.new() is a special function that lets you create a new UDim2 value, used for setting Position and Size. You have to put all 4 numbers in, separated by commas, for it to work.

But that's enough about UDim2. Now let's learn about all the different kinds of GUI that ROBLOX have to offer...


Your Normal GUIs

GUIFO

All 5 regular GUI objects (not counting Frame)

The following objects are all GUIs that go into a ScreenGui. They are all boxes that go on the screen, also some have text, some have pictures, and some you can click. Here's the list:


ImageLabels

ImageLabels are just like Frames, except that you can display a picture on them. Do you know how decals work? Every decal contains a property called "Texture" that shows the picture that is displays. With ImageLabels it's exactly the same, except that the property is called Image, not Texture. To give an ImageLabel its Image, you could copy and paste the Texture of a decal in.


ImageButtons

ImageButtons are almost identical to ImageLabels, except that you can click on them to make things happen. If you put a script in an ImageButton to make a basic action occur, it would look like this:

function onClicked()
-- put what you want to happen when the button is clicked here!!!
end

script.Parent.MouseButton1Down:connect(onClicked)



The event is called "MouseButton1Down", just like the event for when a brick is touched is called "Touched". It's a bit of a long name to remember, so make sure you type it carefully.


TextLabels

Now TextLabels don't have images, they have Text. It's not very hard to use, all you have to do is edit the Text property, and you can make it display any text you want!


TextButtons

TextButtons are just like TextLabels, but just like ImageButtons, you can click them. The above script for ImageButtons would work just the same for TextButtons, as long as you put the script directly inside the button.


TextBoxes

TextBoxes are quite often confused with TextLabels and TextButtons. These GUIs are unique in the sense that the user that the GUI belongs to can type in it! You could use it for search engines, messaging, forums, anything you could script, just by getting your player to type in there.


GUI Features

There are several things you can do with these kinds of GUI:


  • You can make a function run when the mouse goes inside the GUI, using the MouseEnter event.
  • You can make a function run when the mouse leaves the GUI, using the MouseLeave event.
  • You can make a function run when the mouse even moves inside the GUI, using the MouseMoved event.


Here's an example of that:


function MouseEntered()
	print("The mouse has entered!!! :D")
end

script.Parent.MouseEntered:connect(MouseEntered)

This script would run whenever the mouse goes inside its Parent (the script should be inside a GUI object, by the way).

Properties of GUIs

  • AbsolutePosition - This is a special number that is always equal to the EXACT Position of the GUI, in pixels. It works out the Scale, converts it to pixels, and adds on the Offset. Because it needs to use the size of your screen, you need to use a LocaScript to even mention this property.
  • AbsoluteSize - This is just the same as AbsoluteSize, except, of course, it tells you the size, not the position.
  • BackgroundColor3 - Do you like colouring things with Color3? Edit this property to change the colour, in Color3.
  • BackgroundColor - Do you like colouring things with BrickColor? Edit this property to change the colour, in BrickColor.
  • BackgroundTransparency - This number controls how see-through your GUI is. 0 is opaque, 1 is invisible.
  • BorderColor3 - Edit this Color3 property to change the colour of the border.
  • BorderSizePixel - Edit this number to change the size of the border in pixels.
  • Name - This is the name of the GUI (the one that appears in the Explorer).
  • Parent - The object that the GUI is inside is the Parent.
  • Position - This is the position of your GUI.
  • Size - This is the size of your GUI.
  • Visible - This is a boolean value (this means true or false, on or off, however you choose to think of it). If the box is checked (true) you can see it. Otherwise, it pretends that it doesn't exist. Buttons that have Visible unchecked cannot be clicked.



If you ever need reminding of these events and properties, just check the Object Browser! Click Help, Object Browser, and then choose the item from the right to view its properties and events.


3D Space GUIs

3DGUI

These GUIs appear in the 3D place, not onscreen

These GUIs are quite different from the previous ones. They do NOT go in a ScreenGui, they have to go straight into the StarterPack. Most of them use a property called "Adornee" which means the brick that it is attached to. This is the tricky bit, because if you look in the properties of one, but if you look in the Handles' properties, that option is greyed out! This is because you can't set a property that requires you to select a brick with the Explorer panel. There are two ways of setting it:

1) Use a script that automatically sets it

2) Use the command bar to set it

Either way, the script would look something like this:

My3DishGUI.Adornee = game.Workspace.Part

Handles

Handles are the first of our "3D Space " GUIs. This means that they are displayed not as a stamp on your screen, but as part of the 3D game . Handles have the ability to put blue drag orbs around a brick, just like the ones that appear when you resize a brick when you're building! Not only that, but you can change the colour of them, simply by changing the "Color" property in the Properties. You can even choose to switch them to "Movement" handles, just by editing the Style!


ArcHandles

ArcHandles are very similar to Handles, except they have orbit-like-circles going around each axis.


SelectionBox

SelectionBoxes mimic the box that appears around a brick when you select it. It's almost exactly the same, except you can change the colour. You choose which brick it appears on the same way you set it for Handles and ArcHandles.


SelectionPartLasso

This is a strange one. It has two properties for setting where it appears: Humanoid, and Part. They are both object properties, which means that you have to set them just like you do with Adornee. If you set the Humanoid to your Humanoid in play solo, and the Part to any brick, then a line (or lasso) will appear that comes out of your torso and into the brick. It's a strange GUI, but at least you have it, to do what you like with it.


SelectionPointLasso

This is almost exactly the same as SelectionPartLasso , in name and nature, except this one doesn't use a Part, it uses a Point. The "Point " is a Vector3 value (you know, position in 3D?) which is the other end of the lasso. You can set this property using the Explorer panel.


SurfaceSelection

This is similar to the SelectionBox , but it only selects a certain face of a brick. The face can be edited in the Explorer panel.



FAQ

Q. When I try to make a GUI the full height of the screen, there's a bit at the top that gets cut off. What's going on?

A. The problem is that the menu of buttons at the top of the screen (the ones that say Tools, Insert, Full screen, Help, and Exit) get in the way, so all GUIs that are supposed to be at the top of the screen aren't really. You can solve your problem by positioning it higher and making the Y size bigger.


Q. How do I change the font of a Text GUI?

A. This isn't possible at the current time, so you'll have to make do with the font you already have.


Q. I can't type capital letters on a TextBox! What's going on?

A, To type in capital letters, Hold Shift while your typing letters! Caps Locks won't work. Shift only works. REMEMBER TO HOLD IT WHILE YOU TYPE.


Q. I HAVE NO IDEA WHAT YOU JUST SAID

A, GUIs are not an easy topic to learn. Had trouble understanding? Take it slowly, learn one thing at a time. If you are still having trouble, maybe GUIs are not the things for you.


Q. Sometimes when I use TextBoxes and TextButtons at the same time, all the text in the TextBox vanishes. What gives?

A. A strange glitch that will be fixed soon, hopefully. Nothing you can do about it at the current time.


Q. I made a GUI, but it doesn't show up... any help?

A. Remember the trouble-shooting list from earlier?

Is the Position equal to {0, 0}, {0, 0}?



Q. How do I get the text in my Text GUI to stay inside of the box?

A. If you want the text to automatically start a new line when it reaches the end, simply check the "WordWrap" property. This should keep the text inside the box.


Got a question? PM me (sdfgw) for help.

derp

Start a Discussion Discussions about How To Create 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.