Author Topic: gradient sprites - solution  (Read 158 times)

Timmy_h

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 2
    • View Profile
gradient sprites - solution
« on: August 11, 2017, 09:00:14 AM »
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

  • Newbie
  • *
  • Thank You
  • -Given: 0
  • -Receive: 0
  • Posts: 2
    • View Profile
Re: gradient sprites - solution
« Reply #1 on: August 11, 2017, 09:09:22 AM »
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

  • Administrator
  • Hero Member
  • *****
  • Thank You
  • -Given: 316
  • -Receive: 1149
  • Posts: 22,027
  • Toronto, Canada
    • View Profile
Re: gradient sprites - solution
« Reply #2 on: August 12, 2017, 12:36:20 PM »
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.