We use cookies on this site to enhance your user experience

10 min

In the articles/Intro to GUIs and articles/Using Images in GUIs guides, you learned how to put GUIs on a screen “canvas” and display it to players in your game. GUIs are not limited to only the screen, however. Using surface GUIs, you can add interfaces directly into your game world to create shop signs, keypad panels for locked doors, or even touch screens.

Creating a Basic Surface GUI

In this first example, we’ll explore setting up a surface GUI for a non-interactive surface object, like a sign or painting.

Create a Sign Board

Before creating the surface GUI, you’ll need a basic block to attach it to. The block will have to be a certain size to match the surface GUI we’re going to make.

  1. Create a wide, thin part exactly 8 studs across (X) and 4 studs high (Y).
  1. Rename the part SignBoard.

Create the Surface GUI

Now let’s create a surface GUI as a direct child of the signboard part.

  1. In the Explorer window, hover over the SignBoard object and click the circle ⊕ button.
  1. Select SurfaceGui from the popup menu. This creates an empty surface GUI space on the front surface of the part.

Add a Text Label

Just like when you create a new ScreenGui space on the screen, a new SurfaceGui starts out as a blank canvas that spans one full surface of the part (front, top, back, left, etc.).

Many things can be added to a surface GUI, but we’ll start with a basic text label. In the Explorer window, find the new SurfaceGui object and insert a TextLabel into it.

This will add a plain text label to the front surface of the part.

Set the Canvas Size

As noted earlier, a surface GUI takes up one full surface of a part. In this example, it’s located on the front surface of the part which is the default for all new surface GUIs.

Depending on which surface of the part the GUI is placed on, it’s smart to set the canvas size to the same proportions. Since the part is 8 studs across and 4 studs high, the front surface (outlined in yellow) is also 8 studs across and 4 studs high.

A good starting point is to set the canvas width and height to 100 times the surface’s stud length in each direction.

  1. In the Explorer window, make sure the SurfaceGui object is still selected.
  1. In the Properties window, expand the CanvasSize values.
  1. Change the Y value to 400 since the surface is 4 studs high (the X value can remain at 800 since the surface is 8 studs across).

Great! You won’t see a big difference in the text label’s appearance, but setting a canvas size that’s proportional to the surface size gives you a consistent space for designing GUIs.

Customize the Label

Now let’s change the text label properties so the text label is centered and fills most of the front surface. If you need to review text label properties, please see the articles/Intro to GUIs guide.

  1. Click on the text label in the Explorer if it’s not already selected.
  2. In the Properties window, find the AnchorPoint properties. Set both X and Y to 0.5 so that the anchor is centered.
  1. Change BackgroundColor3 to your favorite color.
  2. Set BorderSizePixel to 0 to remove the label’s border.
  3. For Position, set both XScale and YScale to 0.5. This will center the label within the bounds of the surface GUI.
  1. In the Size section, set XOffset to 750 and YOffset to 350. Because you set the canvas size to 800×400 (X×Y), the text label will now take up almost the entire canvas.
  1. Now get creative with other text properties for the label. For example, change the Font, Text, TextColor3, TextSize, TextWrapped, and more to make a really professional signboard!

Light Influence

Normally, the GUI space will share the same amount of light as the surface it’s on — if that surface is in the dark or covered by shadow, text or images that you put inside the GUI will also be in the dark.

To change how much a GUI is affected by its surface light, adjust the LightInfluence property. The normal value is 1, meaning the GUI space will be lit just like what’s around it. If you set it to 0, images inside will appear just as light (or dark) 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.

Surface GUI with normal light influence of 1.
Same GUI with a lower light influence of 0.1.

Now you understand the basics of surface GUIs, a great way to show players information and even articles/Interactive Surface GUI|create interactive objects in your game!

Tags:
  • gui
  • building