> For the complete documentation index, see [llms.txt](https://docs.overdare.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overdare.com/manual/studio-manual/gui.md). # GUI ## Overview GUI refers to graphical elements within the game that allow interaction with players. Using GUI, you can add various elements such as buttons, text, images, and progress bars to the game screen. ## GUI Types

Object	Description
ScreenGui	An object used to display 2D-based elements on the screen. 2D objects such as Frame, TextButton, ImageButton, etc., must be children of Gui objects such as ScreenGui/SurfaceGui objects to be rendered. ScreenGui itself does not display any information.
SurfaceGui	An object used to display 2D UI in a 3D space. Attaches GUI elements to in-game surfaces or objects for interactive purposes.
BillboardGui	BillboardGui is an object that displays 2D UI in 3D space, always facing the camera. Because it constantly rotates to align with the player's view, it's commonly used for elements like name tags, health bars, and dialogue boxes.
Frame	A 2D object used for designing layouts or grouping elements such as TextLabel, TextButton, ImageLabel, ImageButton.
ScrollingFrame	A 2D-based object that provides a scrollable layout. It enables all contained objects to be displayed on screen through scrolling functionality.
TextLabel	An object that displays text.
ImageLabel	An object that displays images.
TextButton	A button that displays text.
ImageButton	A button that displays images.
TextBox	An object that lets players type text.
UIAspectRatioConstraint	Provides the functionality to set the aspect ratio of 2D-based objects. If you want to set the aspect ratio for objects like Frame, ImageLabel, ImageButton, or TextButton, you can add a UIAspectRatioConstraint as a child and adjust the ratio. The ratio will be maintained based on the current size of the parent object.
UIListLayout	An object that arranges child objects within a parent object in a list format, evenly spaced.
UIGridLayout	An object that arranges child objects within a parent in a grid format, using consistent sizes and spacing.
UIStroke	An object that displays a stroke along the border of its parent UI object or around its text. You can configure properties such as the stroke color, thickness, transparency, position, and corner join style to emphasize UI elements or improve their visibility.
ProgressBar	An object that visually displays the current progress or value. It can be used to create horizontal, vertical, circular, and semicircular gauges, with the fill ratio set through the `Value` property.

## ScreenGui Properties

Property	Description
Enabled	Determines whether all child objects of the ScreenGui are displayed on the screen.
DisplayOrder	Determines which ScreenGui will be displayed on top of the screen. Higher value indicates higher priority, making the ScreenGui appear above others.
ScreenInsets	Sets the screen safe area used as the reference when placing descendant UI elements. None: Uses the entire screen without applying a safe area DeviceSafeInsets: Excludes the device's display-restricted areas, such as a notch CoreUISafeInsets: Excludes the device's display-restricted areas and the system UI area TopbarSafeInsets: Takes the top bar area into account
IgnoreGuiInset	Sets whether to ignore the system UI area and place elements based on the entire screen. It is linked with ScreenInsets.
ClipToDeviceSafeArea	Sets whether to clip descendant UI elements that extend outside the safe area.
SafeAreaCompatibility	Sets whether to extend the background of fullscreen UI placed inside the safe area to the edges of the screen. None: Does not extend FullscreenExtension: When ScreenInsets is not None, extends a background the size of the entire screen to the edges of the screen
ResetOnSpawn	Sets whether to recreate the ScreenGui in its initial state when the player's character respawns.
TabKeyboardNavigation	Sets whether the buttons in the ScreenGui can receive keyboard focus.

## SurfaceGui Properties

Property	Description
Enabled	Determines whether all child objects of the SurfaceGui are displayed on the screen.
Always on Top	Ensures that the SurfaceGui is always rendered on top of other 3D objects.
Light Influence	Controls how much the SurfaceGui is affected by lighting.
Max Distance	Sets the maximum distance at which the SurfaceGui remains visible to the player.
Active	Determines whether UI elements within the SurfaceGui, such as buttons and text boxes, can process clicks, touches, or keyboard input.
Adornee	Specifies the object on which the SurfaceGui is rendered.
Face	Determines which face of the part the GUI is displayed on.
Pixels Per Unit	Sets the number of UI pixels to use per 1 unit (cm) of the attached face. The larger the value, the smaller a UI element of the same pixel size is displayed on the face.

## BillboardGui Properties

Property	Description
Enabled	Controls whether all objects parented to a BillboardGui are visible on the screen.
Always on Top	Sets the BillboardGui to always render on top of other 3D objects.
Light Influence	Specifies how much the BillboardGui is affected by lighting.
Brightness	Sets the brightness applied to the BillboardGui. Higher values make it appear brighter, which is useful for visual emphasis without interaction with 3D lighting. (This can be set only when Light Influence is less than 1.)
Max Distance	Sets the maximum distance at which the BillboardGui remains visible to the player.
Distance Lower Limit	Sets the distance at which the BillboardGui stops scaling up when it gets too close to the player's camera.
Distance Upper Limit	Sets the distance at which the BillboardGui stops scaling down when it gets too far from the player's camera.
Active	Determines whether UI elements within the BillboardGui, such as buttons and text boxes, can process clicks, touches, or keyboard input.
Adornee	Specifies the object on which the BillboardGui is rendered.
Clips Descendants	Specifies whether child UI elements are clipped when they extend beyond the boundaries of the parent GUI. If true, any elements outside the boundaries will not be visible.
Size	Sets the size of BillboardGui.
Position Offset	Sets the offset from rendering object based on camera.
Position Offset World Space	Sets the offset from rendering object based on target object.
Extents Offset World Space	Sets the offset from the rendered object in world coordinates. (The value's unit is based on half the size of the model) Adjusts the position of the BillboardGui based on the target's size (Extents). This is useful for naturally placing UI elements such as health bars above characters, as the position automatically adapts to different model sizes. The offset is applied along the target's axes (the parent Part or Adornee) by multiplying the input value (Vector3) with half of the bounding box length (Extents) on each axis.
Size Offset	Sets the offset from rendering object based on screen plane.
Offset	Sets the offset from the object being rendered, based on the camera. If specified together with Position Offset, the values are added together.
Offset World Space	Sets the offset from the object being rendered, based on the world coordinate axes. The direction does not change even when the target object rotates.
Extents Offset	Adjusts the position of the BillboardGui based on the camera, where half the length of each axis of the target's bounding box is 1.
Distance Step	Sets the interval at which the current distance to the camera (CurrentDistance) is updated. If 0, it is updated whenever the distance changes.

## Gui Element Properties ### Common Properties

Property	Description
Position	Defines the position of the object on the screen. It uses the UDim2 format, where you can input ScaleX, OffsetX, ScaleY, and OffsetY in order. Scale: A ratio between 0.0 and 1.0, where 0.1 represents 10%. Offset: Set in pixels, where 10 represents 10 pixels. The Scale and Offset values are combined to determine the on-screen position. For example, if ScaleX is 0.25 and OffsetX is 10, the object will move 25% to the right from the Anchor Point (the center point of the Frame) and an additional 10 pixels to the right.
Rotation	Adjusts the rotation angle of the object, where 360.0 represents 360 degrees.
Size	Defines the size of the object. Uses the UDim2 format similar to Position.
Visible	Determines whether the object is visible or hidden.
Anchor Point	Defines the object's anchor point. It uses a Vector2 format, and the default (0.0, 0.0) sets the top-left corner as the anchor point.
ZIndex	Determines the stacking order of UI elements. If FrameA is obscured by FrameB, you can use the ZIndex value to ensure FrameA appears above FrameB.
Clips Descendants	Clips Descendants: This property determines whether to display the clipped area on the screen if a child UI element clips its parent's UI area.
Automatic Size	Sets the axis along which the size is automatically increased to fit the size of the text or child UI elements. The Size value is kept as the minimum size. None: No automatic adjustment X: Automatic adjustment of the width Y: Automatic adjustment of the height XY: Automatic adjustment of both the width and the height
Border Size Pixel	Defines the thickness of the border in pixels. The former name, Border Pixel Size, also works as the same property.
Border Mode	A property that determines how the border is displayed relative to the UI element's edge. You can set it to Inset (inside), Middle (center), or Outline (outside).
Border Color 3	Sets the color of the border.

### Frame

Property	Description
Background Color 3	Sets the background color of the frame.
Background Trnasparency	Adjusts the background transparency of the frame.

### TextLabel

Property	Description
Text	Allows you to input the text to be displayed.
Text Scaled	Automatically adjusts the text size to fit the object's size, ignoring the Text Size value.
Font Face	Specifies the font applied to the displayed text. Clicking the field displays the list of available fonts, and Style and Weight are provided as sub-fields. Style : Specifies whether the text is displayed in bold or italic Weight : Specifies the thickness of the text
Text Size	Defines the size of the displayed text in pixels.
Text Color 3	Sets the color of the displayed text.
Text Transparency	Adjusts the transparency of the displayed text.
Background Color 3	Sets the background color.
Background Transparency	Adjusts the background transparency.
Rich Text	Sets whether to interpret formatting tags included in Text and apply formatting such as boldness or color to parts of the text.
Line Height	Sets the line spacing scale of multi-line text.
Max Visible Graphemes	Sets how many characters of the text to display from the beginning. If -1, the entire text is displayed.
Text Truncate	Sets how to shorten the text when it exceeds the area. None: Does not shorten AtEnd: Cuts off by word and displays an ellipsis (...) SplitWord: Cuts off even in the middle of a word and displays an ellipsis (...)
Text Direction	Sets the reading direction of the text. Auto: Determined automatically LeftToRight: Left to right RightToLeft: Right to left
Text Stroke Color 3	Sets the color of the text stroke.
Text Stroke Transparency	Sets the transparency of the text stroke. If 1, the stroke is not visible.

### ImageLabel

Property	Description
Image	Sets the AssetId of the image to be displayed. You can use the AssetId of an image registered in the Asset Manager or Asset Store.
Image Transparency	Adjusts the transparency of the image.
Scale Type	Specifies how the image is scaled when the size of the UI element differs from the original image. Stretch : Stretches the image to fit the element. Slice : Divides the image into nine regions for scaling. Tile : Repeats the image in tiles of the TileSize size. Fit : Fits the entire image inside the element while keeping its original aspect ratio. Crop : Fills the element while keeping its original aspect ratio, and cuts off the parts outside.
Slice Center	Specifies the boundaries of the nine regions when ScaleType is Slice. The value is a pixel coordinate based on the top-left corner of the image, entered as four fields X0, Y0, X1, and Y1.
Slice Scale	Specifies the scale factor applied to the edges when ScaleType is Slice.
Background Color 3	Sets the background color.
Background Transparency	Adjusts the background transparency.
Image Rect Offset	Sets, in pixels, the top-left starting position of the area to display from the original image.
Image Rect Size	Sets, in pixels, the size of the area to display from the original image.
Resample Mode	Sets the interpolation method used when the image is displayed at a size different from the original. Default: Smoothly interpolates Pixelated: Keeps pixel boundaries as they are
Tile Size	Sets the size of a single tile to be displayed repeatedly when Scale Type is Tile.

### TextButton

Property	Description
Text	Allows you to input the text to be displayed.
Text Scaled	Automatically adjusts the text size to fit the object's size, ignoring the Text Size value.
Font Face	Specifies the font applied to the displayed text. Clicking the field displays the list of available fonts, and Style and Weight are provided as sub-fields. Style : Specifies whether the text is displayed in bold or italic Weight : Specifies the thickness of the text
Text Size	Defines the size of the displayed text in pixels.
Text Color 3	Sets the color of the displayed text.
Text Transparency	Adjusts the transparency of the displayed text.
Background Color 3	Sets the background color.
Background Transparency	Adjusts the background transparency.
Rich Text	Sets whether to interpret formatting tags included in Text and apply formatting such as boldness or color to parts of the text.
Line Height	Sets the line spacing scale of multi-line text.
Max Visible Graphemes	Sets how many characters of the text to display from the beginning. If -1, the entire text is displayed.
Text Truncate	Sets how to shorten the text when it exceeds the area. None: Does not shorten AtEnd: Cuts off by word and displays an ellipsis (...) SplitWord: Cuts off even in the middle of a word and displays an ellipsis (...)
Text Direction	Sets the reading direction of the text. Auto: Determined automatically LeftToRight: Left to right RightToLeft: Right to left
Text Stroke Color 3	Sets the color of the text stroke.
Text Stroke Transparency	Sets the transparency of the text stroke. If 1, the stroke is not visible.
Auto Button Color	Sets whether to automatically change the background color when the mouse hovers over or presses the button, to indicate the input state.
Style	Sets the basic shape to apply to the button. Custom uses the background properties as they are.
Modal	Sets whether to display the mouse cursor.
Selected	Sets the selection (keyboard focus) state of the button.

### ImageButton

Property	Description
Image	Sets the AssetId of the image to be displayed. You can use the AssetId of an image registered in the Asset Manager or Asset Store.
Image Transparency	Adjusts the transparency of the image.
Scale Type	Specifies how the image is scaled when the size of the UI element differs from the original image. Stretch : Stretches the image to fit the element. Slice : Divides the image into nine regions for scaling. Tile : Repeats the image in tiles of the TileSize size. Fit : Fits the entire image inside the element while keeping its original aspect ratio. Crop : Fills the element while keeping its original aspect ratio, and cuts off the parts outside.
Slice Center	Specifies the boundaries of the nine regions when ScaleType is Slice. The value is a pixel coordinate based on the top-left corner of the image, entered as four fields X0, Y0, X1, and Y1.
Slice Scale	Specifies the scale factor applied to the edges when ScaleType is Slice.
Background Color 3	Sets the background color.
Background Transparency	Adjusts the background transparency.
Image Rect Offset	Sets, in pixels, the top-left starting position of the area to display from the original image.
Image Rect Size	Sets, in pixels, the size of the area to display from the original image.
Resample Mode	Sets the interpolation method used when the image is displayed at a size different from the original. Default: Smoothly interpolates Pixelated: Keeps pixel boundaries as they are
Tile Size	Sets the size of a single tile to be displayed repeatedly when Scale Type is Tile.
Pressed Image	Sets the AssetId of the image to display while the button is being pressed.
Auto Button Color	Sets whether to automatically change the background color when the mouse hovers over or presses the button, to indicate the input state.
Style	Sets the basic shape to apply to the button. Custom uses the background properties as they are.
Modal	Sets whether to display the mouse cursor.
Selected	Sets the selection (keyboard focus) state of the button.

### TextBox

Property	Description
Text	Sets the text displayed in the TextBox. The text entered by the player is also stored in this value.
Placeholder Text	Sets the guide text displayed instead when Text is empty.
Placeholder Color 3	Sets the color of the guide text.
Clear Text On Focus	Sets whether the existing text is cleared when the TextBox is clicked to start input.
Multi Line	Sets whether line breaks can be entered with the Enter key.
Text Editable	Sets whether the player can enter or delete text.
Text Scaled	Sets whether the text size is automatically adjusted to fit the object's Size instead of the Text Size value.
Font Face	Specifies the font applied to the text and guide text. Clicking the field displays the list of available fonts, and Style and Weight are provided as sub-fields. Style: Specifies whether the text is displayed in bold or italic Weight: Specifies the thickness of the text
Text Size	Sets the size of the text in pixels.
Text Color 3	Sets the color of the entered text.
Text Transparency	Sets the transparency of the text and guide text.
Background Color 3	Sets the background color.
Background Transparency	Sets the background transparency.
Line Height	Sets the line spacing scale of multi-line text.

### UIAspectRatioConstraint When the size of an ImageLabel is set to { 0.5, 0, 0.5, 0 }, or 50% of the client device’s size on both the X and Y axes, adding a UIAspectRatioConstraint as a child and setting its Aspect Ratio property to 1.0 ensures the ImageLabel maintains a 1:1 ratio. This prevents the image from stretching horizontally or vertically.

Property	Description
Aspect Ratio	Sets the desired ratio of the parent object. The default value is 1.0, where the X and Y axes maintain a 1:1 ratio.
Aspect Type	Determines how the UI element maintains its aspect ratio. FitWithinMaxSize : The UI element maintains its ratio while shrinking within the maximum size ScaleWithParentSize : The UI element adjusts its ratio based on the parent's size SizeRelativeXY : Maintains relative size in both the X and Y directions
Dominant Axis	Determines which axis to prioritize when maintaining the ratio as the UI size changes. Width : Adjusts the height based on the width. Height : Adjusts the width based on the height.

Property

Description

Aspect Ratio

Sets the desired ratio of the parent object. The default value is 1.0, where the X and Y axes maintain a 1:1 ratio.

Aspect Type

Determines how the UI element maintains its aspect ratio.

FitWithinMaxSize : The UI element maintains its ratio while shrinking within the maximum size
ScaleWithParentSize : The UI element adjusts its ratio based on the parent's size
SizeRelativeXY : Maintains relative size in both the X and Y directions

Dominant Axis

Determines which axis to prioritize when maintaining the ratio as the UI size changes.

Width : Adjusts the height based on the width.
Height : Adjusts the width based on the height.

### ScrollingFrame

Property	Description
AutomaticCanvasSize	Determines whether to automatically adjust the CanvasSize based on the size of child objects. None: No automatic adjustment X: Automatic adjustment in the horizontal direction Y: Automatic adjustment in the vertical direction XY: Automatic adjustment in both horizontal and vertical directions
CanvasSize	This property sets the size of the scrollable inner area.
CanvasPosition	This property allows manual setting or checking of the scroll position.
ScrollBarImageColor3	This property sets the image color of the scrollbar.
ScrollBarImageTransparency	This property sets the image transparency of the scrollbar.
ScrollBarThickness	This property sets the width of the scrollbar in pixels.
ScrollingDirection	This property sets the scroll direction. X: Horizontal scroll Y: Vertical scroll XY: Both horizontal and vertical scroll
ScrollingEnabled	This property enables or disables the scrolling function.
ScrollRate	Sets the scale of the scroll amount.
SmoothScroll	Sets whether to keep scrolling smoothly with inertia even after the scroll input is released.
ElasticBehavior	Sets the condition for using the elastic effect, in which the content goes past the scroll boundary and springs back. WhenScrollable: Used only when there is scrollable content Always: Always used Never: Not used
VerticalScrollBarPosition	Sets the display position of the vertical scroll bar. Left: Left side Right: Right side
HorizontalScrollBarInset / VerticalScrollBarInset	Sets the condition for applying the scroll bar thickness as an inset of the content area. None: Not applied ScrollBar: Applied only when the scroll bar is displayed Always: Always applied
TopImage / MidImage / BottomImage	Sets the AssetId of the images to display at the top end, middle, and bottom end of the scroll bar.

### UIListLayout

Property	Description
Padding	Specifies the spacing between UI elements.
Wraps	This property determines whether to automatically wrap to the next line.
FillDirection	Specifies the direction in which UI elements are arranged. Horizontal: Arranged horizontally Vertical: Arranged vertically
SortOrder	Specifies the way UI elements are sorted. LayoutOrder: Sorts by LayoutOrder value for each instance Name: Sorts by name
HorizontalAlignment	Specifies the horizontal alignment. Left: Align left Center: Center Right: Align right
VerticalAlignment	Specifies the vertical alignment. Top: Top align Center: Center Bottom: Bottom align
HorizontalFlex / VerticalFlex	Specifies how the horizontal or vertical space remaining after child UI elements are placed is distributed. None: Not distributed Fill: Increases the size of child elements to fill the space SpaceBetween: Places the elements at both ends against the edges and divides the spacing between them equally SpaceAround: Places space of the same size on both sides of each element SpaceEvenly: Divides the spacing at both ends and between elements all equally
ItemLineAlignment	Specifies how child UI elements within a line are aligned along the axis perpendicular to the arrangement direction. Automatic: Determined automatically based on the Flex settings and alignment properties Start: Aligns to the start Center: Aligns to the center End: Aligns to the end Stretch: Stretches to fit the size of the line

### UIGridLayout

Property	Description
CellPadding	Specifies the spacing between cells.
CellSize	Specifies the size of a cell.
FillDirectionMaxCells	Specifies the maximum number of cells to be filled in the specified direction.
FillDirection	Specifies the direction in which UI elements are arranged. Horizontal: Arranged horizontally Vertical: Arranged vertically
SortOrder	Specifies the way UI elements are sorted. LayoutOrder: Sorts by LayoutOrder value for each instance Name: Sorts by name
HorizontalAlignment	Specifies the horizontal alignment. Left: Align left Center: Center Right: Align right
VerticalAlignment	Specifies the vertical alignment. Top: Top align Center: Center Bottom: Bottom align
StartCorner	Specifies the corner where the first cell is placed. TopLeft: Top left TopRight: Top right BottomLeft: Bottom left BottomRight: Bottom right

### UIStroke

Property	Description
ApplyStrokeMode	Determines how the stroke is applied. Border: Displays the stroke along the border of the parent UI object. Contextual: Displays the stroke according to the type of the parent UI object.
BorderOffset	Determines the horizontal and vertical offset of the stroke from the border of the parent UI object.
BorderStrokePosition	Determines where the stroke is displayed relative to the border of the parent UI object. Inner: Displays the stroke inside the border. Center: Displays the stroke centered on the border. Outer: Displays the stroke outside the border.
Color	Determines the color of the stroke.
LineJoinMode	Determines how stroke segments are joined at corners. Round: Joins corners with a rounded shape. Bevel: Joins corners with a beveled shape. Miter: Joins corners with a pointed shape.
StrokeSizingMode	Determines how the stroke thickness is calculated when the size of the UI object changes. FixedSize: Maintains a constant thickness regardless of the UI object’s size. ScaledSize: Adjusts the thickness in proportion to the UI object’s size.
Thickness	Determines the thickness of the stroke. A higher value displays a thicker stroke.
Transparency	Determines the transparency of the stroke. A value closer to `0` makes the stroke more opaque, while a value closer to `1` makes it more transparent.
ZIndex	Determines the display priority of the stroke when it overlaps other UI objects. A higher value displays the stroke in front of objects with lower values.

## 9-Slice Editor {% columns %} {% column width="50%" %}

{% endcolumn %} {% column width="50%" %}

{% endcolumn %} {% endcolumns %} 9-Slice is a feature that divides a single image into nine regions so that the corners and edges are not stretched even when the size of the UI element changes. It can be used with Image Label and Image Button, and is applied identically not only to ScreenGui but also to GUIs in 3D space such as BillboardGui and SurfaceGui. ### How to Use

1. Add an Image Label or Image Button and enter the Asset Id of the image to display in the Image property. 2. Set Scale Type to Slice. When set to Slice, the Slice Center and Slice Scale properties are displayed. 3. Specify the boundaries of the nine regions with Slice Center. You can enter the value directly in the Properties window, or specify it in the 9-Slice editor by clicking the ··· button in the Slice Center field. 4. Adjust the scale factor of the edges with Slice Scale as needed. ## ProgressBar

Property	Description
Value	Sets the ratio of the filled area. Values range from `0` to `1`, where `0` represents an empty state and `1` represents a fully filled state.
FillDirection	Sets the direction in which the filled area expands according to the `Value`. Supports horizontal, vertical, center-expanding, circular, and semicircular gauges.
StartAngle	Sets the starting angle of the filled area for circular or semicircular ProgressBars. The value ranges from `0` to `360` degrees.
ArcSize	Sets the arc range of a circular or semicircular ProgressBar. A value of `360` represents a circle, while a value of `180` or less can be used to represent a semicircle.
TrackImage	Sets the AssetId of the image displayed in the background area of the ProgressBar.
TrackTransparency	Sets the transparency of the background area. Values closer to `0` appear more opaque, while values closer to `1` appear more transparent.
TrackColor3	Sets the color of the background area.
TrackCornerRadius	Sets the corner radius of the background area. This property can be used with linear fill modes; higher values produce more rounded corners.
FillImage	Sets the AssetId of the image displayed in the filled area of the ProgressBar.
FillTransparency	Sets the transparency of the filled area. Values closer to `0` appear more opaque, while values closer to `1` appear more transparent.
FillColor3	Sets the color of the filled area.
FillCornerRadius	Sets the corner radius of the filled area. This property can be used with linear fill modes; higher values produce more rounded corners on the filled area.
CornerClipEnabled	Sets the fill behavior of a linear ProgressBar with rounded corners. When set to `true`, the filled area is simply clipped. When set to `false`, the corner radius is preserved while the area is filled.