feat: add GradationMode.Diagonal with 4 colors

close #308

Author: mob-sakai

Packages/src/Editor/UIEffectEditor.cs

@@ -79,6 +79,8 @@ public class UIEffect2Editor : Editor
         private SerializedProperty _gradationMode;
         private SerializedProperty _gradationColor1;
         private SerializedProperty _gradationColor2;
+        private SerializedProperty _gradationColor3;
+        private SerializedProperty _gradationColor4;
         private SerializedProperty _gradationGradient;
         private SerializedProperty _gradationOffset;
         private SerializedProperty _gradationScale;
@@ -163,6 +165,8 @@ private void OnEnable()
             _gradationMode = serializedObject.FindProperty("m_GradationMode");
             _gradationColor1 = serializedObject.FindProperty("m_GradationColor1");
             _gradationColor2 = serializedObject.FindProperty("m_GradationColor2");
+            _gradationColor3 = serializedObject.FindProperty("m_GradationColor3");
+            _gradationColor4 = serializedObject.FindProperty("m_GradationColor4");
             _gradationGradient = serializedObject.FindProperty("m_GradationGradient");
             _gradationOffset = serializedObject.FindProperty("m_GradationOffset");
             _gradationScale = serializedObject.FindProperty("m_GradationScale");
@@ -340,22 +344,19 @@ public void DrawProperties()
                     case GradationMode.AngleGradient:
                         DrawGradientField(_gradationGradient);
                         break;
+                    case GradationMode.Diagonal:
+                        DrawColorPickerField("Top", _gradationColor1, _gradationColor2);
+                        DrawColorPickerField("Bottom", _gradationColor3, _gradationColor4);
+                        break;
                     default:
-                        DrawColorPickerField(_gradationColor1);
+                        DrawColorPickerField(EditorGUILayout.GetControlRect(), _gradationColor1, true);
                         var r = EditorGUILayout.GetControlRect();
                         r.width -= 24;
-                        r.height = EditorGUIUtility.singleLineHeight;
-                        DrawColorPickerField(r, _gradationColor2);
+                        DrawColorPickerField(r, _gradationColor2, true);
 
                         r.x += r.width + 4;
                         r.width = 20;
-                        // Swap colors
-                        if (GUI.Button(r, EditorGUIUtility.IconContent("preaudioloopoff"), "iconbutton"))
-                        {
-                            (_gradationColor1.colorValue, _gradationColor2.colorValue)
-                                = (_gradationColor2.colorValue, _gradationColor1.colorValue);
-                        }
-
+                        SwapColorsButton(r, _gradationColor1, _gradationColor2);
                         break;
                 }
 
@@ -405,17 +406,35 @@ public void DrawProperties()
             }
         }
 
-        private static void DrawColorPickerField(SerializedProperty color, bool showAlpha = true)
+        private static void DrawColorPickerField(string label, SerializedProperty color1, SerializedProperty color2)
         {
+            var labelWidth = EditorGUIUtility.labelWidth;
             var r = EditorGUILayout.GetControlRect();
-            r.height = EditorGUIUtility.singleLineHeight;
-            DrawColorPickerField(r, color, showAlpha);
+            r.width -= 24;
+            EditorGUI.PrefixLabel(new Rect(r.x, r.y, labelWidth, r.height), EditorGUIUtility.TrTempContent(label));
+
+            var indentLevel = EditorGUI.indentLevel;
+            EditorGUI.indentLevel = 0;
+            var rPos = new Rect(r.x + labelWidth, r.y, (r.width - labelWidth) / 2, r.height);
+            DrawColorPickerField(rPos, GUIContent.none, color1, true);
+
+            rPos.x += rPos.width;
+            DrawColorPickerField(rPos, GUIContent.none, color2, true);
+
+            // Swap colors button
+            SwapColorsButton(new Rect(r.x + r.width + 4, r.y, 20, 20), color1, color2);
+            EditorGUI.indentLevel = indentLevel;
         }
 
-        private static void DrawColorPickerField(Rect rect, SerializedProperty color, bool showAlpha = true)
+        private static void DrawColorPickerField(Rect rect, SerializedProperty color, bool showAlpha)
         {
             var label = EditorGUIUtility.TrTempContent(color.displayName);
             label.tooltip = color.tooltip;
+            DrawColorPickerField(rect, label, color, showAlpha);
+        }
+
+        private static void DrawColorPickerField(Rect rect, GUIContent label, SerializedProperty color, bool showAlpha)
+        {
             var hdr = UIEffectProjectSettings.useHdrColorPicker;
             EditorGUI.showMixedValue = color.hasMultipleDifferentValues;
 
@@ -430,8 +449,6 @@ private static void DrawColorPickerField(Rect rect, SerializedProperty color, bo
         private static void DrawGradientField(SerializedProperty gradient)
         {
             var r = EditorGUILayout.GetControlRect();
-            r.height = EditorGUIUtility.singleLineHeight;
-
             var label = EditorGUIUtility.TrTempContent(gradient.displayName);
             label.tooltip = gradient.tooltip;
             var hdr = UIEffectProjectSettings.useHdrColorPicker;
@@ -480,7 +497,7 @@ private static void DrawColor(SerializedProperty color, ColorFilter filter, Colo
                     color.colorValue = Color.white;
                 }
 
-                DrawColorPickerField(color, showAlpha);
+                DrawColorPickerField(EditorGUILayout.GetControlRect(), color, showAlpha);
             }
         }
 
@@ -502,6 +519,14 @@ private static void DrawColor(SerializedProperty filter, SerializedProperty colo
             EditorGUI.indentLevel--;
         }
 
+        private static void SwapColorsButton(Rect rect, SerializedProperty color1, SerializedProperty color2)
+        {
+            if (GUI.Button(rect, EditorGUIUtility.IconContent("preaudioloopoff"), "iconbutton"))
+            {
+                (color1.colorValue, color2.colorValue) = (color2.colorValue, color1.colorValue);
+            }
+        }
+
         private static bool DrawHeaderPopup(SerializedProperty sp)
         {
             var r = EditorGUILayout.GetControlRect();

Packages/src/Runtime/Enums.cs

@@ -94,16 +94,17 @@ public enum PatternArea
     public enum GradationMode
     {
         None = 0,
-        Horizontal,
-        HorizontalGradient,
-        Vertical,
-        VerticalGradient,
-        RadialFast,
-        RadialDetail,
-        DiagonalToRightBottom,
-        DiagonalToLeftBottom,
-        Angle,
-        AngleGradient
+        Horizontal = 1,
+        HorizontalGradient = 2,
+        Vertical = 3,
+        VerticalGradient = 4,
+        RadialFast = 5,
+        RadialDetail = 6,
+        Diagonal = 11,
+        DiagonalToRightBottom = 7,
+        DiagonalToLeftBottom = 8,
+        Angle = 9,
+        AngleGradient = 10
     }
 
     internal static class BlendTypeConverter

Packages/src/Runtime/UIEffect.cs

@@ -163,6 +163,12 @@ public class UIEffect : UIEffectBase
         [SerializeField]
         protected Color m_GradationColor2 = Color.white;
 
+        [SerializeField]
+        protected Color m_GradationColor3 = Color.white;
+
+        [SerializeField]
+        protected Color m_GradationColor4 = Color.white;
+
         [SerializeField]
         private Gradient m_GradationGradient = new Gradient();
 
@@ -854,6 +860,28 @@ public Color gradationColor2
             }
         }
 
+        public Color gradationColor3
+        {
+            get => m_GradationColor3;
+            set
+            {
+                if (m_GradationColor3 == value) return;
+                context.gradationColor3 = m_GradationColor3 = value;
+                SetVerticesDirty();
+            }
+        }
+
+        public Color gradationColor4
+        {
+            get => m_GradationColor4;
+            set
+            {
+                if (m_GradationColor4 == value) return;
+                context.gradationColor4 = m_GradationColor4 = value;
+                SetVerticesDirty();
+            }
+        }
+
         public float gradationOffset
         {
             get => m_GradationOffset;
@@ -1024,6 +1052,8 @@ protected override void UpdateContext(UIEffectContext c)
             c.gradationMode = m_GradationMode;
             c.gradationColor1 = m_GradationColor1;
             c.gradationColor2 = m_GradationColor2;
+            c.gradationColor3 = m_GradationColor3;
+            c.gradationColor4 = m_GradationColor4;
             c.gradationGradient = m_GradationGradient;
             c.gradationOffset = m_GradationOffset;
             c.gradationScale = m_GradationScale;
@@ -1168,8 +1198,11 @@ public void LoadPreset(UIEffect preset)
             m_GradationMode = preset.m_GradationMode;
             m_GradationColor1 = preset.m_GradationColor1;
             m_GradationColor2 = preset.m_GradationColor2;
+            m_GradationColor3 = preset.m_GradationColor3;
+            m_GradationColor4 = preset.m_GradationColor4;
             m_GradationGradient = new Gradient();
             m_GradationGradient.SetKeys(preset.m_GradationGradient.colorKeys, preset.m_GradationGradient.alphaKeys);
+            m_GradationGradient.mode = preset.m_GradationGradient.mode;
             m_GradationOffset = preset.m_GradationOffset;
             m_GradationScale = preset.m_GradationScale;
             m_GradationRotation = preset.m_GradationRotation;
@@ -1242,8 +1275,11 @@ internal void CopyFrom(UIEffectContext c)
             m_GradationMode = c.gradationMode;
             m_GradationColor1 = c.gradationColor1;
             m_GradationColor2 = c.gradationColor2;
+            m_GradationColor3 = c.gradationColor3;
+            m_GradationColor4 = c.gradationColor4;
             m_GradationGradient = new Gradient();
             m_GradationGradient.SetKeys(c.gradationGradient.colorKeys, c.gradationGradient.alphaKeys);
+            m_GradationGradient.mode = c.gradationGradient.mode;
             m_GradationOffset = c.gradationOffset;
             m_GradationScale = c.gradationScale;
             m_GradationRotation = c.gradationRotation;

Packages/src/Runtime/UIEffectContext.cs

@@ -222,6 +222,8 @@ public class UIEffectContext
         public GradationMode gradationMode;
         public Color gradationColor1;
         public Color gradationColor2;
+        public Color gradationColor3;
+        public Color gradationColor4;
         public Gradient gradationGradient;
         public float gradationOffset;
         public float gradationScale;
@@ -305,6 +307,8 @@ public void CopyFrom(UIEffectContext preset)
             gradationMode = preset.gradationMode;
             gradationColor1 = preset.gradationColor1;
             gradationColor2 = preset.gradationColor2;
+            gradationColor3 = preset.gradationColor3;
+            gradationColor4 = preset.gradationColor4;
             gradationGradient = preset.gradationGradient;
             gradationOffset = preset.gradationOffset;
             gradationScale = preset.gradationScale;
@@ -527,6 +531,9 @@ private void ApplyGradation(List<UIVertex> verts, Rect rect, Matrix4x4 m, bool c
                 case GradationMode.Vertical:
                     GradientUtil.DoVerticalGradient(verts, a, b, offset, scale, rect, m);
                     break;
+                case GradationMode.Diagonal:
+                    GradientUtil.DoDiagonal(verts, a, b, gradationColor3, gradationColor4, offset, scale, rect, m);
+                    break;
                 case GradationMode.DiagonalToRightBottom:
                     GradientUtil.DoDiagonalGradientToRightBottom(verts, a, b, offset, scale, rect, m);
                     break;

Packages/src/Runtime/Utilities/GradientUtil.cs

@@ -159,6 +159,21 @@ static Color Evaluate(Gradient gradient, Rect rect, float t, float offset, float
             }
         }
 
+        public static void DoDiagonal(List<UIVertex> verts, Color a, Color b, Color c, Color d, float offset,
+            float scale, Rect rect, Matrix4x4 m)
+        {
+            for (var i = 0; i < verts.Count; i++)
+            {
+                var vt = verts[i];
+                var x = Mathf.InverseLerp(rect.xMin, rect.xMax, m.MultiplyPoint3x4(vt.position).x);
+                var y = Mathf.InverseLerp(rect.yMin, rect.yMax, m.MultiplyPoint3x4(vt.position).y);
+                var tx = Mathf.Clamp01(offset + (x - 0.5f) * scale + 0.5f);
+                var ty = Mathf.Clamp01(offset + (0.5f - y) * scale + 0.5f);
+                vt.color *= Color.Lerp(Color.Lerp(a, b, tx), Color.Lerp(c, d, tx), ty);
+                verts[i] = vt;
+            }
+        }
+
         public static void DoDiagonalGradientToRightBottom(List<UIVertex> verts, Color a, Color b, float offset,
             float scale, Rect rect, Matrix4x4 m)
         {