Surface UI (In World UI)
The SurfaceGUI asset allows you to create custom UI within the world. This doc goes over how to set up the In-World Surface UI in Roblox.
In-World UI, in this case known as Surface UI, is great for offering information in the world such as leaderboards, text, and button interactions. In-world UI is also a preferred approach to UI for VR experiences as it increases immersion in comparison to Screen based UI.
Adding a Part with SurfaceGUI
Create a Part in the world to put your UI onto.
The size of the part is the size of the UI.
You can set the Part‘s translucency to 1 to make it invisible.
Go down to the ‘StarterGui’ folder and add a ‘SurfaceGui’ part
To add the ‘SurfaceGui’ element …
Press the '+' next to the ‘StarterGUI’ asset to add elements.
Type in ‘surface’ to help find it.
Rename it as you see fit. eg.’GameMenuUI’
On the ‘SurfaceGui’ asset, make sure of the following :
Click on ‘Adornee’ and select your target UI part in world
eg. The ’GameMenuUI’ asset
Adjust the 'Face' parameter to make sure the UI appears on the desired side. The SurfaceGUI will be outlined in blue, if you add a UI element this might be easier to see.
Make sure that :
‘Active’ is On.
‘Enabled’ is On.
‘AlwaysOnTop’ is On. This is important when using interactive elements like Buttons.
Text Scale
As the maximum size of text is 100, it is a good idea to scale your SurfaceGUI Sizing. This scale will affect everything within the SurfaceGUI settings. It's better to have it set correctly at the start otherwise you may need to adjust all of your layout settings later.
Go down to Sizing / PixelsPerStud and reduce the number so text elements are bigger.
Note that if the text gets too big the quality may be reduced, so balance scale to text quality as needed.
Last updated