Interfaces on Parts

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

1. Create a part named InfoBoard.

2. Change the Size of the part to 15, 18, 1.

   

   

3. Insert a SurfaceGui into the part and rename it InfoSurfaceGui.

4. 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.

  

  

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.

1. Insert a UIPadding constraint into InfoSurfaceGui.

   

2. Set the PaddingBottom, PaddingLeft, PaddingRight and PaddingTop properties to 0.05, 0 to create a border around the frame.

   

   

3. 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:

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:

1. Drag the SurfaceGui into StarterGui.

2. Adorn it to the part by clicking on the Adornee input box and then on the board part.