Unity-UI-Extensions.GitHub.io

Gradient2

Apply vertex colours in a gradient on any UI object

Gradient 2 Example

1 Overview

2 Properties

3 Methods

4 Usage

5 Video Demo

6 See also

7 Credits and Donation

8 External links

Overview

Apply vertex colours in a gradient on any graphic UI object

Properties

The properties of the Gradient2 control are as follows:

Property	Description
Gradient Type	The Type of Gradient to be used: Horizontal / Vertical / Radial (inside to outside) / Diamond
Blend Mode	How should the gradient apply: Override / Add / Multiply
Modify Vertices	Change the vertices of the image to apply the gradient
OffSet	How much of the gradient should be applied, allows for grading in the gradient (all inception like)
Zoom	Zoom in to the effect Gradient at the specified offset
Effect Gradient	A gradient scale using the Unity Gradient tool which allows setting of multiple gradients

Usage

To enable the Gradient component, simply add the component to a UI Graphic Object using: Add Component -> UI -> Extensions -> Effects -> Gradient2

Note The control works based on the base vertices of the UI object it is applied to. If the object only has 4 vertices (a Quad like the base image) it can only project values between 0 & 1, meaning mid values on the gradient can’t take effect. To improve the gradient on a GO, the base object will need enough vertices to apply the gradient, a quad is not sufficient. May look to add a control to the project to improve the resolution of a base image / quad to add more vertices in the future.