How To Create GUIs

''' 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 

There are several things you have to do to set up a GUI. Firstly, 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.

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".

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

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 recieve a copy. Now let's edit it. In the Explorer, select the Frame, and in the Properties Panel, its properties should pop up.

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}".

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.

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.

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}...

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 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 offscreen 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.

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

 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.

 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 do NOT go in a ScreenGui, they go straight into the ScreenGui. 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!

The tricky part is attaching the GUI to a brick. You have to edit the Adornee of the GUI, 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: MyHandlesGUI.Adornee = game.Workspace.Part There are more 3D GUIs like this, so let's take a look at them.

 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 fact can be edited in the Explorer panel.