In Creating a Score Bar, you built a basic GUI to display information. In this tutorial, you'll learn how to make on-screen buttons that can be used for menus, interface actions, and more.
There are two types of button objects that can be used in your GUI design:
Creating a Button
The following steps show how to add an ImageButton to the screen and flip it between three appearances depending on the player's interaction.
In the Explorer window, hover over the StarterGui object, click the + button, and insert a ScreenGui.
Select the new ScreenGui object and, in a similar way, insert an ImageButton.
This will add an empty image button to the corner of the game view.
As a best practice, rename the new button according to its purpose, for example MapButton.
For the button to dynamically resize on various devices and screens, it's best to use Scale properties.
In the Properties window, locate the Size property and click the arrow to expand its tree.
Set the following size properties:
Constrain the button to a square bounding box by setting SizeConstraint to RelativeYY.
The current size should work nicely on a phone, but the X/Y scale of 0.15 (15%) may appear too large on a computer screen. To correct this, you can add a UISizeConstraint.
Hover over the MapButton object and insert a UISizeConstraint.
Select the new size constraint object and set its MaxSize property to 90, 90.
Buttons should typically be moved within a player's thumb reach on mobile devices, for instance the lower-right area of the screen.
Change the button's AnchorPoint property to 0.5, 1 so that positioning will be based around its bottom-center point.
Expand the button's Position tree and set the following property values. This will move the button near the default jump button that appears on phones/tablets.
This 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.
Setting these appearances can be done through the Image, HoverImage, and PressedImage properties.
Locate the button's Image property and paste in rbxassetid://6025368017, or use your own asset.
For the HoverImage property, paste in rbxassetid://6025452347.
For the PressedImage property, paste in rbxassetid://6025454897.
To finalize the button's appearance on screen, make the following adjustments:
Set BackgroundTransparency to a value of 1 to make the background transparent.
Rotate the button slightly by setting Rotation to -5.
The final task is hooking up basic button functionality.
In the Explorer window, hover over the MapButton object and insert a LocalScript.
In the script, copy and paste in these new lines:1local button = script.Parent23local function onButtonActivated()4 print("Button activated!")5 -- Perform expected button action(s) here67end89button.Activated:Connect(onButtonActivated)10
This simple button script works as follows:
- The first line sets a variable button which tells the script what specific object it's linked to. In this case it's linked to the ImageButton, the parent of the script.
- The onButtonActivated function handles the button's activation. Inside it, you should perform the intended action like opening the game's main menu.
- The final line connects the button to the onButtonActivated function with the Activated event. This will cause the function to run every time a player activates the button in game.
If the button doesn't work as expected, check the following:
- Confirm that your button's Image, HoverImage, and PressedImage properties are set to the appropriate image assets.