title | description |
---|---|
Interactive Buttons |
The process for creating interactive on-screen buttons. |
This tutorial shows you how to make on-screen buttons for menus, interface actions, and more.
There are two types of button objects that you can use in your UI designs:
The following steps show how to add an Class.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 Class.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:
local button = script.Parent local function onButtonActivated() print("Button activated!") -- Perform expected button action(s) here end button.Activated:Connect(onButtonActivated)
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
Class.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 theClass.GuiButton.Activated|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:
- Make sure you used a client-side
Class.LocalScript
, not a server-sideClass.Script
. - Ensure that the
Class.LocalScript
is a direct child of the button object (not a child of theClass.ScreenGui
container). - Confirm that your button's Image, HoverImage, and PressedImage properties are set to the appropriate image assets.