You can quickly create high-quality graphical user interfaces with minimal scripting requirements using built-in GUI elements and their containers.
Containers
Container objects such as frames hold and display UI elements. Depending on where you create it, UI renders either on-screen or within an experience's 3D world.
Frames
Frames act as containers for other GuiObjects, such as TextLabels or TextButtons. When you manipulate frames, you also manipulate the objects they contain.
On-Screen UI
On-screen UI container objects, such as StarterGuis, ScreenGuis, and PlayerGuis, GuiObjects that you want to display on a user's screen.
In-Experience UI
In-experience UI container objects, such as SurfaceGuis and BillboardGuis, hold GuiObjects that you want to display within an experience's 3D world.
Elements
Most UI elements are GuiObjects, 2D graphical user interface objects that you can parent to containers. The four most common GuiObjects are frames, labels, buttons, and text input objects.
Using the Position, Size, AnchorPoint, and ZIndex properties, you have complete control on how to position, size, and order GuiObjects. You can also use tweening to transition a GuiObject smoothly from one state to another and provide dynamic visual feedback.
Labels
Labels allow you to display customizable text and images.
Buttons and Text Input
Button objects, such as TextButtons or ImageButtons, allow a user to perform an action, while TextBox objects allow a user to input text. You can customize these objects to provide context and prompts for what you want a user to do.
Proximity Prompts
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.
Layout and Design
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.
9-Slice Design
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.
Rich Text Markup
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 TextLabel, TextButton, and TextBox objects.
Chat
Bubble Chat
The built-in bubble chat system enables the display of customizable chat bubbles above avatars and NPCs. Key features include:
- Animated transitions for improved engagement.
- Numerous customization options, including bubble duration, text and background color, the distance in which bubbles minimize or hide, and much more.
- Ability to define unique bubble styles per-user or NPC.