I want to develop a little tool to help visualize fireworks before using them in a show in Unity where the user can set several parameters and gets a preview of the firework effect in a preview window. To allow the user to customize color over time like I can currently statically do in the visual effects graph, I wanted to add a Gradient input field to my UI.

After fiddling around with manually trying to make things work, I stumbled upon the new UIElements / UI Toolkit and following this Medium post was able to render a simple text UI in a Panel Renderer. However the Gradient Field I added won't show up (which is quite reasonable because in the UI Builder it said something about "Editor only").

Just to make sure, the box on the left is what I mean:

Screenshot showing a sample editor window with a gradient input, the HDR Gradient Editor and HDR Color Selector

I was strolling around in the Asset Store for a while but couldn't find anything like what I was looking for (just shaders and stuff to apply a gradient to UI elements amongst other things). Other searches led to tutorials on how to completely custom build a single color selection tool which both seemed like a larger effort and didn't allow creating a full gradient.

The question is: Is there some sort of library, package or tool I could use to add an input like that to my "game"? Or am I taking a completely wrong approach with this?

  • \$\begingroup\$ It looks to me like you'll have to re-implement this functionality in your game code, if it's not part of the Unity runtime but solely in the editor. \$\endgroup\$
    – DMGregory
    Aug 23 '20 at 15:29

It turns out that I am utterly bad at googling things! While "unity gradient input" and several attempts at going at it from UIElements and UI Toolkit didn't yield result, a brainfart reminded me that the thing you select a color in is called a color picker and look at that, there actually is an implementation of both a color and gradient picker available for free in the Easy Color & Gradient Picker.

It comes with a handy PDF telling you how to set up things and while intensity is not part of the input, building the gradient comes very close to the editor built in controls:

Screenshot of the gradient picker implemented by the Easy Color & Gradient picker


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.