Runtime gradient editor UI

UI UGUI
1

Is there a way to add the gradient editor to a UI canvas, so that the user can change the gradient while playing? I have read How to have a gradient editor in an editor script? , but I want to do that at runtime.

I have a project that colors objects dynamically based on a Gradient. The gradient is set / made while in the editor. I can even change between two gradients at runtime. But I’d like to pop up the editor in the UI and have the user pick their own gradient.

Thanks

2

This task will not be easy, I guess.
As long you don’t have a gradient shader you can go another way:
Create a class and inherit it from UnityEngine.UI.Graphic. Then override the “OnPopulateMesh(VertexHelper vh)” method and create quads inside of it according to your gradient control points. There you can colorize the vertices.

Here is the code of the Graphics class to display a unicolored rectangle (reverse engineered):

   protected virtual void OnPopulateMesh(VertexHelper vh)
        {
            Rect pixelAdjustedRect = this.GetPixelAdjustedRect();
            Vector4 vector4 = new Vector4(pixelAdjustedRect.get_x(), pixelAdjustedRect.get_y(), pixelAdjustedRect.get_x() + pixelAdjustedRect.get_width(), pixelAdjustedRect.get_y() + pixelAdjustedRect.get_height());
            Color32 color32 = this.color;
            vh.Clear();
            vh.AddVert(new Vector3(vector4.x, vector4.y), color32, new Vector2(0f, 0f));
            vh.AddVert(new Vector3(vector4.x, vector4.w), color32, new Vector2(0f, 1f));
            vh.AddVert(new Vector3(vector4.z, vector4.w), color32, new Vector2(1f, 1f));
            vh.AddVert(new Vector3(vector4.z, vector4.y), color32, new Vector2(1f, 0f));
            vh.AddTriangle(0, 1, 2);
            vh.AddTriangle(2, 3, 0);
        }

It is up to you now to modify this code for your purpose.

1 Like
3

Would be that just a simple gradient between two nodes, start and end, or an advanced one allowing to put intermediate nodes?
There are some color picker assets on the asset store, you could use them for setting the node colors.
Why not to generate a gradient texture dynamically, with given colors in node points and calculated colors between the nodes?

But stop, stop, stop !!!
Why to reinvent the wheel, when you have it already on the AssetStore?