The SurfaceGui object lets you display GUI content onto surfaces in the 3D world. They are commonly used to display leaderboards, or to signpost areas in the 3D space. This tutorial shows you how to create an information board about long sword statistics.
Creating a Surface GUI
Create a part named InfoBoard.
Change the Size of the part to 15, 18, 1.
Insert a SurfaceGui into the part and rename it InfoSurfaceGui.
Insert a Frame into the GUI and name it BackgroundFrame. This is the background on which the information will be displayed.
Adjusting the GUI
Face
The Face property determines which face of the part will be used to display the SurfaceGui. The BackgroundFrame object will be visible on the surface as a small white square when the correct face is selected.
Set the Face property of InfoSurfaceGui to Front.
If the frame isn't visible after selecting the front face, the part may be pointing the wrong way. Try rotating the part or choosing a different face.
Size
To make the frame cover the entire face, you'll need to adjust its Size property.
Set the Size property of BackgroundFrame to 1, 0, 1, 0 so that it covers all of the selected face.
Styling
It's often a good idea to add a UIPadding constraint to create a gap between the borders of a GUI object and its contents.
Insert a UIPadding constraint into InfoSurfaceGui.
Set the PaddingBottom, PaddingLeft, PaddingRight and PaddingTop properties to 0.05, 0 to create a border around the frame.
Set the BackgroundTransparency property of BackgroundFrame to 1.
Adding Content
You can use the skills learned in the preceding UI tutorials to display information inside of the BackgroundFrame. Here is some example content for the frame:
| Object | Description |
|---|---|
| 1 | A TextLabel to display the item name with an ImageLabel underneath displaying wooden planks. |
| 2 | An ImageLabel to display the item image with a gray BackgroundColor3 value. A UICorner constraint is used to apply a rounded edge to each corner. |
| 3 | A Frame containing three TextLabels positioned with a UIListLayout constraint to arrange them in a horizontal sequence, similar to Creating a Score Bar. |
SurfaceGui Properties
Now you have a completed SurfaceGui, try changing the following properties to see their effects.
LightInfluence
Because surface GUIs exist in the 3D world, they can be affected by light like any other object. The LightInfluence property controls how much the SurfaceGui is influenced by light. The normal value is 1, meaning the GUI space will be lit the same as surrounding objects. If you set it to 0, images inside will remain lit as you designed them. This can be useful if you want to create something like a neon sign which glows bright even if it's in a dark environment.
Adornee
The part on which a SurfaceGui is displayed is determined by the Adornee property. If blank, it automatically displays on the parent part. The ability to set Adornee allows for the creation of interactive buttons when the GUI is not parented to the part. To adorn a SurfaceGui to a part:
Drag the SurfaceGui into StarterGui.
Adorn it to the part by clicking on the Adornee input box and then on the board part.