How To Make A Gui In Roblox, Roblox

How To Make A Gui In Roblox

A. Creating GUI Buttons

This article extends the tutorial Using images in GUIs and shows you how to create screen buttons that can be used for menus, in-game actions and more.

1. Button types

a. Text button

A TextButton is very similar to a TextLabel, except that a player can activate it with a click / tap. Internally, it also shares many of the same visual properties as a text caption – font, background color, stroke color, etc.

b. Image button

Likewise, an ImageButton is similar to an interactive version of the ImageLabel object and uses a custom image that you upload to Roblox. It also has most of the same features as its buttonless counterpart.

2. Create a button

The rest of this article shows you how to add an ImageButton to the screen and switch between three appearances based on how the player interacts.

a. Add an ImageButton

  1. Move the mouse pointer over the StarterGui object in the Explorer window, click the circular button and insert a ScreenGui object.
  2. Select the new ScreenGui object and insert an ImageButton in a similar way.

This will add a blank image button to the corner of the game view.

b. Upload photos

This button takes three personalized images – the normal appearance on the screen, a floating appearance and a final image when the player presses it. You can use these menu buttons for testing. Just right-click on each button and choose Save image as … to save it to a convenient location on your computer.

Use Asset Manager to upload multiple assets at the same time, instead of uploading each image individually:

  1. If it is not already open, on the View tab, click Asset Manager.
  2. Click the Import button at the top of the window.
  3. Find the three photos on your computer, select them and confirm that you want to send them.
  4. After uploading, double click on the “Images” folder or select “Images” from the “Tree view” menu.

c. Define appearance

The three appearances of the button can be defined using the ImageButton object.

  1. In the Explorer window, select the new ImageButton object.
  2. In the Properties window, click on the Image property and select the ImgButtonNormal asset.
  3. Click on the HoverImage property and select the ImgButtonHover asset.
  4. Click on the PressedImage property and select the ImgButtonPressed asset.

d. Customize the button

Make the following adjustments to complete the appearance of the button on the screen:

  1. In the Properties window, set BackgroundTransparency to 1 to make the background transparent.
  2. Move the button away from the corner by setting Position → X → Offset and Position → Y → Offset to about 50.

e. Add a LocalScript

The final task is to connect basic key functions.

  1. Move the mouse pointer over the ImageButton object in the Explorer window, click the button and insert a
  2. LocalScript. This will create and display a new LocalScript.
  3. In the script, copy and paste the following new lines:
  4. Local button = script.Parent
  5. OnButtonActivated () local function
  6. Print (“Button enabled!”)
  7. Perform the expected button actions here
  8. End
  9. Button.Activated: Connect (onButtonActivated)

3. Copy codelight theme

This is a basic button script that works like this:

  1. In the first line, a variable button is defined to inform the script to which specific object it is linked. In this case, it is linked to ImageButton, the script’s parent.
  2. The onButtonActivated () function is the main handler for activating the button. In it, you must perform the intended action; B. open the main game menu.
  3. The last line connects the button with the onButtonActivated () function to the Activated event. This will cause the function to be performed whenever a player activates the button in the game.

Although there are different types of events that you can use to connect to the buttons, the activated event is more reliable for basic buttons and provides standard button behavior on all PC to phone / tablet and console platforms.

4. Button troubleshooting

If the button does not work as expected, check the following:

  1. Make sure you use a client-side LocalScript and not a server-side script.
  2. Make sure the LocalScript is a direct child of the ImageButton object (not the top-level parent ScreenGui object).
  3. Make sure that the Image, HoverImage and PressedImage properties of your ImageButton object are set to the appropriate image elements.


B. Intro To GUIs

A GUI, which stands for Graphical User Interface, is used to display information about the game to the player. GUIs can be used to show the player the level, health and gold of your character and to create buttons for menus and inventory systems in the game. In the illustration below, Hexaria’s game developers use GUIs to display information about the player and create a menu in the game.

1. How GUIs come into play

The most common type of GUI is an on-screen GUI, which acts as a 2D location where stickers are placed on the player’s screen. When the player moves the camera or explores the game world, a GUI on the screen remains in the same place (on the screen).

When creating a new Roblox game, this GUI area on the screen does not exist. It is your job to add it. The easiest way is to add it to the StarterGui service so that it is copied to a player’s local game session when he enters the game.

  1. In the Explorer window, find the StarterGui object.
  2. Hover your mouse over it and click the circle button.
  3. Find ScreenGui in the pop-up menu and select it. This will create a new 2D screen area in front of your 3D game world.

2. Adding elements to an on-screen GUI

Currently, the new GUI on the screen is blank. It is just a blank canvas that covers the width and height of the player’s screen.

a. Add a text caption

  1. In the Explorer window, hover your mouse over the new ScreenGui object, a child of StarterGui, and click the circle button.
  2. Find TextLabel in the pop-up menu and select it. Note that an object can be found more easily by entering the first letters of its name in the “Find object” entry field.

These steps created the new text label as a child of ScreenGui, which is a child of StarterGui. None of these objects exist in the 3D workspace, so you cannot select them with the selection tool as you do with normal parts. To select any of these GUI-related objects, you must select them in the Explorer window structure in which you created them.

3. Customize the label

We have text captions on the screen, but a white box with the word “caption” is not very useful. We will customize it to look like a “version number” GUI, an indicator that normally appears on the menu / introduction screen that shows the current version of the game.

  1. Select the new TextLabel object in the Explorer window.
  2. Open the Properties window by selecting the View tab and clicking the Properties button.
  3. For the Font property (in the Text section), click to the right of the font name and select Autobahn from the drop-down menu.
  4. Enter a new name, such as Version 1.0 in the Text property box.
  5. Type 35 in the TextSize property box.
  6. Now expand the data area (if it is not already expanded).
  7. Enter a new value, such as 8 for the BorderSizePixel value.

Great! The GUI object looks much better now! If you want to be even more creative, change properties like TextColor3, BackgroundColor3, BackgroundTransparency and others.

4. Positioning elements in an on-screen GUI

Now that we have a simple text object on the screen, let’s move it to a new position. Each 2D object in Roblox has a position property that determines where it will be drawn in relation to its parent. This position is determined by the X and Y coordinates, where X is the horizontal position and Y is the vertical position.

When created for the first time, all 2D objects start with an X and Y position of 0, the upper left corner of the screen. What if you want to move them? Let’s take a look at the Position property of the text label and see how!

  1. If the TextLabel object is not selected, click on it in the Explorer window.
  2. Find the Position property and click on the small arrow to expand it.
  3. Now expand the X and Y branches directly below it. Note that each has unique scale and displacement properties. You can use these values ​​to position the text caption in the on-screen GUI.

5. Scaling property

The “Scale” property indicates a percentage of the parent object’s width or height. Remember that the on-screen GUI screen covers the entire width and height of the 3D game view. This means that the Scale property can position an object directly in the center of the view, on the left or right edge, or anywhere between based on a percentage of the total width or height of the screen.

Normally, although the scale shows a percentage, the range of values ​​entered must be between 0 and 1, with 0 being 0% and 1 being 100%. For example:

Scale = 0.1
10% of the total width or height
Scale = 0.5
50% of the total width or height
Scale = 0.95
95% of the total width or height

Now move the text label to the horizontal center of the screen. Simply enter 0.5 for the X scale value and press Enter to confirm. Remember that your game will be played on screens of different width and height. For example, a phone’s screen may be slightly wider (and less tall) than a PC’s or console’s screen. Scaling is the best choice for placing an object in the center of the view, as it will remain in the center on many different screens.

6. Offset property

The second property in each set is called the offset. Instead of moving the element a percentage of its parent’s size, it moves a certain number of pixels. This can be useful when you want to easily place a GUI element on any edge of the game view.

Move the caption just slightly to the top of the screen. Enter 50 for the Y offset value and press Enter to confirm. Offset is the best choice for placing an object close to any edge of the view. Using this option ensures that it is in the same basic position as the screen on your PC, console, tablet and phone.

7. Point of anchorage

If you look closely at the current position of the GUI object, you will see that it is not perfectly centered from left to right, although we have set Position → X → Scale to 0.5 (50%).

This is due to the object’s default anchor point. An anchor point is a specific point on the object that you want to align with the specified screen position. Think of the anchor point as a pencil tucked into a piece of paper. The pen can be attached anywhere on the paper and Roblox will align the tip of the pen with the position values ​​you have set for the object.

In the game editor window, the anchor point is indicated by the small square outline of the object (when it is selected). When you create a new GUI object, the anchor point is defined in the upper left corner. Because of this, the exact point on the object is aligned with the values ​​of positions X and Y previously determined.

The anchor point is based on an X and Y value that is a percentage of the size of the object: 0 corresponds to 0% and 1 corresponds to 100%.

  1. If the TextLabel object is not selected, click on it in the Explorer window.
  2. Find the AnchorPoint property and click on the small arrow to expand it.
  3. Set the X value to 0.5 and press Enter to confirm.

Anchor point values ​​are not limited to 0, 0.5 or 1. You can enter any value between 0.25 and 0.8, but you cannot specify an anchor point less than 0 or greater than 1.

Change the size of items in an on-screen GUI

As you can see, the Position and Anchor Point properties allow us to place elements anywhere in a GUI on the screen. We can also resize any element using its size properties.

  1. If the TextLabel object is not selected, click on it in the Explorer window.
  2. Find the Size property and click on the small arrow to expand it.
  3. Now expand the X and Y branches directly below it. Similar to position, each has unique scale and displacement properties.

8. Scaling property

To define the size of a GUI object, the Scale property works in the same way as for positioning and represents a percentage of the width or height of the parent object. If you set Size → X → Scale to 0.5 (50%), the object will be exactly half the width of the screen.

  1. Enter 0.75 for the X scale value and press Enter to confirm.
  2. Enter 0 for the X offset value and press Enter.

The text caption should now occupy exactly 75% of the screen width.

9. Offset property

As you noted above, Size also has a property called Offset. To resize, the offset is useful when you want to create buttons, labels, or other objects that have the same number of pixels (width or height), regardless of the screen on which they are displayed. To increase the height of the text label, simply enter 150 for the Y offset value and press Enter to confirm.

10. Use negative offsets

Some GUI layouts are only possible with creative combinations of scale and offset values. You can investigate this by having the TextLabel object fill the entire screen with a small 20-pixel border on all four edges.

  1. Set Position → Y → Offset to 20. This should only push the object up slightly.
  2. Set Size → X → Scale to 1 (100% of the screen width).
  3. Set Size → X → Offset to -40 – This will make the object 40 pixels smaller than the total width of the screen, resulting in the desired border of 20 pixels on both sides.
  4. Set Size → Y → Scale to 1 (100% of the screen height).
  5. Set Size → Y → Offset to -40. As above, this makes the object 40 pixels smaller than the total height of the frame and creates a border of 20 pixels above and below.

11. Challenge

There is at least one other combination of configurations that create the same GUI object as above. Can you imagine that? Here’s a tip: set the anchor point in the center of the TextLabel object, then adjust the scale and offset values ​​as needed. Great! This covers the basics of GUIs, how to create a GUI screen for all players who will participate in the game, and how to position and resize GUI objects on the screen.

You may also like...