hakowork/rojo
3
0
Fork 0
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-10-25 04:54:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

update rules

Browse source
This commit is contained in:
Joe 2026-02-02 14:05:11 -06:00
parent 4c390fdd37
commit d5522b2fef
8549 changed files with 11783 additions and 1888 deletions
Download patch file Download diff file Expand all files Collapse all files

101
.cursor/rules/roblox/ui/index.md
View file

@ -1,101 +0,0 @@
---
title: User interface
description: Explore the wide variety of user interface elements that players can interact with.
---
You can quickly create high-quality graphical user interfaces with minimal scripting requirements using built-in [UI objects](#ui-objects). Depending on where you create it, UI renders either [on-screen](#on-screen-ui) or [within an experience's 3D world](#in-experience-ui).
## On-screen UI
[On-screen containers](../ui/on-screen-containers.md) hold UI objects that you want to display on a player's screen, including [frames](../ui/frames.md), [labels](../ui/labels.md), [buttons](../ui/buttons.md), and more. All on-screen UI objects and code are stored and changed on the client.
<figure>
<img src="../assets/ui/ui-objects/ScreenGui-Example.jpg" width="840" alt="Example ScreenGui with various GuiObject children, including a Frame, TextLabel, TextBox, and ImageButton." />
</figure>
## In-experience UI
[In-experience containers](../ui/in-experience-containers.md) such as `Class.SurfaceGui|SurfaceGuis` and `Class.BillboardGui|BillboardGuis` hold UI objects that you want to display within your experience's 3D world.
<video src="../assets/ui/in-experience/Showcase.mp4" controls width="100%"></video>
## UI objects
Most UI elements are `Class.GuiObject|GuiObjects`, 2D graphical user interface objects that you can parent to containers. The four most common are [frames](../ui/frames.md), [labels](../ui/labels.md), [buttons](../ui/buttons.md), and [text input](../ui/text-input.md) objects.
<img src="../assets/ui/ui-objects/ScreenGui-Example.jpg" width="840" />
<table>
<thead>
<tr>
<th>Object</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>[Frame](../ui/frames.md)</td>
<td>`Class.Frame|Frames` act as containers for other UI objects. When you manipulate frames, you also manipulate the objects they contain.</td>
</tr>
<tr>
<td>[Label](../ui/labels.md)</td>
<td>`Class.TextLabel` and `Class.ImageLabel` objects allow you to display customizable text and images.</td>
</tr>
<tr>
<td>[Button](../ui/buttons.md)</td>
<td>`Class.TextButton` and `Class.ImageButton` objects allow users to prompt an action.</td>
</tr>
<tr>
<td>[Text&nbsp;Input](../ui/text-input.md)</td>
<td>`Class.TextBox` objects allow users to input text.</td>
</tr>
</tbody>
</table>
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](../ui/position-and-size.md#position), [size](../ui/position-and-size.md#size), and [layer](../ui/position-and-size.md#zindex) `Class.GuiObject|GuiObjects`. You can also use [tweening](../ui/animation.md) to transition a `Class.GuiObject` smoothly from one state to another and provide dynamic visual feedback.
## Layout and design
Beyond basic properties for adjusting position and size, Roblox also provides layout structures like [list/flex](../ui/list-flex-layouts.md) and [grid](../ui/grid-table-layouts.md), as well as [size modifiers](../ui/size-modifiers.md) and [appearance modifiers](../ui/appearance-modifiers.md).
<figure>
<img src="../assets/ui/ui-objects/UIListLayout-Example.png" width="840" />
<figcaption>`Class.UIListLayout` for horizontal or vertical item sequences</figcaption>
</figure>
<GridContainer numColumns="2">
<figure>
<img src="../assets/ui/ui-objects/UIStroke-Color-Solid.png" />
<figcaption>`Class.UIStroke` on `Class.TextLabel`</figcaption>
</figure>
<figure>
<img src="../assets/ui/ui-objects/UIStroke-Color-Gradient.png" />
<figcaption>`Class.UIStroke` with `Class.UIGradient`</figcaption>
</figure>
</GridContainer>
## Universal styling
[Universal styling](./styling/index.md) is a Roblox solution to stylesheets, similar to CSS, that lets you declare and globally apply overrides to UI instance properties. This engine‑level support is the foundation for the [Style&nbsp;Editor](./styling/editor.md) and the end‑to‑end token pipeline.
## Interactive frameworks
In addition to the core [user interface objects](#ui-objects), the following frameworks provide built‑in and customizable interactivity for your experiences.
### Proximity prompts
[Proximity prompts](../ui/proximity-prompts.md) 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.
<video src="../assets/ui/proximity-prompt/Showcase.mp4" controls width="80%" alt="Proximity prompts used in a variety of implementations in the 3D world"></video>
### UI drag detectors
[UI drag detectors](../ui/ui-drag-detectors.md) facilitate and encourage interaction with 2D user interface elements such as sliders, spinners, and more.
<video src="../assets/ui/ui-drag-detectors/Showcase.mp4" controls width="80%" alt="How to add UI Drag Detectors and Drag in Edit Mode"></video>
### 3D drag detectors
[3D drag detectors](../ui/3D-drag-detectors.md) encourage physical interaction with 3D 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.
<video src="../assets/ui/3D-drag-detectors/Showcase.mp4" controls width="80%" alt="Drag detectors used in a variety of implementations in the 3D world"></video>