Fandom

ROBLOX Wikia

GUIs: Introduction

12,567pages on
this wiki
Add New Page
Talk0 Share

A GUI (Graphical User Interface) is a set of 2D objects that you can use, in ROBLOX, to make many cool, interactive things.

This is a short introduction to GUIs, and there are many specific guides for the more complicated aspect of using GUIs. Have fun!

GUI objects

There are many different GUI objects that you can or can't use:

  • BillboardGui
    This shows 2D objects in the 3D world. It is sometimes hard to use, and isn't yet finished. You should stick to using ScreenGui.
  • CoreGui
    This has not yet been made, but may be used to make a GUI that all players can see. Watch this space!
  • Frame
    This holds other GUI elements and helps you to move/resize many GUI elements at the same time.
  • GuiMain
    This was the first container for GUI elements. You should use a ScreenGui instead.
  • ImageLabel
    This is a GUI object that can have an image on top of it. Think of it as a 2D decal, within a box.
  • ImageButton
    This is like an ImageLabel, but will fire different events when certain things happen, like clicking.
  • PlayerGui
    Every player has this. Anything in the StarterGui will be added to the PlayerGui when the player (re)spawns.
  • ScreenGui
    This is what you will usually use to hold all of your GUI elements. Anything inside the ScreenGui will show up on the screen in 2D, unlike when using BillboardGui
  • StarterGui
    This gives GUIs to players when they (re)spawn. When making GUIs, you should usually put everything in here. It can be found under Workspace > StarterGui or using the scripting snippets: "Workspace.StarterGui" or "Workspace:GetService('StarterGui')".
  • TextBox
    This is, quite simply, a box that contains text! It has many options such as text alignment, colour and text wrap (new lines). It can contain many lines of text.
  • TextLabel
    This is like a text box, but only holds a small amount of text, with no new lines.
  • TextButton
    This is similar to a text box, but will fire different |events when certain things happen, like clicking.

Making your first GUI

Starting off

When you start your GUI, you cannot just dive in and add elements, you have to have a container for them. For this tutorial, we will be using ScreenGui. Open up the Explorer toolbar, click "StarterGui" under workspace, and then go to Insert > Object > ScreenGui.

A step-by-step video is shown below:

thumb|392px|left|Adding a ScreenGui to the StarterGui
















Adding your own elements

Text elements

Now, it's time for the fun! You can add one of the aforementioned elements, such as TextLabel or ImageButton! Below is a concise list how to go about doing this:

  1. Add the element of your choice. Make sure you have selected your ScreenGui, then go to Insert > Object and select either "TextButton", "TextLabel" or "TextBox", we will cover images later.
  2. Change the size of your element. The 'Size' property (in the Properties toolbar) needs to be edited. The sizes are as follows: {scale,offset},{scale,offset}. We will be using offset for this, because it is an absolute setting. The first offset value is for the 'x' axis, which is the one that runs horizontally. The second is for the 'y' axis, which runs vertically. Make the box about 100 on the x and 100 on the y.
    Size100100

    The size, and resulting TextBox.

  3. Now, you can change the position. This acts like the size, so change it to what you want. Make sure it is no more than about {0,300},{0,300}.
  4. You can add more elements, but make sure you are adding them to the ScreenGui!








Images

Using images with GUIs is a lot more daunting than text when learning, but is quite easy once you know how!

  1. Add a part to your place. This will be used to get the ImageId (the image's link).
  2. Insert a Decal by opening the tool pane and finding a decal to add to the ImageLabel/ImageButton.
    Decaladded

    The decal added, and the 'Texture' property of the decal

  3. Copy the 'Texture' of the Decal to the 'Image' property of the ImageLabel/ImageButton.
  4. Admire your hard work, you're done!
Done1!

Done! You now have an image!







Offset and scale

Offset and scale are VERY different.

  • Offset is measure in pixels, and is always the same. Your 100,100 box will look the same to everyone.
  • Scale is a percentage of the screen. If you set the scales to 0.5,0.5 and the position to the origin (0,0) then your box will always be in the top left corner, stretching to the middle of the screen. It will change sizes when you resize your ROBLOX window. This is useful for making large things, or for positioning things in the same place relative on other people's screens. Scale works for size AND position, much like offset. This is very useful when you want things on the right hand side of the screen, and you want them to stay there.

NOTE: The bounds for scale will be:

  1. x axis: The right-hand edge of the ROBLOX window
  2. y axis: The top of the gear/tool selection bar, or the bottom of the ROBLOX window if there is no gear or tools in the game.

Scripting GUIs

Events

Events are ways of finding if certain things are happening. For example: The ClickDetector has a MouseClick event. This event is 'fired' when the mouse clicks the ClickDetector. There are a few main events (aside from the standard events) with the GUI Buttons (TextButton/ImageButton) and all visible GUI Elements. These are namely Mouse events:

GUI Buttons have the following:

  • MouseButton1Click
  • MouseButton1Up
  • MouseButton1Down
  • MouseButton2Click
  • MouseButton2Up
  • MouseButton2Down

All GUI objects have the following:

  • MouseEnter
  • MouseLeave
  • MouseMoved

These can all be connected using code syntax such as:

GUI.MouseButton1Click:connect(FUNCTION)

Some of these return variables:

  • MouseButton1Up
  • MouseButton1Down
  • MouseButton2Up
  • MouseButton2Down
  • MouseMoved

These all return {int x, int y} where x and y are the coordinates of where the mouse has clicked or moved, depending on the event. Example:

script.Parent.MouseMoved:connect(function(x,y) print(x,y) end)

If the script's parent is a GUI, then it will print the mouse's position every time it moves, so long as the mouse remains over the GUI object.

You can learn about other code from the other pages in this wiki, and use them to make almost anything with your new GUI. This could be a reset tool, an information board or even a GUI game!

Frames

Frames are just used to hold other GUI objects. You can change the position of a frame and the objects inside it will also move, with their position added on to the position of the Frame. Fro example: GUI object A is at {0,20},{0,50} and it is inside Frame B which is at {0,50},{0,100}. A's absolute position will be {0,70},{0,150}. This counts for everything in the frame. Frames themselves have no size variable, but do have an AbsoluteSize, which is the absolute size of everything inside the frame from to origin to the bottom-left bound in the frame ({0,0},{0,0} in the frame, to the bottom-left of the leftmost,bottommost object in the frame).

Summary

GUIs are very diverse elements of the game, and can make many cool things. Remember that they are still under construction and are likely to change at any point. Feel free to mess about with the GUI elements and see what kind of awesome things YOU can make! You can show off your new GUIs in the Look What I Made Forumand see what other people thing of it! You can add almost any amount of GUI elements to your game to make cool, exciting things for your new game. We've already seen that GUIs can be the game!

Don't try to make anything too advanced until you feel confident that you know enough about GUIs. The possibilities are endless!

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.