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);
}