Merge pull request #9719 from peppy/spinner-skinning

Add spinner skinning support

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

@@ -1,12 +1,27 @@
 // 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 osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
 using osu.Game.Tests.Visual;
 
 namespace osu.Game.Rulesets.Osu.Tests
 {
     public abstract class OsuSkinnableTestScene : SkinnableTestScene
     {
+        private Container content;
+
+        protected override Container<Drawable> Content
+        {
+            get
+            {
+                if (content == null)
+                    base.Content.Add(content = new OsuInputManager(new RulesetInfo { ID = 0 }));
+
+                return content;
+            }
+        }
+
         protected override Ruleset CreateRulesetForSkinProvider() => new OsuRuleset();
     }
 }

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

@@ -3,7 +3,6 @@
 
 using System.Collections.Generic;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Game.Audio;
 using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.ControlPoints;
@@ -26,19 +25,6 @@ namespace osu.Game.Rulesets.Osu.Tests
     [TestFixture]
     public class TestSceneSlider : OsuSkinnableTestScene
     {
-        private Container content;
-
-        protected override Container<Drawable> Content
-        {
-            get
-            {
-                if (content == null)
-                    base.Content.Add(content = new OsuInputManager(new RulesetInfo { ID = 0 }));
-
-                return content;
-            }
-        }
-
         private int depthIndex;
 
         public TestSceneSlider()

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

@@ -4,37 +4,30 @@
 using System.Linq;
 using NUnit.Framework;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
 using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Rulesets.Mods;
 using osu.Game.Rulesets.Osu.Objects;
 using osu.Game.Rulesets.Osu.Objects.Drawables;
-using osu.Game.Tests.Visual;
 
 namespace osu.Game.Rulesets.Osu.Tests
 {
     [TestFixture]
-    public class TestSceneSpinner : OsuTestScene
+    public class TestSceneSpinner : OsuSkinnableTestScene
     {
-        private readonly Container content;
-        protected override Container<Drawable> Content => content;
-
         private int depthIndex;
 
         public TestSceneSpinner()
         {
-            base.Content.Add(content = new OsuInputManager(new RulesetInfo { ID = 0 }));
+            AddStep("Miss Big", () => SetContents(() => testSingle(2)));
-
+            AddStep("Miss Medium", () => SetContents(() => testSingle(5)));
-            AddStep("Miss Big", () => testSingle(2));
+            AddStep("Miss Small", () => SetContents(() => testSingle(7)));
-            AddStep("Miss Medium", () => testSingle(5));
+            AddStep("Hit Big", () => SetContents(() => testSingle(2, true)));
-            AddStep("Miss Small", () => testSingle(7));
+            AddStep("Hit Medium", () => SetContents(() => testSingle(5, true)));
-            AddStep("Hit Big", () => testSingle(2, true));
+            AddStep("Hit Small", () => SetContents(() => testSingle(7, true)));
-            AddStep("Hit Medium", () => testSingle(5, true));
-            AddStep("Hit Small", () => testSingle(7, true));
         }
 
-        private void testSingle(float circleSize, bool auto = false)
+        private Drawable testSingle(float circleSize, bool auto = false)
         {
             var spinner = new Spinner { StartTime = Time.Current + 2000, EndTime = Time.Current + 5000 };
 
@@ -49,12 +42,12 @@ namespace osu.Game.Rulesets.Osu.Tests
             foreach (var mod in SelectedMods.Value.OfType<IApplicableToDrawableHitObjects>())
                 mod.ApplyToDrawableHitObjects(new[] { drawable });
 
-            Add(drawable);
+            return drawable;
         }
 
         private class TestDrawableSpinner : DrawableSpinner
         {
-            private bool auto;
+            private readonly bool auto;
 
             public TestDrawableSpinner(Spinner s, bool auto)
                 : base(s)
@@ -62,16 +55,11 @@ namespace osu.Game.Rulesets.Osu.Tests
                 this.auto = auto;
             }
 
-            protected override void CheckForResult(bool userTriggered, double timeOffset)
+            protected override void Update()
             {
-                if (auto && !userTriggered && Time.Current > Spinner.StartTime + Spinner.Duration / 2 && Progress < 1)
+                base.Update();
-                {
+                if (auto)
-                    // force completion only once to not break human interaction
+                    RotationTracker.AddRotation((float)(Clock.ElapsedFrameTime * 3));
-                    Disc.CumulativeRotation = Spinner.SpinsRequired * 360;
-                    auto = false;
-                }
-
-                base.CheckForResult(userTriggered, timeOffset);
             }
         }
     }

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

@@ -61,12 +61,12 @@ namespace osu.Game.Rulesets.Osu.Tests
         public void TestSpinnerRewindingRotation()
         {
             addSeekStep(5000);
-            AddAssert("is disc rotation not almost 0", () => !Precision.AlmostEquals(drawableSpinner.Disc.Rotation, 0, 100));
+            AddAssert("is disc rotation not almost 0", () => !Precision.AlmostEquals(drawableSpinner.RotationTracker.Rotation, 0, 100));
-            AddAssert("is disc rotation absolute not almost 0", () => !Precision.AlmostEquals(drawableSpinner.Disc.CumulativeRotation, 0, 100));
+            AddAssert("is disc rotation absolute not almost 0", () => !Precision.AlmostEquals(drawableSpinner.RotationTracker.CumulativeRotation, 0, 100));
 
             addSeekStep(0);
-            AddAssert("is disc rotation almost 0", () => Precision.AlmostEquals(drawableSpinner.Disc.Rotation, 0, 100));
+            AddAssert("is disc rotation almost 0", () => Precision.AlmostEquals(drawableSpinner.RotationTracker.Rotation, 0, 100));
-            AddAssert("is disc rotation absolute almost 0", () => Precision.AlmostEquals(drawableSpinner.Disc.CumulativeRotation, 0, 100));
+            AddAssert("is disc rotation absolute almost 0", () => Precision.AlmostEquals(drawableSpinner.RotationTracker.CumulativeRotation, 0, 100));
         }
 
         [Test]
@@ -75,24 +75,24 @@ namespace osu.Game.Rulesets.Osu.Tests
             double finalAbsoluteDiscRotation = 0, finalRelativeDiscRotation = 0, finalSpinnerSymbolRotation = 0;
 
             addSeekStep(5000);
-            AddStep("retrieve disc relative rotation", () => finalRelativeDiscRotation = drawableSpinner.Disc.Rotation);
+            AddStep("retrieve disc relative rotation", () => finalRelativeDiscRotation = drawableSpinner.RotationTracker.Rotation);
-            AddStep("retrieve disc absolute rotation", () => finalAbsoluteDiscRotation = drawableSpinner.Disc.CumulativeRotation);
+            AddStep("retrieve disc absolute rotation", () => finalAbsoluteDiscRotation = drawableSpinner.RotationTracker.CumulativeRotation);
             AddStep("retrieve spinner symbol rotation", () => finalSpinnerSymbolRotation = spinnerSymbol.Rotation);
 
             addSeekStep(2500);
             AddUntilStep("disc rotation rewound",
                 // we want to make sure that the rotation at time 2500 is in the same direction as at time 5000, but about half-way in.
-                () => Precision.AlmostEquals(drawableSpinner.Disc.Rotation, finalRelativeDiscRotation / 2, 100));
+                () => Precision.AlmostEquals(drawableSpinner.RotationTracker.Rotation, finalRelativeDiscRotation / 2, 100));
             AddUntilStep("symbol rotation rewound",
                 () => Precision.AlmostEquals(spinnerSymbol.Rotation, finalSpinnerSymbolRotation / 2, 100));
 
             addSeekStep(5000);
             AddAssert("is disc rotation almost same",
-                () => Precision.AlmostEquals(drawableSpinner.Disc.Rotation, finalRelativeDiscRotation, 100));
+                () => Precision.AlmostEquals(drawableSpinner.RotationTracker.Rotation, finalRelativeDiscRotation, 100));
             AddAssert("is symbol rotation almost same",
                 () => Precision.AlmostEquals(spinnerSymbol.Rotation, finalSpinnerSymbolRotation, 100));
             AddAssert("is disc rotation absolute almost same",
-                () => Precision.AlmostEquals(drawableSpinner.Disc.CumulativeRotation, finalAbsoluteDiscRotation, 100));
+                () => Precision.AlmostEquals(drawableSpinner.RotationTracker.CumulativeRotation, finalAbsoluteDiscRotation, 100));
         }
 
         [Test]
@@ -115,7 +115,7 @@ namespace osu.Game.Rulesets.Osu.Tests
 
             addSeekStep(5000);
 
-            AddAssert("disc spin direction correct", () => clockwise ? drawableSpinner.Disc.Rotation > 0 : drawableSpinner.Disc.Rotation < 0);
+            AddAssert("disc spin direction correct", () => clockwise ? drawableSpinner.RotationTracker.Rotation > 0 : drawableSpinner.RotationTracker.Rotation < 0);
             AddAssert("spinner symbol direction correct", () => clockwise ? spinnerSymbol.Rotation > 0 : spinnerSymbol.Rotation < 0);
         }
 
@@ -142,7 +142,7 @@ namespace osu.Game.Rulesets.Osu.Tests
             {
                 // multipled by 2 to nullify the score multiplier. (autoplay mod selected)
                 var totalScore = ((ScoreExposedPlayer)Player).ScoreProcessor.TotalScore.Value * 2;
-                return totalScore == (int)(drawableSpinner.Disc.CumulativeRotation / 360) * SpinnerTick.SCORE_PER_TICK;
+                return totalScore == (int)(drawableSpinner.RotationTracker.CumulativeRotation / 360) * SpinnerTick.SCORE_PER_TICK;
             });
 
             addSeekStep(0);

osu.Game.Rulesets.Osu/Mods/OsuModHidden.cs

@@ -82,9 +82,7 @@ namespace osu.Game.Rulesets.Osu.Mods
 
                 case DrawableSpinner spinner:
                     // hide elements we don't care about.
-                    spinner.Disc.Hide();
+                    // todo: hide background
-                    spinner.Ticks.Hide();
-                    spinner.Background.Hide();
 
                     using (spinner.BeginAbsoluteSequence(fadeOutStartTime + longFadeDuration, true))
                         spinner.FadeOut(fadeOutDuration);

osu.Game.Rulesets.Osu/Mods/OsuModSpunOut.cs

@@ -40,8 +40,8 @@ namespace osu.Game.Rulesets.Osu.Mods
         {
             var spinner = (DrawableSpinner)drawable;
 
-            spinner.Disc.Tracking = true;
+            spinner.RotationTracker.Tracking = true;
-            spinner.Disc.Rotate(MathUtils.RadiansToDegrees((float)spinner.Clock.ElapsedFrameTime * 0.03f));
+            spinner.RotationTracker.AddRotation(MathUtils.RadiansToDegrees((float)spinner.Clock.ElapsedFrameTime * 0.03f));
         }
     }
 }

osu.Game.Rulesets.Osu/Mods/OsuModTraceable.cs

@@ -43,6 +43,8 @@ namespace osu.Game.Rulesets.Osu.Mods
 
             var h = drawableOsu.HitObject;
 
+            //todo: expose and hide spinner background somehow
+
             switch (drawable)
             {
                 case DrawableHitCircle circle:
@@ -56,11 +58,6 @@ namespace osu.Game.Rulesets.Osu.Mods
                     slider.Body.OnSkinChanged += () => applySliderState(slider);
                     applySliderState(slider);
                     break;
-
-                case DrawableSpinner spinner:
-                    spinner.Disc.Hide();
-                    spinner.Background.Hide();
-                    break;
             }
         }
 

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

@@ -3,21 +3,18 @@
 
 using System;
 using System.Linq;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Game.Rulesets.Objects.Drawables;
-using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
-using osuTK;
-using osuTK.Graphics;
-using osu.Game.Graphics;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
 using osu.Game.Rulesets.Objects;
-using osu.Framework.Utils;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
 using osu.Game.Rulesets.Scoring;
 using osu.Game.Screens.Ranking;
+using osu.Game.Skinning;
+using osuTK;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables
 {
@@ -27,28 +24,12 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
 
         private readonly Container<DrawableSpinnerTick> ticks;
 
-        public readonly SpinnerDisc Disc;
+        public readonly SpinnerRotationTracker RotationTracker;
-        public readonly SpinnerTicks Ticks;
         public readonly SpinnerSpmCounter SpmCounter;
         private readonly SpinnerBonusDisplay bonusDisplay;
 
-        private readonly Container mainContainer;
-
-        public readonly SpinnerBackground Background;
-        private readonly Container circleContainer;
-        private readonly CirclePiece circle;
-        private readonly GlowPiece glow;
-
-        private readonly SpriteIcon symbol;
-
-        private readonly Color4 baseColour = Color4Extensions.FromHex(@"002c3c");
-        private readonly Color4 fillColour = Color4Extensions.FromHex(@"005b7c");
-
         private readonly IBindable<Vector2> positionBindable = new Bindable<Vector2>();
 
-        private Color4 normalColour;
-        private Color4 completeColour;
-
         public DrawableSpinner(Spinner s)
             : base(s)
         {
@@ -57,66 +38,20 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
 
             RelativeSizeAxes = Axes.Both;
 
-            // we are slightly bigger than our parent, to clip the top and bottom of the circle
-            Height = 1.3f;
-
             Spinner = s;
 
             InternalChildren = new Drawable[]
             {
                 ticks = new Container<DrawableSpinnerTick>(),
-                circleContainer = new Container
+                new AspectContainer
-                {
-                    AutoSizeAxes = Axes.Both,
-                    Anchor = Anchor.Centre,
-                    Origin = Anchor.Centre,
-                    Children = new Drawable[]
-                    {
-                        glow = new GlowPiece(),
-                        circle = new CirclePiece
-                        {
-                            Position = Vector2.Zero,
-                            Anchor = Anchor.Centre,
-                        },
-                        new RingPiece(),
-                        symbol = new SpriteIcon
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                            Size = new Vector2(48),
-                            Icon = FontAwesome.Solid.Asterisk,
-                            Shadow = false,
-                        },
-                    }
-                },
-                mainContainer = new AspectContainer
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
                     RelativeSizeAxes = Axes.Y,
-                    Children = new[]
+                    Children = new Drawable[]
                     {
-                        Background = new SpinnerBackground
+                        new SkinnableDrawable(new OsuSkinComponent(OsuSkinComponents.SpinnerBody), _ => new DefaultSpinnerDisc()),
-                        {
+                        RotationTracker = new SpinnerRotationTracker(Spinner)
-                            Disc =
-                            {
-                                Alpha = 0f,
-                            },
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                        },
-                        Disc = new SpinnerDisc(Spinner)
-                        {
-                            Scale = Vector2.Zero,
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                        },
-                        circleContainer.CreateProxy(),
-                        Ticks = new SpinnerTicks
-                        {
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
-                        },
                     }
                 },
                 SpmCounter = new SpinnerSpmCounter
@@ -147,6 +82,14 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
             }
         }
 
+        protected override void UpdateStateTransforms(ArmedState state)
+        {
+            base.UpdateStateTransforms(state);
+
+            using (BeginDelayedSequence(Spinner.Duration, true))
+                this.FadeOut(160);
+        }
+
         protected override void ClearNestedHitObjects()
         {
             base.ClearNestedHitObjects();
@@ -170,31 +113,20 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            normalColour = baseColour;
-            completeColour = colours.YellowLight;
-
-            Background.AccentColour = normalColour;
-            Ticks.AccentColour = normalColour;
-
-            Disc.AccentColour = fillColour;
-            circle.Colour = colours.BlueDark;
-            glow.Colour = colours.BlueDark;
-
             positionBindable.BindValueChanged(pos => Position = pos.NewValue);
             positionBindable.BindTo(HitObject.PositionBindable);
         }
 
-        public float Progress => Math.Clamp(Disc.CumulativeRotation / 360 / Spinner.SpinsRequired, 0, 1);
+        /// <summary>
+        /// The completion progress of this spinner from 0..1 (clamped).
+        /// </summary>
+        public float Progress => Math.Clamp(RotationTracker.CumulativeRotation / 360 / Spinner.SpinsRequired, 0, 1);
 
         protected override void CheckForResult(bool userTriggered, double timeOffset)
         {
             if (Time.Current < HitObject.StartTime) return;
 
-            if (Progress >= 1 && !Disc.Complete)
+            RotationTracker.Complete.Value = Progress >= 1;
-            {
-                Disc.Complete = true;
-                transformFillColour(completeColour, 200);
-            }
 
             if (userTriggered || Time.Current < Spinner.EndTime)
                 return;
@@ -220,28 +152,18 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
         {
             base.Update();
             if (HandleUserInput)
-                Disc.Tracking = OsuActionInputManager?.PressedActions.Any(x => x == OsuAction.LeftButton || x == OsuAction.RightButton) ?? false;
+                RotationTracker.Tracking = OsuActionInputManager?.PressedActions.Any(x => x == OsuAction.LeftButton || x == OsuAction.RightButton) ?? false;
         }
 
         protected override void UpdateAfterChildren()
         {
             base.UpdateAfterChildren();
 
-            if (!SpmCounter.IsPresent && Disc.Tracking)
+            if (!SpmCounter.IsPresent && RotationTracker.Tracking)
                 SpmCounter.FadeIn(HitObject.TimeFadeIn);
-
+            SpmCounter.SetRotation(RotationTracker.CumulativeRotation);
-            circle.Rotation = Disc.Rotation;
-            Ticks.Rotation = Disc.Rotation;
-
-            SpmCounter.SetRotation(Disc.CumulativeRotation);
 
             updateBonusScore();
-
-            float relativeCircleScale = Spinner.Scale * circle.DrawHeight / mainContainer.DrawHeight;
-            float targetScale = relativeCircleScale + (1 - relativeCircleScale) * Progress;
-            Disc.Scale = new Vector2((float)Interpolation.Lerp(Disc.Scale.X, targetScale, Math.Clamp(Math.Abs(Time.Elapsed) / 100, 0, 1)));
-
-            symbol.Rotation = (float)Interpolation.Lerp(symbol.Rotation, Disc.Rotation / 2, Math.Clamp(Math.Abs(Time.Elapsed) / 40, 0, 1));
         }
 
         private int wholeSpins;
@@ -251,7 +173,7 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
             if (ticks.Count == 0)
                 return;
 
-            int spins = (int)(Disc.CumulativeRotation / 360);
+            int spins = (int)(RotationTracker.CumulativeRotation / 360);
 
             if (spins < wholeSpins)
             {
@@ -275,64 +197,5 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
                 wholeSpins++;
             }
         }
-
-        protected override void UpdateInitialTransforms()
-        {
-            base.UpdateInitialTransforms();
-
-            circleContainer.ScaleTo(0);
-            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(phaseOneScale * circle.DrawHeight / DrawHeight * 1.6f, HitObject.TimePreempt / 4, Easing.OutQuint)
-                    .RotateTo((float)(25 * Spinner.Duration / 2000), HitObject.TimePreempt + Spinner.Duration);
-
-                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);
-
-            using (BeginDelayedSequence(Spinner.Duration, true))
-            {
-                this.FadeOut(160);
-
-                switch (state)
-                {
-                    case ArmedState.Hit:
-                        transformFillColour(completeColour, 0);
-                        this.ScaleTo(Scale * 1.2f, 320, Easing.Out);
-                        mainContainer.RotateTo(mainContainer.Rotation + 180, 320);
-                        break;
-
-                    case ArmedState.Miss:
-                        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/DefaultSpinnerDisc.cs

@@ -0,0 +1,189 @@
+// 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 System;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Utils;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Objects.Drawables;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
+{
+    public class DefaultSpinnerDisc : CompositeDrawable
+    {
+        private DrawableSpinner drawableSpinner;
+
+        private Spinner spinner;
+
+        private const float idle_alpha = 0.2f;
+        private const float tracking_alpha = 0.4f;
+
+        private Color4 normalColour;
+        private Color4 completeColour;
+
+        private SpinnerTicks ticks;
+
+        private int wholeRotationCount;
+
+        private SpinnerFill fill;
+        private Container mainContainer;
+        private SpinnerCentreLayer centre;
+        private SpinnerBackgroundLayer background;
+
+        public DefaultSpinnerDisc()
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            // we are slightly bigger than our parent, to clip the top and bottom of the circle
+            // this should probably be revisited when scaled spinners are a thing.
+            Scale = new Vector2(1.3f);
+
+            Anchor = Anchor.Centre;
+            Origin = Anchor.Centre;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, DrawableHitObject drawableHitObject)
+        {
+            drawableSpinner = (DrawableSpinner)drawableHitObject;
+            spinner = (Spinner)drawableSpinner.HitObject;
+
+            normalColour = colours.BlueDark;
+            completeColour = colours.YellowLight;
+
+            InternalChildren = new Drawable[]
+            {
+                mainContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Children = new Drawable[]
+                    {
+                        background = new SpinnerBackgroundLayer(),
+                        fill = new SpinnerFill
+                        {
+                            Alpha = idle_alpha,
+                            AccentColour = normalColour
+                        },
+                        ticks = new SpinnerTicks
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            AccentColour = normalColour
+                        },
+                    }
+                },
+                centre = new SpinnerCentreLayer
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                },
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            drawableSpinner.RotationTracker.Complete.BindValueChanged(complete => updateComplete(complete.NewValue, 200));
+            drawableSpinner.State.BindValueChanged(updateStateTransforms, true);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            if (drawableSpinner.RotationTracker.Complete.Value)
+            {
+                if (checkNewRotationCount)
+                {
+                    fill.FinishTransforms(false, nameof(Alpha));
+                    fill
+                        .FadeTo(tracking_alpha + 0.2f, 60, Easing.OutExpo)
+                        .Then()
+                        .FadeTo(tracking_alpha, 250, Easing.OutQuint);
+                }
+            }
+            else
+            {
+                fill.Alpha = (float)Interpolation.Damp(fill.Alpha, drawableSpinner.RotationTracker.Tracking ? tracking_alpha : idle_alpha, 0.98f, (float)Math.Abs(Clock.ElapsedFrameTime));
+            }
+
+            const float initial_scale = 0.2f;
+            float targetScale = initial_scale + (1 - initial_scale) * drawableSpinner.Progress;
+
+            fill.Scale = new Vector2((float)Interpolation.Lerp(fill.Scale.X, targetScale, Math.Clamp(Math.Abs(Time.Elapsed) / 100, 0, 1)));
+            mainContainer.Rotation = drawableSpinner.RotationTracker.Rotation;
+        }
+
+        private void updateStateTransforms(ValueChangedEvent<ArmedState> state)
+        {
+            centre.ScaleTo(0);
+            mainContainer.ScaleTo(0);
+
+            using (BeginAbsoluteSequence(spinner.StartTime - spinner.TimePreempt / 2, true))
+            {
+                // constant ambient rotation to give the spinner "spinning" character.
+                this.RotateTo((float)(25 * spinner.Duration / 2000), spinner.TimePreempt + spinner.Duration);
+
+                centre.ScaleTo(0.3f, spinner.TimePreempt / 4, Easing.OutQuint);
+                mainContainer.ScaleTo(0.2f, spinner.TimePreempt / 4, Easing.OutQuint);
+
+                using (BeginDelayedSequence(spinner.TimePreempt / 2, true))
+                {
+                    centre.ScaleTo(0.5f, spinner.TimePreempt / 2, Easing.OutQuint);
+                    mainContainer.ScaleTo(1, spinner.TimePreempt / 2, Easing.OutQuint);
+                }
+            }
+
+            // transforms we have from completing the spinner will be rolled back, so reapply immediately.
+            updateComplete(state.NewValue == ArmedState.Hit, 0);
+
+            using (BeginDelayedSequence(spinner.Duration, true))
+            {
+                switch (state.NewValue)
+                {
+                    case ArmedState.Hit:
+                        this.ScaleTo(Scale * 1.2f, 320, Easing.Out);
+                        this.RotateTo(mainContainer.Rotation + 180, 320);
+                        break;
+
+                    case ArmedState.Miss:
+                        this.ScaleTo(Scale * 0.8f, 320, Easing.In);
+                        break;
+                }
+            }
+        }
+
+        private void updateComplete(bool complete, double duration)
+        {
+            var colour = complete ? completeColour : normalColour;
+
+            ticks.FadeAccent(colour.Darken(1), duration);
+            fill.FadeAccent(colour.Darken(1), duration);
+
+            background.FadeAccent(colour, duration);
+            centre.FadeAccent(colour, duration);
+        }
+
+        private bool checkNewRotationCount
+        {
+            get
+            {
+                int rotations = (int)(drawableSpinner.RotationTracker.CumulativeRotation / 360);
+
+                if (wholeRotationCount == rotations) return false;
+
+                wholeRotationCount = rotations;
+                return true;
+            }
+        }
+    }
+}

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

@@ -10,7 +10,7 @@ using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 {
-    public class SpinnerBackground : CircularContainer, IHasAccentColour
+    public class SpinnerFill : CircularContainer, IHasAccentColour
     {
         public readonly Box Disc;
 
@@ -31,11 +31,14 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
             }
         }
 
-        public SpinnerBackground()
+        public SpinnerFill()
         {
             RelativeSizeAxes = Axes.Both;
             Masking = true;
 
+            Anchor = Anchor.Centre;
+            Origin = Anchor.Centre;
+
             Children = new Drawable[]
             {
                 Disc = new Box

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

@@ -2,76 +2,33 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Input.Events;
-using osu.Game.Graphics;
-using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Utils;
+using osuTK;
 
 namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 {
-    public class SpinnerDisc : CircularContainer, IHasAccentColour
+    public class SpinnerRotationTracker : CircularContainer
     {
         private readonly Spinner spinner;
 
-        public Color4 AccentColour
-        {
-            get => background.AccentColour;
-            set => background.AccentColour = value;
-        }
-
-        private readonly SpinnerBackground background;
-
-        private const float idle_alpha = 0.2f;
-        private const float tracking_alpha = 0.4f;
-
         public override bool IsPresent => true; // handle input when hidden
 
-        public SpinnerDisc(Spinner s)
+        public SpinnerRotationTracker(Spinner s)
         {
             spinner = s;
 
             RelativeSizeAxes = Axes.Both;
-
-            Children = new Drawable[]
-            {
-                background = new SpinnerBackground { Alpha = idle_alpha },
-            };
         }
 
         public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) => true;
 
-        private bool tracking;
+        public bool Tracking { get; set; }
 
-        public bool Tracking
+        public readonly BindableBool Complete = new BindableBool();
-        {
-            get => tracking;
-            set
-            {
-                if (value == tracking) return;
-
-                tracking = value;
-
-                background.FadeTo(tracking ? tracking_alpha : idle_alpha, 100);
-            }
-        }
-
-        private bool complete;
-
-        public bool Complete
-        {
-            get => complete;
-            set
-            {
-                if (value == complete) return;
-
-                complete = value;
-
-                updateCompleteTick();
-            }
-        }
 
         /// <summary>
         /// The total rotation performed on the spinner disc, disregarding the spin direction.
@@ -84,7 +41,7 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
         /// If the spinner is spun 360 degrees clockwise and then 360 degrees counter-clockwise,
         /// this property will return the value of 720 (as opposed to 0 for <see cref="Drawable.Rotation"/>).
         /// </example>
-        public float CumulativeRotation;
+        public float CumulativeRotation { get; private set; }
 
         /// <summary>
         /// Whether currently in the correct time range to allow spinning.
@@ -101,9 +58,6 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 
         private float lastAngle;
         private float currentRotation;
-        private int completeTick;
-
-        private bool updateCompleteTick() => completeTick != (completeTick = (int)(CumulativeRotation / 360));
 
         private bool rotationTransferred;
 
@@ -114,20 +68,11 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
 
             var delta = thisAngle - lastAngle;
 
-            if (tracking)
+            if (Tracking)
-                Rotate(delta);
+                AddRotation(delta);
 
             lastAngle = thisAngle;
 
-            if (Complete && updateCompleteTick())
-            {
-                background.FinishTransforms(false, nameof(Alpha));
-                background
-                    .FadeTo(tracking_alpha + 0.2f, 60, Easing.OutExpo)
-                    .Then()
-                    .FadeTo(tracking_alpha, 250, Easing.OutQuint);
-            }
-
             Rotation = (float)Interpolation.Lerp(Rotation, currentRotation / 2, Math.Clamp(Math.Abs(Time.Elapsed) / 40, 0, 1));
         }
 
@@ -138,7 +83,7 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
         /// Will be a no-op if not a valid time to spin.
         /// </remarks>
         /// <param name="angle">The delta angle.</param>
-        public void Rotate(float angle)
+        public void AddRotation(float angle)
         {
             if (!isSpinnableTime)
                 return;

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

@@ -0,0 +1,22 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
+
+namespace osu.Game.Rulesets.Osu.Objects.Drawables
+{
+    public class SpinnerBackgroundLayer : SpinnerFill
+    {
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, DrawableHitObject drawableHitObject)
+        {
+            Disc.Alpha = 0;
+            Anchor = Anchor.Centre;
+            Origin = Anchor.Centre;
+        }
+    }
+}

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

@@ -0,0 +1,71 @@
+// 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 System;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Utils;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Osu.Objects.Drawables
+{
+    public class SpinnerCentreLayer : CompositeDrawable, IHasAccentColour
+    {
+        private DrawableSpinner spinner;
+
+        private CirclePiece circle;
+        private GlowPiece glow;
+        private SpriteIcon symbol;
+
+        [BackgroundDependencyLoader]
+        private void load(DrawableHitObject drawableHitObject)
+        {
+            spinner = (DrawableSpinner)drawableHitObject;
+
+            InternalChildren = new Drawable[]
+            {
+                glow = new GlowPiece(),
+                circle = new CirclePiece
+                {
+                    Position = Vector2.Zero,
+                    Anchor = Anchor.Centre,
+                },
+                new RingPiece(),
+                symbol = new SpriteIcon
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(48),
+                    Icon = FontAwesome.Solid.Asterisk,
+                    Shadow = false,
+                },
+            };
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+            symbol.Rotation = (float)Interpolation.Lerp(symbol.Rotation, spinner.RotationTracker.Rotation / 2, Math.Clamp(Math.Abs(Time.Elapsed) / 40, 0, 1));
+        }
+
+        private Color4 accentColour;
+
+        public Color4 AccentColour
+        {
+            get => accentColour;
+            set
+            {
+                accentColour = value;
+
+                circle.Colour = accentColour;
+                glow.Colour = accentColour;
+            }
+        }
+    }
+}

osu.Game.Rulesets.Osu/OsuSkinComponents.cs

@@ -17,5 +17,6 @@ namespace osu.Game.Rulesets.Osu
         SliderFollowCircle,
         SliderBall,
         SliderBody,
+        SpinnerBody
     }
 }

osu.Game.Rulesets.Osu/Skinning/LegacyNewStyleSpinner.cs

@@ -0,0 +1,99 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Utils;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects;
+using osu.Game.Rulesets.Osu.Objects.Drawables;
+using osu.Game.Skinning;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Osu.Skinning
+{
+    /// <summary>
+    /// Legacy skinned spinner with two main spinning layers, one fixed overlay and one final spinning overlay.
+    /// No background layer.
+    /// </summary>
+    public class LegacyNewStyleSpinner : CompositeDrawable
+    {
+        private Sprite discBottom;
+        private Sprite discTop;
+        private Sprite spinningMiddle;
+        private Sprite fixedMiddle;
+
+        private DrawableSpinner drawableSpinner;
+
+        private const float final_scale = 0.625f;
+
+        [BackgroundDependencyLoader]
+        private void load(ISkinSource source, DrawableHitObject drawableObject)
+        {
+            drawableSpinner = (DrawableSpinner)drawableObject;
+
+            Scale = new Vector2(final_scale);
+
+            InternalChildren = new Drawable[]
+            {
+                discBottom = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Texture = source.GetTexture("spinner-bottom")
+                },
+                discTop = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Texture = source.GetTexture("spinner-top")
+                },
+                fixedMiddle = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Texture = source.GetTexture("spinner-middle")
+                },
+                spinningMiddle = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Texture = source.GetTexture("spinner-middle2")
+                }
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            this.FadeOut();
+            drawableSpinner.State.BindValueChanged(updateStateTransforms, true);
+        }
+
+        private void updateStateTransforms(ValueChangedEvent<ArmedState> state)
+        {
+            var spinner = (Spinner)drawableSpinner.HitObject;
+
+            using (BeginAbsoluteSequence(spinner.StartTime - spinner.TimePreempt / 2, true))
+                this.FadeInFromZero(spinner.TimePreempt / 2);
+
+            fixedMiddle.FadeColour(Color4.White);
+            using (BeginAbsoluteSequence(spinner.StartTime, true))
+                fixedMiddle.FadeColour(Color4.Red, spinner.Duration);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+            spinningMiddle.Rotation = discTop.Rotation = drawableSpinner.RotationTracker.Rotation;
+            discBottom.Rotation = discTop.Rotation / 3;
+
+            Scale = new Vector2(final_scale * (0.8f + (float)Interpolation.ApplyEasing(Easing.Out, drawableSpinner.Progress) * 0.2f));
+        }
+    }
+}

osu.Game.Rulesets.Osu/Skinning/LegacyOldStyleSpinner.cs

@@ -0,0 +1,114 @@
+// 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 System;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Utils;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables;
+using osu.Game.Skinning;
+using osuTK;
+
+namespace osu.Game.Rulesets.Osu.Skinning
+{
+    /// <summary>
+    /// Legacy skinned spinner with one main spinning layer and a background layer.
+    /// </summary>
+    public class LegacyOldStyleSpinner : CompositeDrawable
+    {
+        private DrawableSpinner drawableSpinner;
+        private Sprite disc;
+        private Container metre;
+
+        private const float background_y_offset = 20;
+
+        private const float sprite_scale = 1 / 1.6f;
+
+        [BackgroundDependencyLoader]
+        private void load(ISkinSource source, DrawableHitObject drawableObject)
+        {
+            drawableSpinner = (DrawableSpinner)drawableObject;
+
+            RelativeSizeAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
+            {
+                new Sprite
+                {
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.BottomCentre,
+                    Texture = source.GetTexture("spinner-background"),
+                    Y = background_y_offset,
+                    Scale = new Vector2(sprite_scale)
+                },
+                disc = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Texture = source.GetTexture("spinner-circle"),
+                    Scale = new Vector2(sprite_scale)
+                },
+                metre = new Container
+                {
+                    Anchor = Anchor.BottomCentre,
+                    Origin = Anchor.BottomCentre,
+                    Y = background_y_offset,
+                    Masking = true,
+                    Child = new Sprite
+                    {
+                        Texture = source.GetTexture("spinner-metre"),
+                        Anchor = Anchor.BottomCentre,
+                        Origin = Anchor.BottomCentre,
+                    },
+                    Scale = new Vector2(0.625f)
+                }
+            };
+        }
+
+        private Vector2 metreFinalSize;
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            this.FadeOut();
+            drawableSpinner.State.BindValueChanged(updateStateTransforms, true);
+
+            metreFinalSize = metre.Size = metre.Child.Size;
+        }
+
+        private void updateStateTransforms(ValueChangedEvent<ArmedState> state)
+        {
+            var spinner = drawableSpinner.HitObject;
+
+            using (BeginAbsoluteSequence(spinner.StartTime - spinner.TimePreempt / 2, true))
+                this.FadeInFromZero(spinner.TimePreempt / 2);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+            disc.Rotation = drawableSpinner.RotationTracker.Rotation;
+            metre.Height = getMetreHeight(drawableSpinner.Progress);
+        }
+
+        private const int total_bars = 10;
+
+        private float getMetreHeight(float progress)
+        {
+            progress = Math.Min(99, progress * 100);
+
+            int barCount = (int)progress / 10;
+
+            // todo: add SpinnerNoBlink support
+            if (RNG.NextBool(((int)progress % 10) / 10f))
+                barCount++;
+
+            return (float)barCount / total_bars * metreFinalSize.Y;
+        }
+    }
+}

osu.Game.Rulesets.Osu/Skinning/OsuLegacySkinTransformer.cs

@@ -102,6 +102,16 @@ namespace osu.Game.Rulesets.Osu.Skinning
                             Scale = new Vector2(0.8f),
                             Spacing = new Vector2(-overlap, 0)
                         };
+
+                case OsuSkinComponents.SpinnerBody:
+                    bool hasBackground = Source.GetTexture("spinner-background") != null;
+
+                    if (Source.GetTexture("spinner-top") != null && !hasBackground)
+                        return new LegacyNewStyleSpinner();
+                    else if (hasBackground)
+                        return new LegacyOldStyleSpinner();
+
+                    return null;
             }
 
             return null;