Merge pull request #22670 from peppy/blueprint-improve-visuals

Improve the appearance of skin blueprints

osu.Game/Overlays/SkinEditor/SkinBlueprint.cs

@@ -5,13 +5,16 @@ using System;
 using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Utils;
 using osu.Framework.Input.Events;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Rulesets.Edit;
+using osu.Game.Screens.Edit.Compose.Components;
 using osu.Game.Skinning;
 using osuTK;
 using osuTK.Graphics;
@@ -22,8 +25,6 @@ namespace osu.Game.Overlays.SkinEditor
     {
         private Container box = null!;
 
-        private Container outlineBox = null!;
-
         private AnchorOriginVisualiser anchorOriginVisualiser = null!;
 
         private OsuSpriteText label = null!;
@@ -32,8 +33,17 @@ namespace osu.Game.Overlays.SkinEditor
 
         protected override bool ShouldBeAlive => drawable.IsAlive && Item.IsPresent;
 
-        [Resolved]
+        private Quad drawableQuad;
-        private OsuColour colours { get; set; } = null!;
+
+        public override Quad ScreenSpaceDrawQuad => drawableQuad;
+        public override Quad SelectionQuad => drawable.ScreenSpaceDrawQuad;
+
+        public override bool Contains(Vector2 screenSpacePos) => drawableQuad.Contains(screenSpacePos);
+
+        public override Vector2 ScreenSpaceSelectionPoint => drawable.ToScreenSpace(drawable.OriginPosition);
+
+        protected override bool ReceivePositionalInputAtSubTree(Vector2 screenSpacePos) =>
+            drawableQuad.Contains(screenSpacePos);
 
         public SkinBlueprint(ISerialisableDrawable component)
             : base(component)
@@ -41,7 +51,7 @@ namespace osu.Game.Overlays.SkinEditor
         }
 
         [BackgroundDependencyLoader]
-        private void load()
+        private void load(OsuColour colours)
         {
             InternalChildren = new Drawable[]
             {
@@ -49,18 +59,21 @@ namespace osu.Game.Overlays.SkinEditor
                 {
                     Children = new Drawable[]
                     {
-                        outlineBox = new Container
+                        new Container
                         {
                             RelativeSizeAxes = Axes.Both,
                             Masking = true,
-                            BorderThickness = 3,
+                            CornerRadius = 3,
-                            BorderColour = Color4.White,
+                            BorderThickness = SelectionBox.BORDER_RADIUS / 2,
+                            BorderColour = ColourInfo.GradientVertical(colours.Pink4.Darken(0.4f), colours.Pink4),
                             Children = new Drawable[]
                             {
                                 new Box
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    Alpha = 0f,
+                                    Blending = BlendingParameters.Additive,
+                                    Alpha = 0.2f,
+                                    Colour = ColourInfo.GradientVertical(colours.Pink2, colours.Pink4),
                                     AlwaysPresent = true,
                                 },
                             }
@@ -115,74 +128,73 @@ namespace osu.Game.Overlays.SkinEditor
 
         private void updateSelectedState()
         {
-            outlineBox.FadeColour(colours.Pink.Opacity(IsSelected ? 1 : 0.5f), 200, Easing.OutQuint);
-            outlineBox.Child.FadeTo(IsSelected ? 0.2f : 0, 200, Easing.OutQuint);
-
             anchorOriginVisualiser.FadeTo(IsSelected ? 1 : 0, 200, Easing.OutQuint);
             label.FadeTo(IsSelected || IsHovered ? 1 : 0, 200, Easing.OutQuint);
         }
 
-        private Quad drawableQuad;
-
-        public override Quad ScreenSpaceDrawQuad => drawableQuad;
-
         protected override void Update()
         {
             base.Update();
 
-            drawableQuad = drawable.ScreenSpaceDrawQuad;
+            drawableQuad = drawable.ToScreenSpace(
-            var quad = ToLocalSpace(drawable.ScreenSpaceDrawQuad);
+                drawable.DrawRectangle
+                        .Inflate(SkinSelectionHandler.INFLATE_SIZE));
 
-            box.Position = drawable.ToSpaceOfOtherDrawable(Vector2.Zero, this);
+            var localSpaceQuad = ToLocalSpace(drawableQuad);
-            box.Size = quad.Size;
+
+            box.Position = localSpaceQuad.TopLeft;
+            box.Size = localSpaceQuad.Size;
             box.Rotation = drawable.Rotation;
             box.Scale = new Vector2(MathF.Sign(drawable.Scale.X), MathF.Sign(drawable.Scale.Y));
         }
-
-        public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => drawable.ReceivePositionalInputAt(screenSpacePos);
-
-        public override Vector2 ScreenSpaceSelectionPoint => drawable.ToScreenSpace(drawable.OriginPosition);
-
-        public override Quad SelectionQuad => drawable.ScreenSpaceDrawQuad;
     }
 
     internal partial class AnchorOriginVisualiser : CompositeDrawable
     {
         private readonly Drawable drawable;
 
-        private readonly Box originBox;
+        private Drawable originBox = null!;
 
-        private readonly Box anchorBox;
+        private Drawable anchorBox = null!;
-        private readonly Box anchorLine;
+        private Drawable anchorLine = null!;
 
         public AnchorOriginVisualiser(Drawable drawable)
         {
             this.drawable = drawable;
+        }
 
-            InternalChildren = new Drawable[]
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Color4 anchorColour = colours.Red1;
+            Color4 originColour = colours.Red3;
+
+            InternalChildren = new[]
             {
-                anchorLine = new Box
+                anchorLine = new Circle
                 {
-                    Height = 2,
+                    Height = 3f,
                     Origin = Anchor.CentreLeft,
-                    Colour = Color4.Yellow,
+                    Colour = ColourInfo.GradientHorizontal(originColour.Opacity(0.5f), originColour),
-                    EdgeSmoothness = Vector2.One
                 },
-                originBox = new Box
+                originBox = new Circle
                 {
-                    Colour = Color4.Red,
+                    Colour = originColour,
                     Origin = Anchor.Centre,
-                    Size = new Vector2(5),
+                    Size = new Vector2(7),
                 },
-                anchorBox = new Box
+                anchorBox = new Circle
                 {
-                    Colour = Color4.Red,
+                    Colour = anchorColour,
                     Origin = Anchor.Centre,
-                    Size = new Vector2(5),
+                    Size = new Vector2(10),
                 },
             };
         }
 
+        private Vector2? anchorPosition;
+        private Vector2? originPositionInDrawableSpace;
+
         protected override void Update()
         {
             base.Update();
@@ -190,8 +202,13 @@ namespace osu.Game.Overlays.SkinEditor
             if (drawable.Parent == null)
                 return;
 
-            originBox.Position = drawable.ToSpaceOfOtherDrawable(drawable.OriginPosition, this);
+            var newAnchor = drawable.Parent.ToSpaceOfOtherDrawable(drawable.AnchorPosition, this);
-            anchorBox.Position = drawable.Parent.ToSpaceOfOtherDrawable(drawable.AnchorPosition, this);
+            anchorPosition = tweenPosition(anchorPosition ?? newAnchor, newAnchor);
+            anchorBox.Position = anchorPosition.Value;
+
+            // for the origin, tween in the drawable's local space to avoid unwanted tweening when the drawable is being dragged.
+            originPositionInDrawableSpace = originPositionInDrawableSpace != null ? tweenPosition(originPositionInDrawableSpace.Value, drawable.OriginPosition) : drawable.OriginPosition;
+            originBox.Position = drawable.ToSpaceOfOtherDrawable(originPositionInDrawableSpace.Value, this);
 
             var point1 = ToLocalSpace(anchorBox.ScreenSpaceDrawQuad.Centre);
             var point2 = ToLocalSpace(originBox.ScreenSpaceDrawQuad.Centre);
@@ -200,5 +217,11 @@ namespace osu.Game.Overlays.SkinEditor
             anchorLine.Width = (point2 - point1).Length;
             anchorLine.Rotation = MathHelper.RadiansToDegrees(MathF.Atan2(point2.Y - point1.Y, point2.X - point1.X));
         }
+
+        private Vector2 tweenPosition(Vector2 oldPosition, Vector2 newPosition)
+            => new Vector2(
+                (float)Interpolation.DampContinuously(oldPosition.X, newPosition.X, 25, Clock.ElapsedFrameTime),
+                (float)Interpolation.DampContinuously(oldPosition.Y, newPosition.Y, 25, Clock.ElapsedFrameTime)
+            );
     }
 }

osu.Game/Screens/Edit/Compose/Components/SelectionHandler.cs

@@ -32,6 +32,11 @@ namespace osu.Game.Screens.Edit.Compose.Components
     /// </summary>
     public abstract partial class SelectionHandler<T> : CompositeDrawable, IKeyBindingHandler<PlatformAction>, IKeyBindingHandler<GlobalAction>, IHasContextMenu
     {
+        /// <summary>
+        /// How much padding around the selection area is added.
+        /// </summary>
+        public const float INFLATE_SIZE = 5;
+
         /// <summary>
         /// The currently selected blueprints.
         /// Should be used when operations are dealing directly with the visible blueprints.
@@ -346,7 +351,7 @@ namespace osu.Game.Screens.Edit.Compose.Components
             for (int i = 1; i < selectedBlueprints.Count; i++)
                 selectionRect = RectangleF.Union(selectionRect, ToLocalSpace(selectedBlueprints[i].SelectionQuad).AABBFloat);
 
-            selectionRect = selectionRect.Inflate(5f);
+            selectionRect = selectionRect.Inflate(INFLATE_SIZE);
 
             SelectionBox.Position = selectionRect.Location;
             SelectionBox.Size = selectionRect.Size;