Skip to main content

Blog Archive

Put a GUI on That Surface!

December 13, 2013

by maxvee


In mid-November, we released GUI rotation, which allows you to rotate a GUI for such purposes as a clock or compass, among other things. Now, we’ve taken GUI functionality one step further with the release of SurfaceGUIs, which give you the ability to place a GUI on the surface of a part. This is a small piece of functionality with big potential, as it opens up the possibility of creating interactive vehicle dashboards, virtual computers, and elevator buttons, and better 3D integration of menus and important player information.

SurfaceGUI exampleTo use SurfaceGUIs, we recommend you first create your GUI as a standard ScreenGUI object in ROBLOX Studio. Once it’s created, you add a new SurfaceGUI object to the part on which you want to project the ScreenGUI. This can be accomplished by selecting the part and double-clicking the new SurfaceGUI object (View > Basic Objects). Finally, you add the components of your ScreenGUI to the SurfaceGUI by nesting them beneath the SurfaceGUI object. The SurfaceGUI will then appear on the part.

We recommend you nest all your GUI components within a Frame. This makes it easy for you to move the entire GUI layout between ScreenGUI and SurfaceGUI with a single click and drag.

You can set the size of your SurfaceGUI by selecting it in the Explorer and modifying its CanvasSize property (View > Properties). The CanvasSize is essentially the size of your virtual screen, in ‘virtual pixels’, which makes SurfaceGUIs pixel-to-pixel compatible with ScreenGUIs position- and dimension-wise.


Another property worth considering is Adornee. This functions like the Adornee property of a BillboardGUI. Basically, this property – which can only be set via script – allows you to break the parent/child link between a part and a SurfaceGUI.

The placement of SurfaceGUI in the Data Model hierarchy is very important to its state replication behavior and adheres to the standard rules. If it’s under Workspace, then the state of the SG object and its children is shared across all players. Basically, all players will be able to see the same SurfaceGUI object with the same state of GUI elements (e.g. an elevator with floor buttons and current floor indicator). However, if you want to create SurfaceGUIs that are per-player (imagine a quest terminal in an RPG, that gives out quests based on player’s individual progress along the questline), you can do that too by placing your SurfaceGUI outside Workspace, such as into the StarterGUI section. And it’s the Adornee property that lets you specify the part on which the SurfaceGUI should display without making it a child. That’s how we support both modes of operation.

Make it RAINSince this is new functionality, it remains to be seen how developers harness it. However, we did come across one early (and somewhat humorous) sample: Archaic0’s Make It RAIN! machine. There are SurfaceGUIs projected on three parts, and two of them are interactive buttons that prompt players to purchase a donation. We also came across a demo video of juzzbyXfalcon experimenting with SurfaceGUIs in Studio.

Of course, using SurfaceGUIs requires that you know how to make GUIs in the first place. For more background on creating GUIs, we recommend you reference these ROBLOX Wiki entries:

Only one SurfaceGUI per part side. If you add another on the same side, one (random) will not be receiving input until you re-assign it elsewhere. Terms and conditions apply. No liability. Unspecified/undocumented behavior is subject to change without notice.