From c71e1d78e02ef5c284d68c77df8dea8c657638a3 Mon Sep 17 00:00:00 2001 From: Saas Date: Wed, 25 Mar 2026 22:12:16 +0100 Subject: [PATCH 1/3] polish direction gizmo - slightly change appearance to be more functional and more pleasant on the eyes - add options to customize appearance in Viewport editor options --- Source/Editor/Gizmo/DirectionGizmo.cs | 52 +++++++++++++------ Source/Editor/Options/ViewportOptions.cs | 28 ++++++++++ Source/Editor/Viewport/EditorViewport.cs | 1 - .../Viewport/MainEditorGizmoViewport.cs | 41 ++++++++++----- 4 files changed, 93 insertions(+), 29 deletions(-) diff --git a/Source/Editor/Gizmo/DirectionGizmo.cs b/Source/Editor/Gizmo/DirectionGizmo.cs index babebbd5b..3620f452f 100644 --- a/Source/Editor/Gizmo/DirectionGizmo.cs +++ b/Source/Editor/Gizmo/DirectionGizmo.cs @@ -1,6 +1,8 @@ // Copyright (c) Wojciech Figat. All rights reserved. +using System; using System.Collections.Generic; +using FlaxEditor.Options; using FlaxEditor.Viewport; using FlaxEngine; using FlaxEngine.GUI; @@ -10,13 +12,19 @@ namespace FlaxEditor.Gizmo; [HideInEditor] internal class DirectionGizmo : ContainerControl { + public const float DefaultGizmoSize = 112.5f; + + private const float AxisLength = 71.25f; + private const float SpriteRadius = 10.85f; + private IGizmoOwner _owner; private ViewportProjection _viewportProjection; private EditorViewport _viewport; private Vector3 _gizmoCenter; - private float _axisLength = 75.0f; - private float _textAxisLength = 95.0f; - private float _spriteRadius = 12.0f; + private float _gizmoOpacity; + private float _backgroundOpacity; + private float _axisLength; + private float _spriteRadius; private AxisData _xAxisData; private AxisData _yAxisData; @@ -100,11 +108,26 @@ internal class DirectionGizmo : ContainerControl _axisData.EnsureCapacity(6); _spritePositions.EnsureCapacity(6); - _posHandle = Editor.Instance.Icons.VisjectBoxClosed32; - _negHandle = Editor.Instance.Icons.VisjectBoxOpen32; + var editor = Editor.Instance; + _posHandle = editor.Icons.VisjectBoxClosed32; + _negHandle = editor.Icons.VisjectBoxOpen32; _fontReference = new FontReference(Style.Current.FontSmall); - _fontReference.Size = 8; + + editor.Options.OptionsChanged += OnEditorOptionsChanged; + OnEditorOptionsChanged(editor.Options.Options); + } + + private void OnEditorOptionsChanged(EditorOptions options) + { + float gizmoScale = options.Viewport.DirectionGizmoScale; + _axisLength = AxisLength * gizmoScale; + _spriteRadius = SpriteRadius * gizmoScale; + + _gizmoOpacity = options.Viewport.DirectionGizmoOpacity; + _backgroundOpacity = options.Viewport.DirectionGizmoBackgroundOpacity; + + _fontReference.Size = 8.25f * gizmoScale; } private bool IsPointInSprite(Float2 point, Float2 spriteCenter) @@ -232,33 +255,32 @@ internal class DirectionGizmo : ContainerControl // Rebuild sprite positions list for hover detection _spritePositions.Clear(); - Render2D.DrawSprite(_posHandle, new Rectangle(0, 0, Size), Color.Black.AlphaMultiplied(0.1f)); + Render2D.DrawSprite(_posHandle, new Rectangle(0, 0, Size), Color.Black.AlphaMultiplied(_backgroundOpacity)); // Draw in order from farthest to closest for (int i = 0; i < _axisData.Count; i++) { var axis = _axisData[i]; Float2 tipScreen = relativeCenter + axis.Delta * _axisLength; - Float2 tipTextScreen = relativeCenter + axis.Delta * _textAxisLength; bool isHovered = _hoveredAxisIndex == i; // Store sprite position for hover detection - _spritePositions.Add((tipTextScreen, axis.Direction)); + _spritePositions.Add((tipScreen, axis.Direction)); var axisColor = isHovered ? new Color(1.0f, 0.8980392f, 0.039215688f) : axis.AxisColor; + axisColor.A *= _gizmoOpacity; var font = _fontReference.GetFont(); if (!axis.Negative) { - Render2D.DrawLine(relativeCenter, tipScreen, axisColor, 2.0f); - Render2D.DrawSprite(_posHandle, new Rectangle(tipTextScreen - new Float2(_spriteRadius), new Float2(_spriteRadius * 2)), axisColor); - Render2D.DrawText(font, axis.Label, isHovered ? Color.Gray : Color.Black, tipTextScreen - font.MeasureText(axis.Label) * 0.5f); + Render2D.DrawLine(relativeCenter, tipScreen, axisColor, 1.5f); + Render2D.DrawSprite(_posHandle, new Rectangle(tipScreen - new Float2(_spriteRadius), new Float2(_spriteRadius * 2)), axisColor); + Render2D.DrawText(font, axis.Label, Color.Black, tipScreen - font.MeasureText(axis.Label) * 0.5f); } else { - Render2D.DrawSprite(_posHandle, new Rectangle(tipTextScreen - new Float2(_spriteRadius), new Float2(_spriteRadius * 2)), axisColor.RGBMultiplied(0.65f)); - Render2D.DrawSprite(_negHandle, new Rectangle(tipTextScreen - new Float2(_spriteRadius), new Float2(_spriteRadius * 2)), axisColor); + Render2D.DrawSprite(_posHandle, new Rectangle(tipScreen - new Float2(_spriteRadius), new Float2(_spriteRadius * 2)), axisColor.RGBMultiplied(0.85f).AlphaMultiplied(0.8f)); if (isHovered) - Render2D.DrawText(font, axis.Label, Color.Black, tipTextScreen - font.MeasureText(axis.Label) * 0.5f); + Render2D.DrawText(font, axis.Label, Color.Black, tipScreen - font.MeasureText(axis.Label) * 0.5f); } } diff --git a/Source/Editor/Options/ViewportOptions.cs b/Source/Editor/Options/ViewportOptions.cs index aed633672..6e8903bab 100644 --- a/Source/Editor/Options/ViewportOptions.cs +++ b/Source/Editor/Options/ViewportOptions.cs @@ -171,5 +171,33 @@ namespace FlaxEditor.Options [DefaultValue(1000.0f), Limit(0.0f, 20000.0f, 5.0f)] [EditorDisplay("Viewport Icons"), EditorOrder(410)] public float MaxSizeDistance { get; set; } = 1000.0f; + + /// + /// Gets or sets a value that indicates whether the main viewports is visible. + /// + [DefaultValue(true)] + [EditorDisplay("Direction Gizmo"), EditorOrder(500), Tooltip("Sets the visibility of the direction gizmo in the main editor viewport.")] + public bool ShowDirectionGizmo { get; set; } = true; + + /// + /// Gets or sets a value by which the main viewports size is multiplied with. + /// + [DefaultValue(1f), Limit(0.0f, 2.0f)] + [EditorDisplay("Direction Gizmo"), EditorOrder(501), Tooltip("The scale of the direction gizmo in the main viewport.")] + public float DirectionGizmoScale { get; set; } = 1f; + + /// + /// Gets or sets a value for the opacity of the main viewports background. + /// + [DefaultValue(0.05f), Limit(0.0f, 1.0f)] + [EditorDisplay("Direction Gizmo"), EditorOrder(502), Tooltip("The background opacity of the of the direction gizmo in the main viewport.")] + public float DirectionGizmoBackgroundOpacity { get; set; } = 0.05f; + + /// + /// Gets or sets a value for the opacity of the main viewports . + /// + [DefaultValue(0.6f), Limit(0.0f, 1.0f)] + [EditorDisplay("Direction Gizmo"), EditorOrder(503), Tooltip("The opacity of the of the direction gizmo in the main viewport.")] + public float DirectionGizmoOpacity { get; set; } = 0.6f; } } diff --git a/Source/Editor/Viewport/EditorViewport.cs b/Source/Editor/Viewport/EditorViewport.cs index 5f4c47447..ddcee7084 100644 --- a/Source/Editor/Viewport/EditorViewport.cs +++ b/Source/Editor/Viewport/EditorViewport.cs @@ -163,7 +163,6 @@ namespace FlaxEditor.Viewport private bool _useMouseAcceleration; // Input - internal bool _disableInputUpdate; private bool _isControllingMouse, _isViewportControllingMouse, _wasVirtualMouseRightDown, _isVirtualMouseRightDown; private int _deltaFilteringStep; diff --git a/Source/Editor/Viewport/MainEditorGizmoViewport.cs b/Source/Editor/Viewport/MainEditorGizmoViewport.cs index 6b0165190..08a4614ac 100644 --- a/Source/Editor/Viewport/MainEditorGizmoViewport.cs +++ b/Source/Editor/Viewport/MainEditorGizmoViewport.cs @@ -1,17 +1,19 @@ // Copyright (c) Wojciech Figat. All rights reserved. -using System; -using System.Collections.Generic; using FlaxEditor.Content; using FlaxEditor.Gizmo; using FlaxEditor.GUI.ContextMenu; +using FlaxEditor.Options; using FlaxEditor.SceneGraph; using FlaxEditor.Scripting; using FlaxEditor.Viewport.Modes; +using FlaxEditor.Viewport.Widgets; using FlaxEditor.Windows; using FlaxEngine; using FlaxEngine.Gizmo; using FlaxEngine.GUI; +using System; +using System.Collections.Generic; using Object = FlaxEngine.Object; namespace FlaxEditor.Viewport @@ -26,6 +28,7 @@ namespace FlaxEditor.Viewport private readonly ContextMenuButton _showGridButton; private readonly ContextMenuButton _showNavigationButton; private readonly ContextMenuButton _toggleGameViewButton; + private readonly ContextMenuButton _showDirectionGizmoButton; private SelectionOutline _customSelectionOutline; /// @@ -226,12 +229,13 @@ namespace FlaxEditor.Viewport // Add rubber band selector _rubberBandSelector = new ViewportRubberBandSelector(this); - _directionGizmo = new DirectionGizmo(this); - _directionGizmo.AnchorPreset = AnchorPresets.TopRight; - _directionGizmo.Parent = this; - _directionGizmo.LocalY += 25; - _directionGizmo.LocalX -= 150; - _directionGizmo.Size = new Float2(150, 150); + + // Add direction gizmo + _directionGizmo = new DirectionGizmo(this) + { + AnchorPreset = AnchorPresets.TopRight, + Parent = this, + }; // Add grid Grid = new GridGizmo(this); @@ -252,11 +256,10 @@ namespace FlaxEditor.Viewport _showNavigationButton.CloseMenuOnClick = false; // Show direction gizmo widget - var showDirectionGizmoButton = ViewWidgetShowMenu.AddButton("Direction Gizmo", () => _directionGizmo.Visible = !_directionGizmo.Visible); - showDirectionGizmoButton.AutoCheck = true; - showDirectionGizmoButton.CloseMenuOnClick = false; - showDirectionGizmoButton.Checked = _directionGizmo.Visible; - + _showDirectionGizmoButton = ViewWidgetShowMenu.AddButton("Direction Gizmo", () => _directionGizmo.Visible = !_directionGizmo.Visible); + _showDirectionGizmoButton.AutoCheck = true; + _showDirectionGizmoButton.CloseMenuOnClick = false; + // Game View ViewWidgetButtonMenu.AddSeparator(); _toggleGameViewButton = ViewWidgetButtonMenu.AddButton("Game View", inputOptions.ToggleGameView, ToggleGameView); @@ -290,6 +293,18 @@ namespace FlaxEditor.Viewport // Game View InputActions.Add(options => options.ToggleGameView, ToggleGameView); + + editor.Options.OptionsChanged += OnEditorOptionsChanged; + OnEditorOptionsChanged(editor.Options.Options); + } + + private void OnEditorOptionsChanged(EditorOptions options) + { + _directionGizmo.Visible = options.Viewport.ShowDirectionGizmo; + _showDirectionGizmoButton.Checked = _directionGizmo.Visible; + _directionGizmo.Size = new Float2(DirectionGizmo.DefaultGizmoSize * options.Viewport.DirectionGizmoScale); + _directionGizmo.LocalX = -_directionGizmo.Size.X * 0.5f; + _directionGizmo.LocalY = _directionGizmo.Size.Y * 0.5f + ViewportWidgetsContainer.WidgetsHeight; } /// From c9df03d29371d0a899ecc568bb7c212737f6d9cc Mon Sep 17 00:00:00 2001 From: Saas Date: Wed, 25 Mar 2026 22:15:38 +0100 Subject: [PATCH 2/3] fix viewport orientation when clicking on axis --- Source/Editor/Gizmo/DirectionGizmo.cs | 13 ++++++------- Source/Editor/Viewport/MainEditorGizmoViewport.cs | 5 ++--- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/Source/Editor/Gizmo/DirectionGizmo.cs b/Source/Editor/Gizmo/DirectionGizmo.cs index 3620f452f..282ebc974 100644 --- a/Source/Editor/Gizmo/DirectionGizmo.cs +++ b/Source/Editor/Gizmo/DirectionGizmo.cs @@ -1,6 +1,5 @@ // Copyright (c) Wojciech Figat. All rights reserved. -using System; using System.Collections.Generic; using FlaxEditor.Options; using FlaxEditor.Viewport; @@ -179,12 +178,12 @@ internal class DirectionGizmo : ContainerControl { Quaternion orientation = direction switch { - AxisDirection.PosX => Quaternion.Euler(0, 90, 0), - AxisDirection.NegX => Quaternion.Euler(0, -90, 0), - AxisDirection.PosY => Quaternion.Euler(-90, 0, 0), - AxisDirection.NegY => Quaternion.Euler(90, 0, 0), - AxisDirection.PosZ => Quaternion.Euler(0, 0, 0), - AxisDirection.NegZ => Quaternion.Euler(0, 180, 0), + AxisDirection.PosX => Quaternion.Euler(0, -90, 0), + AxisDirection.NegX => Quaternion.Euler(0, 90, 0), + AxisDirection.PosY => Quaternion.Euler(90, 0, 0), + AxisDirection.NegY => Quaternion.Euler(-90, 0, 0), + AxisDirection.PosZ => Quaternion.Euler(0, 180, 0), + AxisDirection.NegZ => Quaternion.Euler(0, 0, 0), _ => Quaternion.Identity }; _viewport.OrientViewport(ref orientation); diff --git a/Source/Editor/Viewport/MainEditorGizmoViewport.cs b/Source/Editor/Viewport/MainEditorGizmoViewport.cs index 08a4614ac..6a2a78543 100644 --- a/Source/Editor/Viewport/MainEditorGizmoViewport.cs +++ b/Source/Editor/Viewport/MainEditorGizmoViewport.cs @@ -1,5 +1,7 @@ // Copyright (c) Wojciech Figat. All rights reserved. +using System.Collections.Generic; +using Object = FlaxEngine.Object; using FlaxEditor.Content; using FlaxEditor.Gizmo; using FlaxEditor.GUI.ContextMenu; @@ -12,9 +14,6 @@ using FlaxEditor.Windows; using FlaxEngine; using FlaxEngine.Gizmo; using FlaxEngine.GUI; -using System; -using System.Collections.Generic; -using Object = FlaxEngine.Object; namespace FlaxEditor.Viewport { From e455c874c6a57119173ea347b47f09d1fd9e8a68 Mon Sep 17 00:00:00 2001 From: Saas Date: Wed, 25 Mar 2026 22:57:17 +0100 Subject: [PATCH 3/3] tweak Z axis color and add brightness option https://discord.com/channels/437989205315158016/509056735844106251/1486480204242096369 --- Source/Editor/Gizmo/DirectionGizmo.cs | 9 +++++---- Source/Editor/Options/ViewportOptions.cs | 11 +++++++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/Source/Editor/Gizmo/DirectionGizmo.cs b/Source/Editor/Gizmo/DirectionGizmo.cs index 282ebc974..b04eb8d8d 100644 --- a/Source/Editor/Gizmo/DirectionGizmo.cs +++ b/Source/Editor/Gizmo/DirectionGizmo.cs @@ -20,6 +20,7 @@ internal class DirectionGizmo : ContainerControl private ViewportProjection _viewportProjection; private EditorViewport _viewport; private Vector3 _gizmoCenter; + private float _gizmoBrightness; private float _gizmoOpacity; private float _backgroundOpacity; private float _axisLength; @@ -99,11 +100,11 @@ internal class DirectionGizmo : ContainerControl _xAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "X", AxisColor = new Color(1.0f, 0.0f, 0.02745f, 1.0f), Negative = false, Direction = AxisDirection.PosX }; _yAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "Y", AxisColor = new Color(0.239215f, 1.0f, 0.047058f, 1.0f), Negative = false, Direction = AxisDirection.PosY }; - _zAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "Z", AxisColor = new Color(0.0f, 0.0235294f, 1.0f, 1.0f), Negative = false, Direction = AxisDirection.PosZ }; + _zAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "Z", AxisColor = new Color(0.0f, 0.3607f, 0.9f, 1.0f), Negative = false, Direction = AxisDirection.PosZ }; _negXAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "-X", AxisColor = new Color(1.0f, 0.0f, 0.02745f, 1.0f), Negative = true, Direction = AxisDirection.NegX }; _negYAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "-Y", AxisColor = new Color(0.239215f, 1.0f, 0.047058f, 1.0f), Negative = true, Direction = AxisDirection.NegY }; - _negZAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "-Z", AxisColor = new Color(0.0f, 0.0235294f, 1.0f, 1.0f), Negative = true, Direction = AxisDirection.NegZ }; + _negZAxisData = new AxisData { Delta = new Float2(0, 0), Distance = 0, Label = "-Z", AxisColor = new Color(0.0f, 0.3607f, 0.9f, 1.0f), Negative = true, Direction = AxisDirection.NegZ }; _axisData.EnsureCapacity(6); _spritePositions.EnsureCapacity(6); @@ -122,7 +123,7 @@ internal class DirectionGizmo : ContainerControl float gizmoScale = options.Viewport.DirectionGizmoScale; _axisLength = AxisLength * gizmoScale; _spriteRadius = SpriteRadius * gizmoScale; - + _gizmoBrightness = options.Viewport.DirectionGizmoBrightness; _gizmoOpacity = options.Viewport.DirectionGizmoOpacity; _backgroundOpacity = options.Viewport.DirectionGizmoBackgroundOpacity; @@ -267,7 +268,7 @@ internal class DirectionGizmo : ContainerControl _spritePositions.Add((tipScreen, axis.Direction)); var axisColor = isHovered ? new Color(1.0f, 0.8980392f, 0.039215688f) : axis.AxisColor; - axisColor.A *= _gizmoOpacity; + axisColor = axisColor.RGBMultiplied(_gizmoBrightness).AlphaMultiplied(_gizmoOpacity); var font = _fontReference.GetFont(); if (!axis.Negative) { diff --git a/Source/Editor/Options/ViewportOptions.cs b/Source/Editor/Options/ViewportOptions.cs index 6e8903bab..c7f6ba544 100644 --- a/Source/Editor/Options/ViewportOptions.cs +++ b/Source/Editor/Options/ViewportOptions.cs @@ -189,9 +189,9 @@ namespace FlaxEditor.Options /// /// Gets or sets a value for the opacity of the main viewports background. /// - [DefaultValue(0.05f), Limit(0.0f, 1.0f)] + [DefaultValue(0.1f), Limit(0.0f, 1.0f)] [EditorDisplay("Direction Gizmo"), EditorOrder(502), Tooltip("The background opacity of the of the direction gizmo in the main viewport.")] - public float DirectionGizmoBackgroundOpacity { get; set; } = 0.05f; + public float DirectionGizmoBackgroundOpacity { get; set; } = 0.1f; /// /// Gets or sets a value for the opacity of the main viewports . @@ -199,5 +199,12 @@ namespace FlaxEditor.Options [DefaultValue(0.6f), Limit(0.0f, 1.0f)] [EditorDisplay("Direction Gizmo"), EditorOrder(503), Tooltip("The opacity of the of the direction gizmo in the main viewport.")] public float DirectionGizmoOpacity { get; set; } = 0.6f; + + /// + /// Gets or sets a value for the opacity of the main viewports . + /// + [DefaultValue(1f), Limit(0.0f, 2.0f)] + [EditorDisplay("Direction Gizmo"), EditorOrder(504), Tooltip("The brightness of the of the direction gizmo in the main viewport.")] + public float DirectionGizmoBrightness{ get; set; } = 1f; } }