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. Show Creating a Basic Surface GUIIn 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 BoardBefore 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.
For this demo, it's important that the block is 8 studs across and 4 studs high (this will be explained more in a bit). To check and set the size exactly, view the Properties window and expand the Part → Size tree.
Create the Surface GUINow let’s create a surface GUI as a direct child of the signboard part.
Add a Text LabelJust 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.
Depending on your camera view, you might be looking at the back surface of the part, not the front surface where the GUI is located. If you don't see the label, move your camera around to the other side. Set the Canvas SizeAs 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.
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 LabelNow 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.
Light InfluenceNormally, 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! |