UGTK / Toolkit / Ui Module / Gradient System Completed

Gradient System

Summary

Two Unity UI components that paint a Gradient across a RectTransform: AdvancedGradientGraphic draws the gradient as its own mesh (no sprite needed), while AdvancedGradientImageOverlay tints the mesh of an existing Image. Both support angle, percent range, repeat/outside modes, invert and optional gamma compensation.

Modules Dependencies

This module has no hard UGTK dependencies. It only uses Unity UI (MaskableGraphic, BaseMeshEffect).

Setup

Drop the GradientImage prefab under a Canvas — a UI object already painted by the gradient:

How To Use

Standalone gradient (no sprite) — add AdvancedGradientGraphic (menu UI/Advanced Gradient Graphic (No Sprite)) to a UI GameObject. It renders a quad filling the RectTransform, colored by the gradient.

Overlay on an Image — add AdvancedGradientImageOverlay (menu UI/Effects/Advanced Gradient Overlay (Image)) next to an Image (it RequireComponent(typeof(Image))); it recolors the Image mesh vertices via ModifyMesh.

Shared inspector fields on both: - gradient: the Gradient sampled per vertex (defaults to white→black). - angle (0–360): gradient direction. - repeatMode: Clamp, Repeat, Mirror for sampling outside 0–1. - fromPercent / toPercent (0–1): remap interval of the gradient. - outsideMode: Transparent (alpha 0 outside the interval) or ClampToEdge. - invert: swaps the from/to mapping. - gammaCompensation: applies a pow(1/2.2) correction for Gamma color space.

AdvancedGradientGraphic exposes runtime setters: SetGradient(Gradient), SetAngle(float), SetRange(float from01, float to01). Color is computed per vertex by projecting the normalized UV onto the angle direction, remapping into the from/to interval, applying the repeat/outside rules, then multiplying by the graphic tint. An Editor/AdvancedGradientEditor.cs custom inspector is provided.

Good to know:

Pick one of the two, not both. AdvancedGradientGraphic is the graphic (it builds its own quad, no sprite); AdvancedGradientImageOverlay only recolors the mesh an Image already produced. Stacking them on one object gives you a gradient over a gradient.
The overlay is limited by the Image's vertex count. A Simple sprite is 4 vertices, so the colour is interpolated between the four corners: a multi-stop gradient, a steep angle or a narrow from/to range will look approximated. Use Sliced/Tiled (more vertices) or switch to AdvancedGradientGraphic when the result must be exact.
gammaCompensation only matters in Gamma colour space. In Linear leave it off, or the gradient comes out washed.
outsideMode = Transparent writes alpha 0, so the object is still there and still a raycast target even where nothing is drawn.

Testing Scene

Open Debug/AdvanceGradientScene.unity: the two components sit side by side with different angles, ranges and repeat modes.

Technical Info

AdvancedGradientGraphic: MaskableGraphic that builds a single gradient-colored quad in OnPopulateMesh; exposes SetGradient/SetAngle/SetRange.
AdvancedGradientImageOverlay: BaseMeshEffect (requires Image) that recolors the existing mesh vertices in ModifyMesh using the same gradient sampling logic.