Merge pull request #20604 from peppy/mania-argon-second-pass

Second pass on osu!mania "argon" visuals

osu.Game.Rulesets.Mania.Tests/Skinning/TestSceneKeyArea.cs

@@ -1,51 +0,0 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
-// See the LICENCE file in the repository root for full licence text.
-
-#nullable disable
-
-using osu.Framework.Allocation;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Game.Rulesets.Mania.UI.Components;
-using osu.Game.Skinning;
-using osuTK;
-
-namespace osu.Game.Rulesets.Mania.Tests.Skinning
-{
-    public class TestSceneKeyArea : ManiaSkinnableTestScene
-    {
-        [BackgroundDependencyLoader]
-        private void load()
-        {
-            SetContents(_ => new FillFlowContainer
-            {
-                Anchor = Anchor.Centre,
-                Origin = Anchor.Centre,
-                RelativeSizeAxes = Axes.Both,
-                Size = new Vector2(0.8f),
-                Direction = FillDirection.Horizontal,
-                Children = new Drawable[]
-                {
-                    new ColumnTestContainer(0, ManiaAction.Key1)
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Width = 0.5f,
-                        Child = new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.KeyArea), _ => new DefaultKeyArea())
-                        {
-                            RelativeSizeAxes = Axes.Both
-                        },
-                    },
-                    new ColumnTestContainer(1, ManiaAction.Key2)
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Width = 0.5f,
-                        Child = new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.KeyArea), _ => new DefaultKeyArea())
-                        {
-                            RelativeSizeAxes = Axes.Both
-                        },
-                    },
-                }
-            });
-        }
-    }
-}

osu.Game.Rulesets.Mania/Skinning/Argon/ArgonColumnBackground.cs

@@ -62,7 +62,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
             accentColour = column.AccentColour.GetBoundCopy();
             accentColour.BindValueChanged(colour =>
             {
-                background.Colour = colour.NewValue.Darken(5);
+                background.Colour = colour.NewValue.Darken(3).Opacity(0.8f);
                 brightColour = colour.NewValue.Opacity(0.6f);
                 dimColour = colour.NewValue.Opacity(0);
             }, true);

osu.Game.Rulesets.Mania/Skinning/Argon/ArgonHitExplosion.cs

@@ -17,8 +17,6 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
 {
     public class ArgonHitExplosion : CompositeDrawable, IHitExplosion
     {
-        private const float default_large_faint_size = 0.8f;
-
         public override bool RemoveWhenNotAlive => true;
 
         [Resolved]

osu.Game.Rulesets.Mania/Skinning/Argon/ArgonHoldBodyPiece.cs

@@ -8,6 +8,7 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Rulesets.Mania.Objects.Drawables;
+using osu.Game.Rulesets.Mania.Skinning.Default;
 using osu.Game.Rulesets.Objects.Drawables;
 using osuTK.Graphics;
 
@@ -16,7 +17,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
     /// <summary>
     /// Represents length-wise portion of a hold note.
     /// </summary>
-    public class ArgonHoldBodyPiece : CompositeDrawable
+    public class ArgonHoldBodyPiece : CompositeDrawable, IHoldNoteBody
     {
         protected readonly Bindable<Color4> AccentColour = new Bindable<Color4>();
         protected readonly IBindable<bool> IsHitting = new Bindable<bool>();
@@ -26,12 +27,12 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
 
         public ArgonHoldBodyPiece()
         {
-            Blending = BlendingParameters.Additive;
             RelativeSizeAxes = Axes.Both;
 
             // Without this, the width of the body will be slightly larger than the head/tail.
             Masking = true;
             CornerRadius = ArgonNotePiece.CORNER_RADIUS;
+            Blending = BlendingParameters.Additive;
         }
 
         [BackgroundDependencyLoader(true)]
@@ -52,14 +53,14 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
             {
                 var holdNote = (DrawableHoldNote)drawableObject;
 
-                AccentColour.BindTo(drawableObject.AccentColour);
+                AccentColour.BindTo(holdNote.AccentColour);
                 IsHitting.BindTo(holdNote.IsHitting);
             }
 
             AccentColour.BindValueChanged(colour =>
             {
-                background.Colour = colour.NewValue.Opacity(0.2f);
+                background.Colour = colour.NewValue.Darken(1.2f);
-                foreground.Colour = colour.NewValue.Opacity(0.1f);
+                foreground.Colour = colour.NewValue.Opacity(0.2f);
             }, true);
 
             IsHitting.BindValueChanged(hitting =>
@@ -76,7 +77,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                     using (foreground.BeginDelayedSequence(synchronisedOffset))
                     {
                         foreground.FadeTo(1, animation_length).Then()
-                                  .FadeTo(0, animation_length)
+                                  .FadeTo(0.5f, animation_length)
                                   .Loop();
                     }
                 }
@@ -86,5 +87,11 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                 }
             });
         }
+
+        public void Recycle()
+        {
+            foreground.ClearTransforms();
+            foreground.Alpha = 0;
+        }
     }
 }

osu.Game.Rulesets.Mania/Skinning/Argon/ArgonKeyArea.cs

@@ -10,6 +10,7 @@ using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Input.Bindings;
 using osu.Framework.Input.Events;
+using osu.Framework.Utils;
 using osu.Game.Graphics;
 using osu.Game.Rulesets.Mania.UI;
 using osu.Game.Rulesets.UI.Scrolling;
@@ -50,7 +51,10 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
             InternalChild = directionContainer = new Container
             {
                 RelativeSizeAxes = Axes.X,
-                Height = Stage.HIT_TARGET_POSITION,
+                // Ensure the area is tall enough to put the target line in the correct location.
+                // This is to also allow the main background component to overlap the target line
+                // and avoid an inner corner radius being shown below the target line.
+                Height = Stage.HIT_TARGET_POSITION + ArgonNotePiece.CORNER_RADIUS * 2,
                 Children = new[]
                 {
                     new Container
@@ -62,7 +66,6 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                         {
                             Name = "Key gradient",
                             Alpha = 0,
-                            Blending = BlendingParameters.Additive,
                             RelativeSizeAxes = Axes.Both,
                         },
                     },
@@ -70,10 +73,11 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                     {
                         RelativeSizeAxes = Axes.X,
                         Anchor = Anchor.TopCentre,
-                        Origin = Anchor.BottomCentre,
+                        Origin = Anchor.TopCentre,
                         Colour = OsuColour.Gray(196 / 255f),
                         Height = ArgonNotePiece.CORNER_RADIUS * 2,
                         Masking = true,
+                        EdgeEffect = new EdgeEffectParameters { Type = EdgeEffectType.Glow },
                     },
                     new Container
                     {
@@ -97,6 +101,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                                         Size = new Vector2(icon_circle_size),
                                         Anchor = Anchor.BottomCentre,
                                         Origin = Anchor.Centre,
+                                        EdgeEffect = new EdgeEffectParameters { Type = EdgeEffectType.Glow },
                                     },
                                     new Circle
                                     {
@@ -105,6 +110,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                                         Size = new Vector2(icon_circle_size),
                                         Anchor = Anchor.BottomCentre,
                                         Origin = Anchor.Centre,
+                                        EdgeEffect = new EdgeEffectParameters { Type = EdgeEffectType.Glow },
                                     },
                                     new Circle
                                     {
@@ -113,6 +119,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                                         Size = new Vector2(icon_circle_size),
                                         Anchor = Anchor.BottomCentre,
                                         Origin = Anchor.Centre,
+                                        EdgeEffect = new EdgeEffectParameters { Type = EdgeEffectType.Glow },
                                     },
                                 }
                             },
@@ -125,6 +132,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                                 Masking = true,
                                 BorderThickness = 4,
                                 BorderColour = Color4.White,
+                                EdgeEffect = new EdgeEffectParameters { Type = EdgeEffectType.Glow },
                                 Children = new Drawable[]
                                 {
                                     new Box
@@ -146,10 +154,13 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
             accentColour = column.AccentColour.GetBoundCopy();
             accentColour.BindValueChanged(colour =>
                 {
-                    background.Colour = colour.NewValue.Darken(1f);
+                    background.Colour = colour.NewValue.Darken(0.2f);
                     bottomIcon.Colour = colour.NewValue;
                 },
                 true);
+
+            // Yes, proxy everything.
+            column.TopLevelContainer.Add(CreateProxy());
         }
 
         private void onDirectionChanged(ValueChangedEvent<ScrollingDirection> direction)
@@ -174,18 +185,20 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
         {
             if (e.Action != column.Action.Value) return false;
 
-            const double lighting_fade_in_duration = 50;
+            const double lighting_fade_in_duration = 70;
-            Color4 lightingColour = accentColour.Value.Lighten(0.9f);
+            Color4 lightingColour = getLightingColour();
 
             background
-                .FadeTo(1, 40).Then()
+                .FlashColour(accentColour.Value.Lighten(0.8f), 200, Easing.OutQuint)
-                .FadeTo(0.8f, 150, Easing.OutQuint);
+                .FadeTo(1, lighting_fade_in_duration, Easing.OutQuint)
+                .Then()
+                .FadeTo(0.8f, 500);
 
             hitTargetLine.FadeColour(Color4.White, lighting_fade_in_duration, Easing.OutQuint);
             hitTargetLine.TransformTo(nameof(EdgeEffect), new EdgeEffectParameters
             {
                 Type = EdgeEffectType.Glow,
-                Colour = lightingColour.Opacity(0.7f),
+                Colour = lightingColour.Opacity(0.4f),
                 Radius = 20,
             }, lighting_fade_in_duration, Easing.OutQuint);
 
@@ -204,7 +217,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                 circle.TransformTo(nameof(EdgeEffect), new EdgeEffectParameters
                 {
                     Type = EdgeEffectType.Glow,
-                    Colour = lightingColour.Opacity(0.3f),
+                    Colour = lightingColour.Opacity(0.2f),
                     Radius = 60,
                 }, lighting_fade_in_duration, Easing.OutQuint);
             }
@@ -216,10 +229,14 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
         {
             if (e.Action != column.Action.Value) return;
 
-            const double lighting_fade_out_duration = 300;
+            const double lighting_fade_out_duration = 800;
-            Color4 lightingColour = accentColour.Value.Lighten(0.9f).Opacity(0);
 
-            background.FadeTo(0, lighting_fade_out_duration, Easing.OutQuint);
+            Color4 lightingColour = getLightingColour().Opacity(0);
+
+            // background fades out faster than lighting elements to give better definition to the player.
+            background.FadeTo(0.3f, 50, Easing.OutQuint)
+                      .Then()
+                      .FadeOut(lighting_fade_out_duration, Easing.OutQuint);
 
             topIcon.ScaleTo(1f, 200, Easing.OutQuint);
             topIcon.TransformTo(nameof(EdgeEffect), new EdgeEffectParameters
@@ -249,5 +266,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
                 }, lighting_fade_out_duration, Easing.OutQuint);
             }
         }
+
+        private Color4 getLightingColour() => Interpolation.ValueAt(0.2f, accentColour.Value, Color4.White, 0, 1);
     }
 }

osu.Game.Rulesets.Mania/Skinning/Argon/ArgonNotePiece.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
     {
         public const float NOTE_HEIGHT = 42;
 
-        public const float CORNER_RADIUS = 3;
+        public const float CORNER_RADIUS = 3.4f;
 
         private readonly IBindable<ScrollingDirection> direction = new Bindable<ScrollingDirection>();
         private readonly IBindable<Color4> accentColour = new Bindable<Color4>();

osu.Game.Rulesets.Mania/Skinning/Argon/ManiaArgonSkinTransformer.cs

@@ -73,6 +73,9 @@ namespace osu.Game.Rulesets.Mania.Skinning.Argon
 
                 switch (maniaLookup.Lookup)
                 {
+                    case LegacyManiaSkinConfigurationLookups.ColumnSpacing:
+                        return SkinUtils.As<TValue>(new Bindable<float>(2));
+
                     case LegacyManiaSkinConfigurationLookups.StagePaddingBottom:
                     case LegacyManiaSkinConfigurationLookups.StagePaddingTop:
                         return SkinUtils.As<TValue>(new Bindable<float>(30));