Show
This article expands on the articles/Using Images in GUIs|Using Images in GUIs tutorial and demonstrates how to make on-screen buttons that can be used for menus, in-game actions, and much more. Button TypesText ButtonA 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 label — font, background color, stroke color, etc. Image ButtonSimilarly, an ImageButton is like an interactive version of the ImageLabel object and it uses a custom image that you upload to Roblox. It also shares most of the same properties as its non-button counterpart. Creating a ButtonThe remainder of this article demonstrates how to add an ImageButton to the screen and flip it between three appearances depending on the player’s interaction. Add an ImageButton
This will add an empty image button to the corner of the game view. Upload ImagesThis button needs three custom images — its normal appearance on the screen, a hover-over appearance, and a final image for when the player presses it.
ImgButtonNormal ImgButtonHover ImgButtonPressed You can use these menu buttons for testing — simply right-click each one and select Save Image As... to save them to a convenient location on your computer. Instead of uploading each image separately, use the Asset Manager to upload multiple assets at once:
Inside the folder, you should see the new images: Setting the three appearances for the button can be done through the ImageButton object.
Adjust the ButtonTo finalize the button’s appearance on screen, make the following adjustments:
Attach a LocalScriptThe final task is hooking up basic button functionality.
This is a basic button script and it works as follows:
Although there are several different event types which you can connect to buttons, the GuiButton/Activated|Activated event is the most reliable for basic buttons, providing standard button behavior on all platforms from PC to phone/tablet to console.
If the button doesn’t work as expected, check the following:
Hexaria title screen (used with permission of Biostream) 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 what their character’s level, health, and gold are, and also to create in-game buttons for menus and inventory systems. In the image below, the game developers of Hexaria use GUIs to both show information about the player and to create an in-game menu. How GUIs Get Into a GameThe most common type of GUI is a screen GUI which behaves like a 2D place to put stickers on the player’s screen. When the player moves the camera or explores the game world, a screen GUI stays in the same place (on the screen). When you make a new Roblox game, this screen GUI space doesn’t exist — it’s your job to add it. The easiest way is to add it to the StarterGui service so that it gets copied to a player’s local game session when they join the game.
Adding Items to a Screen GUICurrently the new screen GUI is empty — it’s just a blank canvas that spans the entire width and height of the player’s screen. Add a Text LabelAll sorts of things can be added to the screen GUI. Let’s start with a basic text label.
This will add a very basic text label to the top-left corner of the game view. 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 can't select them using the Select tool like you can with normal parts. To select any of these GUI-related objects, you must select them from the Explorer window tree where you created them. We have a text label on the screen, but a white box with the word Label isn’t very useful. Let’s customize it to look like a “version number” GUI, a display element usually found on the menu/intro screen which shows the current version of the game.
Great! The GUI object looks much better now! If you want to get even more creative, try changing properties like TextColor3, BackgroundColor3, BackgroundTransparency, and others. Positioning Items in a Screen GUINow that we have a basic text object on the screen, let’s move it to a new position. Every 2D object in Roblox has a Position property which determines where it will be drawn in relation to its parent object. This position is set by X and Y coordinates where X is the horizontal position and Y is the vertical position. When first created, all 2D objects start with an X and Y position of 0 which is the top-left corner of the screen, but what if you want to move it? Let’s look at the Position property of the text label and learn how!
Scale PropertyThe Scale property represents a percentage of the parent object’s width or height. Remember that the screen GUI “canvas” spans the full width and height of the 3D game view — that means the Scale property can be used to position an object directly at the center of the view, against the left or right edge, or anywhere between based on a percentage of the screen’s full width or height. Although Scale indicates a percentage, the range of values that you enter should usually be between 0 and 1, where 0 equals 0% and 1 equals 100%. For example:
Scale = 0.1 10% of full width or height Scale = 0.5 50% of full width or height Scale = 0.95 95% of full width or height Now let’s move the text label to the horizontal center of the screen. Simply enter 0.5 for the Scale value of X and press the Enter/Return key to confirm. The text label should now be positioned more toward the center of the game view. Remember that your game will be played on screens which vary in width versus height. For example, a phone screen may be slightly wider (and less tall) than a PC or console screen. Scale is the best choice for positioning an object in the center of the view because it will remain in the center on many different screens. The second property in each set is called Offset. Instead of moving the element by a percentage of the parent’s size, it moves it by a specific number of pixels. This can be useful if you want to place a GUI element slightly inside any edge of the game view. Let’s move the text label just slightly inside the top edge of the screen. Enter 50 for the Offset value of Y and press the Enter/Return key to confirm. Now the text label should be inset just slightly from the top edge of the screen. Offset is the best choice for positioning an object near any edge of the view. Using this option will make sure it remains in the same basic screen position on PC, console, tablet, and phone. If you look carefully at the current position of the GUI object, you’ll notice that it’s not perfectly centered left-to-right, even though we set Position → X → Scale to 0.5 (50%). This is because of the object’s default anchor point. An anchor point is a specific point on the object to align with the screen position you set. Imagine the anchor point like a pin stuck through a piece of paper — the pin can be put through any place on the paper, and Roblox will align that pin point with the Position value(s) you set for the object. In the game editor window, the anchor point is shown by the small square outline on the object (when it’s selected). When you create a new GUI object, the anchor point is set to the top-left corner — this is why that exact point on the object is aligned to the X and Y position values set earlier. The anchor point is based on an X and Y value which is a percentage of the object’s size: 0 equals 0% and 1 equals 100%. You can use this concept to center the GUI object in the exact middle of the screen.
The text label should now be positioned exactly in the center of the game view. Anchor point values are not restricted to 0, 0.5, or 1 — you can enter any value between like 0.25 or 0.8, but you cannot set an anchor point less than 0 or greater than 1. As you can see, the Position and AnchorPoint properties let us put elements anywhere we need to within a screen GUI. We can also change the size of any element using its Size properties.
Scale PropertyFor setting the size of a GUI object, the Scale property works the same as it does for positioning, representing a percentage of the parent object’s width or height. If you set Size → X → Scale to 0.5 (50%), the object will be exactly half of the screen width. Let’s experiment and see what happens!
The text label should now take up exactly 75% of the screen width. Offset PropertyAs you noticed above, Size also has a property called Offset. For sizing, Offset is useful if you want to create buttons, labels, or other objects which stay the same number of pixels (width or height) no matter what screen they’re being viewed on. To increase the height of the text label, simply enter 150 for the Offset value of Y and press the Enter/Return key to confirm. Now the text label should be quite a bit taller than before! Using Negative OffsetsSome GUI layouts are only possible with creative combinations of Scale and Offset values. You can explore this by making the TextLabel object fill the entire screen with a small margin of 20 pixels around all four edges.
There's at least one other combination of settings which will create the same GUI object above. Can you think of it? Here's a hint: set the anchor point to the center of the TextLabel object and then adjust the Scale and Offset values as needed. Show/hide
Great! That covers the basics of GUIs, how to create a screen GUI canvas for all players that enter your game, and how to position and resize GUI objects on the screen. |