Merge pull request #9626 from peppy/improve-spinner-experience

Marginally improve spinner visuals

osu.Game.Rulesets.Osu.Tests/TestSceneSpinner.cs

@@ -36,7 +36,7 @@ namespace osu.Game.Rulesets.Osu.Tests
 
         private void testSingle(float circleSize, bool auto = false)
         {
-            var spinner = new Spinner { StartTime = Time.Current + 1000, EndTime = Time.Current + 4000 };
+            var spinner = new Spinner { StartTime = Time.Current + 2000, EndTime = Time.Current + 5000 };
 
             spinner.ApplyDefaults(new ControlPointInfo(), new BeatmapDifficulty { CircleSize = circleSize });
 

osu.Game.Rulesets.Osu/Objects/Drawables/DrawableSpinner.cs

@@ -93,7 +93,10 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
                     {
                         Background = new SpinnerBackground
                         {
-                            Alpha = 0.6f,
+                            Disc =
+                            {
+                                Alpha = 0f,
+                            },
                             Anchor = Anchor.Centre,
                             Origin = Anchor.Centre,
                         },
@@ -125,10 +128,10 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
         private void load(OsuColour colours)
         {
             normalColour = baseColour;
+            completeColour = colours.YellowLight;
 
             Background.AccentColour = normalColour;
-
+            Ticks.AccentColour = normalColour;
-            completeColour = colours.YellowLight.Opacity(0.75f);
 
             Disc.AccentColour = fillColour;
             circle.Colour = colours.BlueDark;
@@ -147,16 +150,7 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
             if (Progress >= 1 && !Disc.Complete)
             {
                 Disc.Complete = true;
-
+                transformFillColour(completeColour, 200);
-                const float duration = 200;
-
-                Disc.FadeAccent(completeColour, duration);
-
-                Background.FadeAccent(completeColour, duration);
-                Background.FadeOut(duration);
-
-                circle.FadeColour(completeColour, duration);
-                glow.FadeColour(completeColour, duration);
             }
 
             if (userTriggered || Time.Current < Spinner.EndTime)
@@ -204,32 +198,59 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
         {
             base.UpdateInitialTransforms();
 
-            circleContainer.ScaleTo(Spinner.Scale * 0.3f);
+            circleContainer.ScaleTo(0);
-            circleContainer.ScaleTo(Spinner.Scale, HitObject.TimePreempt / 1.4f, Easing.OutQuint);
+            mainContainer.ScaleTo(0);
+
+            using (BeginDelayedSequence(HitObject.TimePreempt / 2, true))
+            {
+                float phaseOneScale = Spinner.Scale * 0.7f;
+
+                circleContainer.ScaleTo(phaseOneScale, HitObject.TimePreempt / 4, Easing.OutQuint);
 
                 mainContainer
-                .ScaleTo(0)
+                    .ScaleTo(phaseOneScale * circle.DrawHeight / DrawHeight * 1.6f, HitObject.TimePreempt / 4, Easing.OutQuint)
-                .ScaleTo(Spinner.Scale * circle.DrawHeight / DrawHeight * 1.4f, HitObject.TimePreempt - 150, Easing.OutQuint)
+                    .RotateTo((float)(25 * Spinner.Duration / 2000), HitObject.TimePreempt + Spinner.Duration);
-                .Then()
+
-                .ScaleTo(1, 500, Easing.OutQuint);
+                using (BeginDelayedSequence(HitObject.TimePreempt / 2, true))
+                {
+                    circleContainer.ScaleTo(Spinner.Scale, 400, Easing.OutQuint);
+                    mainContainer.ScaleTo(1, 400, Easing.OutQuint);
+                }
+            }
         }
 
         protected override void UpdateStateTransforms(ArmedState state)
         {
             base.UpdateStateTransforms(state);
 
-            var sequence = this.Delay(Spinner.Duration).FadeOut(160);
+            using (BeginDelayedSequence(Spinner.Duration, true))
+            {
+                this.FadeOut(160);
 
                 switch (state)
                 {
                     case ArmedState.Hit:
-                    sequence.ScaleTo(Scale * 1.2f, 320, Easing.Out);
+                        transformFillColour(completeColour, 0);
+                        this.ScaleTo(Scale * 1.2f, 320, Easing.Out);
+                        mainContainer.RotateTo(mainContainer.Rotation + 180, 320);
                         break;
 
                     case ArmedState.Miss:
-                    sequence.ScaleTo(Scale * 0.8f, 320, Easing.In);
+                        this.ScaleTo(Scale * 0.8f, 320, Easing.In);
                         break;
                 }
             }
         }
+
+        private void transformFillColour(Colour4 colour, double duration)
+        {
+            Disc.FadeAccent(colour, duration);
+
+            Background.FadeAccent(colour.Darken(1), duration);
+            Ticks.FadeAccent(colour, duration);
+
+            circle.FadeColour(colour, duration);
+            glow.FadeColour(colour, duration);
+        }
+    }
 }

osu.Game.Rulesets.Osu/Objects/Drawables/Pieces/SpinnerBackground.cs

@@ -1,18 +1,18 @@
 // 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.
 
-using osuTK.Graphics;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
+using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 {
     public class SpinnerBackground : CircularContainer, IHasAccentColour
     {
-        protected Box Disc;
+        public readonly Box Disc;
 
         public Color4 AccentColour
         {

osu.Game.Rulesets.Osu/Objects/Drawables/Pieces/SpinnerTicks.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Linq;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -9,10 +10,11 @@ using osu.Framework.Graphics.Effects;
 using osuTK;
 using osuTK.Graphics;
 using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 {
-    public class SpinnerTicks : Container
+    public class SpinnerTicks : Container, IHasAccentColour
     {
         public SpinnerTicks()
         {
@@ -20,28 +22,22 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
             Anchor = Anchor.Centre;
             RelativeSizeAxes = Axes.Both;
 
-            const float count = 18;
+            const float count = 8;
 
             for (float i = 0; i < count; i++)
             {
                 Add(new Container
                 {
-                    Colour = Color4.Black,
                     Alpha = 0.4f,
-                    EdgeEffect = new EdgeEffectParameters
+                    Blending = BlendingParameters.Additive,
-                    {
-                        Type = EdgeEffectType.Glow,
-                        Radius = 10,
-                        Colour = Color4.Gray.Opacity(0.2f),
-                    },
                     RelativePositionAxes = Axes.Both,
                     Masking = true,
                     CornerRadius = 5,
                     Size = new Vector2(60, 10),
                     Origin = Anchor.Centre,
                     Position = new Vector2(
-                        0.5f + MathF.Sin(i / count * 2 * MathF.PI) / 2 * 0.86f,
+                        0.5f + MathF.Sin(i / count * 2 * MathF.PI) / 2 * 0.83f,
-                        0.5f + MathF.Cos(i / count * 2 * MathF.PI) / 2 * 0.86f
+                        0.5f + MathF.Cos(i / count * 2 * MathF.PI) / 2 * 0.83f
                     ),
                     Rotation = -i / count * 360 + 90,
                     Children = new[]
@@ -54,5 +50,25 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
                 });
             }
         }
+
+        public Color4 AccentColour
+        {
+            get => Colour;
+            set
+            {
+                Colour = value;
+
+                foreach (var c in Children.OfType<Container>())
+                {
+                    c.EdgeEffect =
+                        new EdgeEffectParameters
+                        {
+                            Type = EdgeEffectType.Glow,
+                            Radius = 20,
+                            Colour = value.Opacity(0.8f),
+                        };
+                }
+            }
+        }
     }
 }