gradient sprites - solution

[Timmy_h]

Hi, there are a couple of threads already on this subject however I have a solution for anyone, and I hope will be integrated into NGUI for all perhaps, and any changes welcome for integration   

History : I was looking at this site : https://www.grabient.com/

And thought code driven gradients will be cool and so had a look at the forums to see if there were any already given solutions, turned up none. So off I went.

I have changed the inspector to have a foldout for using the gradients making the UI simpler if not using gradients.

The results for a white sprite is this image : https://ibb.co/naOtMa

Code :

UIBasicSprite :


remove lines 51,52

1.         [HideInInspector][SerializeField] protected Color mGradientTop = Color.white;
2.         [HideInInspector][SerializeField] protected Color mGradientBottom = new Color(0.7f, 0.7f, 0.7f);

replace with :

1.     [HideInInspector] [SerializeField] protected Color mGradientLeftTop = Color.white;
2.     [HideInInspector] [SerializeField] protected Color mGradientRightTop = Color.white;
3.         [HideInInspector][SerializeField] protected Color mGradientLeftBottom = new Color(0.7f, 0.7f, 0.7f);
4.         [HideInInspector][SerializeField] protected Color mGradientRightBottom = new Color(0.7f, 0.7f, 0.7f);

Then at 480 delete all in AddVertexColours and add this in.

1.   if (mType == Type.Simple)
2.         {
3.             if (y == 1 && x == 1) //Left-Bottom
4.             {
5.                 cols.Add(color * mGradientLeftBottom);
6.             }
7.             else if (y == 2 && x == 1) //Left-Top
8.             {
9.                 cols.Add(color * mGradientLeftTop);
10.             }
11.             else if (y == 2 && x == 2)  //Right-Top
12.             {
13.                 cols.Add(color * mGradientRightTop);
14.             }
15.             else if (y == 1 && x == 2) //Right-Bottom
16.             {
17.                 cols.Add(color * mGradientRightBottom);
18.             }
19.         }
20.         else if(mType == Type.Sliced)
21.         {
22.             if (y <= 1 && x <= 1 ) //left bottom
23.             {
24.                 cols.Add(color * mGradientLeftBottom);
25.             }
26.             else if(y >= 2 && x <= 1) //left top
27.             {
28.                 cols.Add(color * mGradientLeftTop);
29.             }
30.             else if (y <= 1 && x >= 2)  //right bottom
31.             {
32.                 cols.Add(color * mGradientRightBottom);
33.             }
34.             else if (y >= 2 && x >= 2) // right Top
35.             {
36.                 cols.Add(color * mGradientRightTop);
37.             }
38.             else
39.             {
40.                 cols.Add(color * Color.cyan); //error
41.             }
42.         }
43.         else
44.         {
45.             if (y == 0 || y == 1)
46.             {
47.                 cols.Add(color * mGradientRightBottom);
48.             }
49.             else if (y == 2 || y == 3)
50.             {
51.                 cols.Add(color * mGradientLeftBottom);
52.             }
53.         }

So now all you have to do is change the custom inspector for the sprite.

image of inspector : https://ibb.co/eL0F1a

In UIBasicSpriteEditor

Remove all from line 79 -> 95 and replace with  :

1.   SerializedProperty grdientProp = serializedObject.FindProperty("mApplyGradient");
2.             if (grdientProp != null)
3.             {
4.                 GUILayout.BeginHorizontal();
5.                 grdientProp.boolValue = EditorGUILayout.Foldout(grdientProp.boolValue, "Gradient");
6.                
7.                 GUILayout.EndHorizontal();
8.                 if (grdientProp.boolValue)
9.                 {
10.                     GUILayout.BeginHorizontal();
11.                     GUILayout.Space(79f);
12.                     NGUIEditorTools.SetLabelWidth(90f);
13.                     serializedObject.DrawProperty("mGradientLeftTop", "Top Left", GUILayout.MinWidth(40f));
14.                     GUILayout.EndHorizontal();
15.  
16.                     GUILayout.BeginHorizontal();
17.                     NGUIEditorTools.SetLabelWidth(90f);
18.                     GUILayout.Space(79f);
19.                     serializedObject.DrawProperty("mGradientRightTop", "Top Right", GUILayout.MinWidth(40f));
20.                     NGUIEditorTools.SetLabelWidth(80f);
21.                     GUILayout.EndHorizontal();
22.  
23.                     GUILayout.BeginHorizontal();
24.                     NGUIEditorTools.SetLabelWidth(90f);
25.                     GUILayout.Space(79f);
26.                     serializedObject.DrawProperty("mGradientLeftBottom", "Bottom Left", GUILayout.MinWidth(40f));
27.                     NGUIEditorTools.SetLabelWidth(80f);
28.                     GUILayout.EndHorizontal();
29.  
30.                     GUILayout.BeginHorizontal();
31.                     NGUIEditorTools.SetLabelWidth(90f);
32.                     GUILayout.Space(79f);
33.                     serializedObject.DrawProperty("mGradientRightBottom", "Bottom Right", GUILayout.MinWidth(40f));
34.                     NGUIEditorTools.SetLabelWidth(80f);
35.                     GUILayout.EndHorizontal();
36.  
37.                 }

I've only spent a couple of hours on this, I'm sure there are bits that could be improved, please let me know.

Thanks.

[Timmy_h]

Just seen in UISprite that there are getter/setter for the old two gradients these need to be modified for accessing one of the current now cornered gradient colors, i.e. : mGradientRightTop, should add other ones too for completeness.

[ArenMook]

I'd rather not add even more properties to sprites to be honest. If you really want a custom gradient, you can create a class inheriting the UISprite / UITexture and change its OnFill function accordingly. There's no need to change NGUI itself and add more overhead to all widgets, considering in 99.99% cases it's not going to be used.

[Timmy_h]

Finally had time for work on this again.  I cant work out how to do as you say however could you make AddVertexColours a virtual protected method, then I can just override the calling of the colors like the attached files.

GradientSprite.CS

 

1.  using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class GradientSprite : UISprite {
6.  
7.     [HideInInspector] [SerializeField] protected Color mGradientLeftTop = Color.white;
8.     [HideInInspector] [SerializeField] protected Color mGradientRightTop = Color.white;
9.     [HideInInspector] [SerializeField] protected Color mGradientLeftBottom = new Color(0.7f, 0.7f, 0.7f);
10.     [HideInInspector] [SerializeField] protected Color mGradientRightBottom = new Color(0.7f, 0.7f, 0.7f);
11.  
12.     protected override void AddVertexColours(List<Color> cols, ref Color color, int x, int y)
13.     {
14.  
15.         if (mType == Type.Simple)
16.         {
17.             if (y == 1 && x == 1) //Left-Bottom
18.             {
19.                 cols.Add(color * mGradientLeftBottom);
20.             }
21.             else if (y == 2 && x == 1) //Left-Top
22.             {
23.                 cols.Add(color * mGradientLeftTop);
24.             }
25.             else if (y == 2 && x == 2)  //Right-Top
26.             {
27.                 cols.Add(color * mGradientRightTop);
28.             }
29.             else if (y == 1 && x == 2) //Right-Bottom
30.             {
31.                 cols.Add(color * mGradientRightBottom);
32.             }
33.         }
34.         else if (mType == Type.Sliced)
35.         {
36.             if (y <= 1 && x <= 1) //left bottom
37.             {
38.                 cols.Add(color * mGradientLeftBottom);
39.             }
40.             else if (y >= 2 && x <= 1) //left top
41.             {
42.                 cols.Add(color * mGradientLeftTop);
43.             }
44.             else if (y <= 1 && x >= 2)  //right bottom
45.             {
46.                 cols.Add(color * mGradientRightBottom);
47.             }
48.             else if (y >= 2 && x >= 2) // right Top
49.             {
50.                 cols.Add(color * mGradientRightTop);
51.             }
52.             else
53.             {
54.                 cols.Add(color * Color.cyan); //error
55.             }
56.         }
57.         else
58.         {
59.             if (y == 0 || y == 1)
60.             {
61.                 cols.Add(color * mGradientRightBottom);
62.             }
63.             else if (y == 2 || y == 3)
64.             {
65.                 cols.Add(color * mGradientLeftBottom);
66.             }
67.         }
68.     }
69. }
70.  

GradientSpriteEditor.cs

1. using UnityEditor;
2. using UnityEngine;
3.  
4. [CanEditMultipleObjects]
5. [CustomEditor(typeof(GradientSprite), true)]
6. public class GradientSpriteEditor : UISpriteInspector
7. {
8.     protected override void DrawCustomProperties()
9.     {
10.         base.DrawCustomProperties();
11.  
12.         SerializedProperty grdientProp = serializedObject.FindProperty("mApplyGradient");
13.         if (grdientProp != null)
14.         {
15.             GUILayout.BeginHorizontal();
16.             grdientProp.boolValue = EditorGUILayout.Foldout(grdientProp.boolValue, "Gradient");
17.  
18.             GUILayout.EndHorizontal();
19.             if (grdientProp.boolValue)
20.             {
21.                 GUILayout.BeginHorizontal();
22.                 GUILayout.Space(79f);
23.                 NGUIEditorTools.SetLabelWidth(90f);
24.                 serializedObject.DrawProperty("mGradientLeftTop", "Top Left", GUILayout.MinWidth(40f));
25.                 GUILayout.EndHorizontal();
26.  
27.                 GUILayout.BeginHorizontal();
28.                 NGUIEditorTools.SetLabelWidth(90f);
29.                 GUILayout.Space(79f);
30.                 serializedObject.DrawProperty("mGradientRightTop", "Top Right", GUILayout.MinWidth(40f));
31.                 NGUIEditorTools.SetLabelWidth(80f);
32.                 GUILayout.EndHorizontal();
33.  
34.                 GUILayout.BeginHorizontal();
35.                 NGUIEditorTools.SetLabelWidth(90f);
36.                 GUILayout.Space(79f);
37.                 serializedObject.DrawProperty("mGradientLeftBottom", "Bottom Left", GUILayout.MinWidth(40f));
38.                 NGUIEditorTools.SetLabelWidth(80f);
39.                 GUILayout.EndHorizontal();
40.  
41.                 GUILayout.BeginHorizontal();
42.                 NGUIEditorTools.SetLabelWidth(90f);
43.                 GUILayout.Space(79f);
44.                 serializedObject.DrawProperty("mGradientRightBottom", "Bottom Right", GUILayout.MinWidth(40f));
45.                 NGUIEditorTools.SetLabelWidth(80f);
46.                 GUILayout.EndHorizontal();
47.  
48.             }
49.         }
50.     }
51. }
52.  

or if you could point me in the right direction on how to actually do this with inheriting from the UISprite that would be great.

[ArenMook]

Well, my suggestion was overwriting the OnFill function -- it's the function that handles filling the draw buffers... but if you want to just edit the AddVertexColors, making it virtual seems like a simple choice too.