Tasharen Entertainment Forum

Support => NGUI 3 Support => Topic started by: Timmy_h on August 11, 2017, 09:00:14 AM

Title: gradient sprites - solution
Post by: Timmy_h 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 (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 (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.


Title: Re: gradient sprites - solution
Post by: Timmy_h 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.

Title: Re: gradient sprites - solution
Post by: ArenMook 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.
Title: Re: gradient sprites - solution
Post by: Timmy_h on October 13, 2017, 06:58:49 AM
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.
Title: Re: gradient sprites - solution
Post by: ArenMook on October 19, 2017, 02:15:27 AM
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.