16 KiB
| title | description |
|---|---|
| UI appearance modifiers | Explains how to use appearance modifiers to customize basic user interface objects. |
By utilizing appearance modifiers, you can further customize the appearance of your Class.GuiObject|GuiObjects.
- Apply a gradient to the background of an object.
- Apply a stroke to text or a border.
- Set rounded corners for an object.
- Increase padding between the borders of an object.
Gradient
The Class.UIGradient object applies a color and transparency gradient to its parent Class.GuiObject.
You can configure the gradient by:
- Setting its colors through a
Datatype.ColorSequencein the gradient'sClass.UIGradient.Color|Colorproperty. - Setting its transparency through a
Datatype.NumberSequencein the gradient'sClass.UIGradient.Transparency|Transparencyproperty. - Choosing the gradient's starting point (inside or outside the parent's bounds) through the
Class.UIGradient.Offset|Offsetproperty. - Choosing the gradient's angle through the
Class.UIGradient.Rotation|Rotationproperty.
Color sequence
To set a gradient's color sequence:
-
In the Explorer window, select the
Class.UIGradient. -
In the Properties window, click inside the
Class.UIGradient.Color|Colorproperty field, then click the ⋯ button to the right of the input box. A color sequence pop-up displays.
Each triangle on the bottom axis of the color sequence is a keypoint that determines the color value at that point.
-
Click a keypoint in the color sequence, then click the small square next to Color to open the Colors pop-up window.
-
Select the desired color for the keypoint.
-
If needed, you can:
- Add another keypoint by clicking anywhere on the graph.
- Drag an existing keypoint to a new position, or select a keypoint and enter a specific time value through the Time input.
- Delete a keypoint by selecting it and clicking the Delete button.
- Reset the sequence by clicking the Reset button.
Transparency
To adjust a gradient's transparency across its range:
-
In the Explorer window, select the
Class.UIGradient. -
In the Properties window, click inside the
Class.UIGradient.Transparency|Transparencyproperty field, then click the ⋯ button to the right of the input box. A number sequence pop-up displays.
Each square across the number sequence graph is a keypoint that determines the transparency value at that point.
-
Click and drag any keypoint around, or select a keypoint and enter a specific time/value combination through the Time and Value inputs.
-
If needed, you can:
- Add another keypoint by clicking anywhere on the graph.
- Delete a keypoint by selecting it and clicking the Delete button.
- Reset the sequence by clicking the Reset button.
Offset and rotation
The Class.UIGradient.Offset|Offset and Class.UIGradient.Rotation|Rotation properties let you adjust the gradient's control points and its angle. As illustrated in the following diagrams, Class.UIGradient.Offset|Offset is based on a percentage of the parent's width or height, and both positive or negative values are valid.
Similarly, when you rotate the gradient, the control points also rotate:
Stroke
The Class.UIStroke instance applies an outline to text or a border. Key features include:
- Adjustable color and thickness of the stroke outline.
- Ability to set the stroke transparency independently of the parent's transparency.
- Customizable position and/or offset relative to the parent's border.
- Three corner styles (round, bevel, or miter).
- Stroke gradient support through the
Class.UIGradientinstance.
Thickness
You can set the stroke width through the Class.UIStroke.Thickness|Thickness property which is measured in pixels (default) or scaled relative to the parent, depending on the modifier's Class.UIStroke.StrokeSizingMode|StrokeSizingMode. If stroke is on text and Class.UIStroke.StrokeSizingMode|StrokeSizingMode is set to Enum.StrokeSizingMode.ScaledSize|ScaledSize, thickness is relative to the font size.
Color or gradient
You can set the stroke color through the Class.UIStroke.Color|Color property, as well as insert a child Class.UIGradient instance to create gradient strokes.
Text outline or border
Depending on its parent type, Class.UIStroke operates as either a text outline or as a border. When you parent Class.UIStroke to a text object like Class.TextLabel, it applies to the text's outline; when you parent Class.UIStroke to other Class.GuiObject|GuiObjects, it applies to the border.
When applied to a text object, you can override the default stroke behavior by the Class.UIStroke.ApplyStrokeMode|ApplyStrokeMode property, letting you apply the stroke to the object's bounds instead of the text itself. You can even control the text outline and border independently by parenting two Class.UIStroke instances to a text object, one set to Contextual and the other to Border.
Border position/offset
Class.UIStroke.BorderStrokePosition|BorderStrokePosition sets the stroke's position relative to its parent's border and Class.UIStroke.BorderOffset|BorderOffset lets you specify an additional offset to the stroke's position.
Transparency
The Class.UIStroke.Transparency|Transparency property sets the stroke transparency independently of the parent object's Class.GuiObject.BackgroundTransparency|BackgroundTransparency or Class.TextLabel.TextTransparency|TextTransparency. This allows you to render text and borders that are "hollow" (consisting of only an outline).
`Class.UIStroke.Transparency` = `0.5`
`Class.UIStroke.Transparency` = `0`
Corner style
The Class.UIStroke.LineJoinMode|LineJoinMode property lets you control how corners are interpreted. It accepts a value of either Enum.LineJoinMode.Round|Round, Enum.LineJoinMode.Bevel|Bevel, or Enum.LineJoinMode.Miter|Miter.
Layering
To layer multiple sibling Class.UIStroke instances on a Class.GuiObject from front to back, you can utilize the Class.UIStroke.ZIndex|ZIndex property. Those with a lower Class.UIStroke.ZIndex|ZIndex render under (behind) those with a higher Class.UIStroke.ZIndex|ZIndex.
Note that the rendering order for Class.UIStroke instances with the same Class.UIStroke.ZIndex|ZIndex is undefined. Do not apply multiple Class.UIStroke instances with the same index if their rendering order matters.
Corners
The Class.UICorner instance applies deformation to all four corners of its parent Class.GuiObject. You can control the applied radius through the Class.UICorner.CornerRadius|CornerRadius property using either Datatype.UDim.Scale|Scale or Datatype.UDim.Offset|Offset.
Datatype.UDim.Scale|Scale rounds the corners to a percentage based on the total length of the shortest edge of the parent, meaning that a scale of 0.5 or higher deforms the parent into a "pill" shape, regardless of its width or height. Datatype.UDim.Offset|Offset rounds the corners to a specific number of pixels, regardless of the width/height of the parent.
Padding
A Class.UIPadding object applies top, bottom, left, and/or right padding to the contents of the parent Class.GuiObject. For example, you can move the text inside a text label downward or upward by applying an offset to the modifier's Class.UIPadding.PaddingBottom|PaddingBottom property.
