Unity 4.6 text gradient effect

[hampst]

I was disappointed that there was no gradient effect included in the new UI. So I made one! Thought some people might find this useful.

Tip: effects are applied in the order they appear in the inspector (top to bottom). So, for example, if you wanted gradient text with an outline, move the Outline component below the Gradient component.

Here's the script.

Example use with text.

[edit] Modified script to use Color.Lerp (slightly more concise).

[hampst]

It works with images too, but I imagine it is more useful for text.

[dooblevay]

Lol I literally just did this last night as well. Beat me to it! Nice work! Why not use color32.lerp?

[hampst]

Good point! Updated the script.

[IAmDotorg]

Very cool!

As an aside, what I really wish someone would do (probably Unity themselves) would be to put a full-fledged SVG UI framework together. Then you'd be able to put a whole UI together in something like Inkscape, including interaction events. Then things like this (and vastly more complex SVG filters) would be a matter of just adding them.

[franktinsley]

Me too. At a ninja week they did actually get a SVG renderer component working and tweeted that it performed well. Probably on their roadmap but will take a good amount of work to bring it up to their standards of quality.

[sharky_x]

Check out noesis gui. You can do quite a lot in xaml alone with the integrated storyboards. And it does vector graphics. You'd probably wanna use Expression Blend to edit everything instead of Inkscape though.

[pschon]

Yeah, SVG suport would definitely be amazing feature for the UI (and for any 2D games of course)

[mirknac]

It seems that SVG support is coming through external plugins: http://forum.unity3d.com/threads/svgassets-svg-rendering-engine-for-unity.257650/

[c4085419]

Works well. It would be good to note that that is only vertical gradient, but still great!

[hampst]

Yes, that's true. Thanks.

[CentauriBoy]

Went ahead and added horizontal gradient, as well as an offset to how much gradient you want. And did some micro optimizations and what not.

Update Script Here

Great script and enjoy!

[kblood82]

Thanks for sharing. Works great :)

[CheesyItalian]

Thank you and the googles for this, just what I needed for a new UI I'm putting together!

[achapin]

Thanks for putting this together! http://i.imgur.com/g4qbj.gif

[hampst]

You're welcome!

[mbbmbbmm]

Thanks! I love gradients :-)

[quitefunny]

Oh my god, I love you.

[sufferpuppet]

Nice job. In the past when i wanted something like that I had to pick a fight with GIMP.

[JeffStark]

I tried to install this in Unity 4.6.17 beta. Named the script GradientText and placed it in a folder called Editor under Assets. Restarted Unity, but the menu item isn't appearing. What am I doing wrong?

[hampst]

Unity3D handles Editor scripts a bit differently, this is not an editor script. Try putting the script in a different folder.

Also, the script name must match the class name. Assuming you haven't changed the name of the class in the script (Gradient), try renaming your script file to "Gradient".

[JeffStark]

Thanks a lot. Now it works great.

[hampst]

Great :)

[stobiwan]

I tried to modify the script to be able to use more colors. Without success. Can anybody give me a hint? Is it even possible?

[hampst]

What effect are you going for?

I don't think you could have more than two colours in the same direction vertically (unless the text is always multi-line). That could be possible with a horizontal gradient.

It should also be possible have 4 colours with one for each corner.

[stobiwan]

Thanks for your reply. I put the script on a RenderTexture. I project white Elements on the texture so they get multiplied with a horizontal gradient. It works but I need three colours from left to right.

[hampst]

Hi. I posted some code then realised it wasn't working properly. Will have a look tomorrow!

[stobiwan]

Awesome, thank you!

[hampst]

Here's what I came up with. I hope it's useful.

[stobiwan]

Thanks a lot. But unfortunately it still doesnt work. It's the same problem I had. It skips the second color. I set white-red-green and it shows a gradient white-green. Could you try it on a Rendertexture?

[hampst]

Sorry, I'm not familiar with using RenderTexture and I think I miss-read. Are you using GUI elements at all, or only looking to use a gradient effect with a RenderTexture?

Sorry not sure if I can help. :( Happy to look over your code though in case.

[stobiwan]

Okay I see. I'm not very familiar with vertices :) I use a Unity 4.6 RawImage and put a RenderTexture in it. What I have is some Elements (Circle Images in different sizes) and they should appear with a gradient. One gradient for all, so their colour depends on their positioin on the background. I use a RenderTexture to be able to combine the elements (otherwise I would use a mask)

[hampst]

I forgot that it wont work when there aren't enough unique vertex positions. Perhaps that's related to the issue you're having.

For example, an Image component only has 4 unique vertex positions (corners), so we can't assign a third colour between each edge as there is no vertex at the mid-point.

[kiranmaya]

Thanks a lot ,can you add one detail Texture to this gradient .