What is UIGradient?
As a UIComponent, it blends color gradient to its parent GuiObject. Supported object including: TextLabel / TextButton / ImageLabel / ImageButton / Frame / ViewPortFrame. (ScrollingFrame and TextBox is temporarily excluded.)
- Gradient will be applied with multiplication of original color of GuiObject, i.e if you blend gradient with a black frame, the result will be black, while blending with a white frame will not alter the gradient color.
- Gradient will be applied to all the context of GuiObject, i.e parenting a gradient under a textlabel with background will make both the background and text blend with this gradient.
- Gradient will not recursively apply onto all the children of the hierarchy. It will only affect parent for now.
How do I use it?
You can enable the beta feature in studio:
To use the UIGradient, simply parent it onto the guiobject that you want it to take effect on.
There are currently 4 configurable properties affecting the appearance of gradient:
- Color (ColorSequence) : The sequence of Color3 of color gradient.
- Transparency (NumberSequence) : The sequence of Transparency of color gradient.
- Rotation (float) : Euler angle rotation of gradient with 0 indicates horizontal gradient starting from left to right.
- Offset (Vector2): Shift the center of gradient to the scale of parent.
Extra Tips For Advanced Users
There are some tips for devs that pay extra concerns for performance of your places across platforms.
- If you are animating gradient to achieve special effects, it is always more performant to preset trasparency sequence and color sequence, and animate gradient using rotation, offset and some extra help of original gui object color for color shifting. Reset the color sequence and transparency sequence every frame will add extra burden because of rebuilding the sequence of colors.
- Try to avoid using it on stroke text. Gradient will always try to blend with text strokes and frame borders, which might cause performance glitch if you are not paying attention.
- If you are just creating a static gradient background for a button, using a pre-made gradient texture would be better when it comes to performance. While we will improve our internal technique to make this comparable to using a plain texture in the future.
This feature is currently in beta release, which means the object can only be used in Studio. Hope we can collect useful feedback from you guys and release it for all soon.
How does the rotation and offset work? Why there is a scale get applied when rotating it?
Gradient is internally represented using control points which maps the color and number sequences along from start control point (time = 0) to end control point (time = 1). To guarantee colors get fully preserved when rotating the gradient, we make the control points always rotate on the edge of parent rectangle.
Here are the visualization for how control points moves when you are applying rotation and scale to it. (Red : Start, Blue : End)
When will this officially release to prod game?
Our currently planned official release date is early January around first week.
Gradient will be applied with “multiplication” of original color of GuiObject, what does this mean?
An example for the effect of parent colors: