The Articles/Creating Surface GUI|Surface GUIs tutorial showed you how to create basic surface GUIs to showcase signs, illustrations, and other objects in your Roblox game. Now we’ll take the idea further with interactive surface objects that can become in-game buttons, keypad panels, and more.

Create a Button Column

Like any surface GUI, you’ll need a basic part to attach it to.

1. Create a block that’s exactly 2 studs wide and 2 studs deep.

For this demo, it's important that the block is 2 studs wide and 2 studs deep. Check the Part → Size values in the Properties window if necessary.

2. In the Explorer window, rename the part to ButtonColumn.

Create the Surface GUI

Now create a surface GUI for the column. This time, instead of adding it directly to the ButtonColumn part, we’ll add it to the StarterGui object (remember that this will copy the GUI to each player’s local game session when they join the game).

1. In the Explorer window, hover over StarterGui and click its circle ⊕ button.

2. Select SurfaceGui from the popup menu.

Connect the GUI to the Column

This new surface GUI space is part of the StarterGui object but it’s not connected with a part — it’s just floating out in space. To connect the surface GUI to a part, you must set its Adornee property.

1. Select the SurfaceGui object in the Explorer window.

2. In the Properties window, click the Adornee property. This will change your cursor in Studio to a little selection arrow.

3. In the 3D game editor window, click on the button column part to set it as the adornee for the GUI.

Add an Image Button

Now let’s add an image button to the surface GUI. These steps will be similar to those in articles/Creating GUI Buttons, so review that guide if necessary.

1. In the Explorer window, find the SurfaceGui object that you added to StarterGui and insert an ImageButton object.

2. Select the button and click on its Image property in the Properties window. Upload the ControlButton.png image below into your game (right-click it and select Save Image As… to save it to your computer).

When the image is finished uploading, you should see a small button in the front corner:

Depending on your camera view, you might not be looking at the surface of the column where the GUI is located. If you don't see the button, move your camera around until you see it.

Change the GUI Face

As you can see, the surface GUI was placed on the front surface of the part. This isn’t always where you’ll want a GUI to be, so let’s change it.

1. Select the SurfaceGui object (not the image button that’s inside it).
2. In the Properties window, find the Face property and select Top from the pull-down. Now the surface GUI — and the button within it — will be located on top of the column.

Although the button is now on the top surface, it’s much too small, it’s tucked in a corner, and it’s not even perfectly round like the image!

Remember that it’s a good practice to set the canvas size of the surface GUI to the same proportions of the surface it’s on. Since we moved it to the top surface, we need to change the canvas size to match.

1. Make sure the SurfaceGui object is still selected.
2. Remember the convenient “rule” of setting the canvas size to 100 times the surface’s stud length in each direction. Since the top surface is 2×2 studs, change both X and Y for CanvasSize to 200.

Customize the Button

At this point, the button still doesn’t look like what players would expect. It’s still tucked in a corner of the surface and it’s not facing the right direction. Let’s fix both of these things and more!

1. Select the image button and set both AnchorPoint properties to 0.5.

2. Change BackgroundTransparency to 1 to make the background invisible.

3. Set both Position → X → Scale and Y → Scale to 0.5. This will center the label within the bounds of the surface GUI.

4. For Size, set both X → Offset and Y → Offset to 150.

5. Set Rotation to -90 to make the button face in the proper direction (from the front of the column toward the back).

Attach a Local Script

The final task is to connect a function to the button’s GuiButton/Activated|Activated event. For this guide, the function will just be used to set a boolean variable to true or false. In a real game, pressing the button might unlock a secret door or open an interactive on-screen GUI.

1. In the Explorer window, hover over the ImageButton object and insert a LocalScript.

2. In the new script, delete any existing code and then copy and paste in these new lines:

local button = script.Parent
local toggled = false
 
local function onButtonActivated()
	if toggled == false then
		toggled = true
		-- Perform an action for the button being pressed "on"
		--
	else    
		toggled = false
		-- Perform an action for the button being pressed "off"
		--
	end
end
 
button.Activated:Connect(onButtonActivated)

Beyond a simple button, what other ideas can you think of? Challenge yourself to create a button that opens a secret door or even a touch-screen computer that opens up a large, interactive articles/Intro to GUIs|screen GUI display. The options are endless!