From 9b495bbc6830c2f8f666adb1f620839ead0e4261 Mon Sep 17 00:00:00 2001 From: xxSeys1 Date: Thu, 13 Mar 2025 17:18:11 +0100 Subject: [PATCH 1/3] improve how ColorValueBoxes draw transparent colors --- Source/Editor/GUI/Input/ColorValueBox.cs | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/Source/Editor/GUI/Input/ColorValueBox.cs b/Source/Editor/GUI/Input/ColorValueBox.cs index 1531266e3..1416ccc58 100644 --- a/Source/Editor/GUI/Input/ColorValueBox.cs +++ b/Source/Editor/GUI/Input/ColorValueBox.cs @@ -129,11 +129,20 @@ namespace FlaxEditor.GUI.Input { base.Draw(); - var style = Style.Current; - var r = new Rectangle(0, 0, Width, Height); + bool isTransparent = _value.A < 1; - Render2D.FillRectangle(r, _value); - Render2D.DrawRectangle(r, IsMouseOver || IsNavFocused ? style.BackgroundSelected : Color.Black); + var style = Style.Current; + var fullRect = new Rectangle(0, 0, Width, Height); + var colorRect = new Rectangle(0, 0, isTransparent ? Width * 0.7f : Width, Height); + + if (isTransparent) + { + var alphaRect = new Rectangle(colorRect.Right, 0, Width - colorRect.Right, Height); + Render2D.FillRectangle(alphaRect, _value); + } + + Render2D.FillRectangle(colorRect, _value with { A = 1 }); + Render2D.DrawRectangle(fullRect, IsMouseOver || IsNavFocused ? style.BackgroundSelected : Color.Black); } /// From 051d3633588d5694cc88f6202e8ef2f0f406c642 Mon Sep 17 00:00:00 2001 From: xxSeys1 Date: Fri, 14 Mar 2025 15:51:36 +0100 Subject: [PATCH 2/3] add alpha grid background --- Source/Editor/EditorAssets.cs | 5 +++++ Source/Editor/GUI/Input/ColorValueBox.cs | 9 +++++++++ 2 files changed, 14 insertions(+) diff --git a/Source/Editor/EditorAssets.cs b/Source/Editor/EditorAssets.cs index bdfc7dfa6..d30ca91c0 100644 --- a/Source/Editor/EditorAssets.cs +++ b/Source/Editor/EditorAssets.cs @@ -134,6 +134,11 @@ namespace FlaxEditor /// public static string FlaxIconBlueTexture = "Engine/Textures/FlaxIconBlue"; + /// + /// The checkboard material used as a background for displaying transparent colors. + /// + public static string ColorAlphaBackgroundGrid = "Editor/AlphaBackgroundGrid"; + /// /// The icon lists used by editor from the SegMDL2 font. /// diff --git a/Source/Editor/GUI/Input/ColorValueBox.cs b/Source/Editor/GUI/Input/ColorValueBox.cs index 1416ccc58..1893c4124 100644 --- a/Source/Editor/GUI/Input/ColorValueBox.cs +++ b/Source/Editor/GUI/Input/ColorValueBox.cs @@ -14,7 +14,12 @@ namespace FlaxEditor.GUI.Input [HideInEditor] public class ColorValueBox : Control { + private const String ScaleParamName = "Scale"; + // 4.8 is a magic number that makes the grid fit perfect in the color value box + private const float GridScale = 4.8f; + private bool _isMouseDown; + private MaterialBase checkerMaterial; /// /// Delegate function used for the color picker events handling. @@ -101,6 +106,9 @@ namespace FlaxEditor.GUI.Input public ColorValueBox() : base(0, 0, 32, 18) { + checkerMaterial = FlaxEngine.Content.LoadAsyncInternal(EditorAssets.ColorAlphaBackgroundGrid); + checkerMaterial = checkerMaterial.CreateVirtualInstance(); + checkerMaterial.SetParameterValue(ScaleParamName, GridScale); } /// @@ -138,6 +146,7 @@ namespace FlaxEditor.GUI.Input if (isTransparent) { var alphaRect = new Rectangle(colorRect.Right, 0, Width - colorRect.Right, Height); + Render2D.DrawMaterial(checkerMaterial, alphaRect); Render2D.FillRectangle(alphaRect, _value); } From be7871c29206c0df5cdec0c9d382aa54aacc1d70 Mon Sep 17 00:00:00 2001 From: Saas Date: Sun, 12 Oct 2025 16:50:31 +0200 Subject: [PATCH 3/3] use Render2D based solution rather than shader for alpha grid https://github.com/FlaxEngine/FlaxEngine/pull/3281#issuecomment-3218049398 --- Source/Editor/EditorAssets.cs | 5 ----- Source/Editor/GUI/Input/ColorValueBox.cs | 28 ++++++++++++++++-------- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/Source/Editor/EditorAssets.cs b/Source/Editor/EditorAssets.cs index d30ca91c0..bdfc7dfa6 100644 --- a/Source/Editor/EditorAssets.cs +++ b/Source/Editor/EditorAssets.cs @@ -134,11 +134,6 @@ namespace FlaxEditor /// public static string FlaxIconBlueTexture = "Engine/Textures/FlaxIconBlue"; - /// - /// The checkboard material used as a background for displaying transparent colors. - /// - public static string ColorAlphaBackgroundGrid = "Editor/AlphaBackgroundGrid"; - /// /// The icon lists used by editor from the SegMDL2 font. /// diff --git a/Source/Editor/GUI/Input/ColorValueBox.cs b/Source/Editor/GUI/Input/ColorValueBox.cs index 1893c4124..d4bc03fd9 100644 --- a/Source/Editor/GUI/Input/ColorValueBox.cs +++ b/Source/Editor/GUI/Input/ColorValueBox.cs @@ -14,12 +14,7 @@ namespace FlaxEditor.GUI.Input [HideInEditor] public class ColorValueBox : Control { - private const String ScaleParamName = "Scale"; - // 4.8 is a magic number that makes the grid fit perfect in the color value box - private const float GridScale = 4.8f; - private bool _isMouseDown; - private MaterialBase checkerMaterial; /// /// Delegate function used for the color picker events handling. @@ -106,9 +101,6 @@ namespace FlaxEditor.GUI.Input public ColorValueBox() : base(0, 0, 32, 18) { - checkerMaterial = FlaxEngine.Content.LoadAsyncInternal(EditorAssets.ColorAlphaBackgroundGrid); - checkerMaterial = checkerMaterial.CreateVirtualInstance(); - checkerMaterial.SetParameterValue(ScaleParamName, GridScale); } /// @@ -146,7 +138,25 @@ namespace FlaxEditor.GUI.Input if (isTransparent) { var alphaRect = new Rectangle(colorRect.Right, 0, Width - colorRect.Right, Height); - Render2D.DrawMaterial(checkerMaterial, alphaRect); + + // Draw checkerboard pattern to part of the color value box + Render2D.FillRectangle(alphaRect, Color.White); + var smallRectSize = 7.9f; + var numHor = Mathf.CeilToInt(alphaRect.Width / smallRectSize); + var numVer = Mathf.CeilToInt(alphaRect.Height / smallRectSize); + for (int i = 0; i < numHor; i++) + { + for (int j = 0; j < numVer; j++) + { + if ((i + j) % 2 == 0) + { + var rect = new Rectangle(alphaRect.X + smallRectSize * i, alphaRect.Y + smallRectSize * j, new Float2(smallRectSize)); + Render2D.PushClip(alphaRect); + Render2D.FillRectangle(rect, Color.Gray); + Render2D.PopClip(); + } + } + } Render2D.FillRectangle(alphaRect, _value); }