| title | description |
|---|---|
UI |
User interfaces are graphical elements in your experience that users interact with. |
You can quickly create high-quality graphical user interfaces with minimal scripting requirements using built-in UI objects. Depending on where you create it, UI renders either on-screen or within an experience's 3D world.
On-screen containers hold UI objects that you want to display on a user's screen. All on-screen UI objects and code are stored and changed on the client.
In-experience containers such as Class.SurfaceGui|SurfaceGuis and Class.BillboardGui|BillboardGuis hold UI objects that you want to display within your experience's 3D world.
Most UI elements are Class.GuiObject|GuiObjects, 2D graphical user interface objects that you can parent to containers. The four most common are frames, labels, buttons, and text input objects.
Using the Class.GuiObject.Position|Position, Class.GuiObject.Size|Size, Class.GuiObject.AnchorPoint|AnchorPoint, and Class.GuiObject.ZIndex|ZIndex properties, you have complete control on how to position, size, and layer Class.GuiObject|GuiObjects. You can also use tweening to transition a Class.GuiObject smoothly from one state to another and provide dynamic visual feedback.
Frames act as containers for other Class.GuiObject|GuiObjects such as Labels or Buttons. When you manipulate frames, you also manipulate the objects they contain.
Labels allow you to display customizable text and images.
Button objects allow users to prompt an action while Text Input objects allow users to input text. You can customize these objects to provide context and prompts for what you want a user to do.
Proximity Prompts are unique built-in UI objects which prompt user interaction to trigger an action when they approach in-experience objects such as doors, light switches, and buttons.
Drag Detectors encourage physical interaction with objects in an experience, such as opening doors and drawers, sliding a part around, grabbing and tossing a bowling ball, pulling back and firing a slingshot, and much more.
Beyond basic properties for adjusting position and size, Roblox also provides layouts, constraints, and appearance objects for further refining your UI. You can also animate UI through smoothly transitioning between property values.
Under the 9-slice design approach, you can divide a single Roblox image asset into nine sub-images, each with different scaling rules. This allows you to create UI elements of varying sizes without distorting the borders or corners.
UI rich text utilizes simple markup tags to style sections of a string in bold, italics, underline, fill color, stroke variations, and more. You can apply styling tags to Class.TextLabel, Class.TextButton, and Class.TextBox objects.
