Merge pull request #5776 from peppy/animated-slider-ball

Add slider ball animation support

Co-authored-by: Dan Balasescu <smoogipoo@smgi.me>

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

@@ -10,7 +10,6 @@ using osu.Game.Beatmaps;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Rulesets.Osu.Objects;
 using osu.Game.Rulesets.Osu.Objects.Drawables;
-using osu.Game.Tests.Visual;
 using osuTK;
 using osuTK.Graphics;
 using osu.Game.Rulesets.Mods;
@@ -27,83 +26,96 @@ using osu.Game.Rulesets.Osu.Objects.Drawables.Pieces;
 namespace osu.Game.Rulesets.Osu.Tests
 {
     [TestFixture]
-    public class TestSceneSlider : OsuTestScene
+    public class TestSceneSlider : SkinnableTestScene
     {
         public override IReadOnlyList<Type> RequiredTypes => new[]
         {
+            typeof(Slider),
+            typeof(SliderTick),
+            typeof(SliderTailCircle),
             typeof(SliderBall),
             typeof(SliderBody),
-            typeof(SliderTick),
+            typeof(SnakingSliderBody),
             typeof(DrawableSlider),
             typeof(DrawableSliderTick),
+            typeof(DrawableSliderTail),
+            typeof(DrawableSliderHead),
             typeof(DrawableRepeatPoint),
             typeof(DrawableOsuHitObject)
         };
 
-        private readonly Container content;
+        private Container content;
-        protected override Container<Drawable> Content => 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()
         {
-            base.Content.Add(content = new OsuInputManager(new RulesetInfo { ID = 0 }));
+            AddStep("Big Single", () => SetContents(() => testSimpleBig()));
+            AddStep("Medium Single", () => SetContents(() => testSimpleMedium()));
+            AddStep("Small Single", () => SetContents(() => testSimpleSmall()));
+            AddStep("Big 1 Repeat", () => SetContents(() => testSimpleBig(1)));
+            AddStep("Medium 1 Repeat", () => SetContents(() => testSimpleMedium(1)));
+            AddStep("Small 1 Repeat", () => SetContents(() => testSimpleSmall(1)));
+            AddStep("Big 2 Repeats", () => SetContents(() => testSimpleBig(2)));
+            AddStep("Medium 2 Repeats", () => SetContents(() => testSimpleMedium(2)));
+            AddStep("Small 2 Repeats", () => SetContents(() => testSimpleSmall(2)));
 
-            AddStep("Big Single", () => testSimpleBig());
+            AddStep("Slow Slider", () => SetContents(testSlowSpeed)); // slow long sliders take ages already so no repeat steps
-            AddStep("Medium Single", () => testSimpleMedium());
+            AddStep("Slow Short Slider", () => SetContents(() => testShortSlowSpeed()));
-            AddStep("Small Single", () => testSimpleSmall());
+            AddStep("Slow Short Slider 1 Repeats", () => SetContents(() => testShortSlowSpeed(1)));
-            AddStep("Big 1 Repeat", () => testSimpleBig(1));
+            AddStep("Slow Short Slider 2 Repeats", () => SetContents(() => testShortSlowSpeed(2)));
-            AddStep("Medium 1 Repeat", () => testSimpleMedium(1));
-            AddStep("Small 1 Repeat", () => testSimpleSmall(1));
-            AddStep("Big 2 Repeats", () => testSimpleBig(2));
-            AddStep("Medium 2 Repeats", () => testSimpleMedium(2));
-            AddStep("Small 2 Repeats", () => testSimpleSmall(2));
 
-            AddStep("Slow Slider", testSlowSpeed); // slow long sliders take ages already so no repeat steps
+            AddStep("Fast Slider", () => SetContents(() => testHighSpeed()));
-            AddStep("Slow Short Slider", () => testShortSlowSpeed());
+            AddStep("Fast Slider 1 Repeat", () => SetContents(() => testHighSpeed(1)));
-            AddStep("Slow Short Slider 1 Repeats", () => testShortSlowSpeed(1));
+            AddStep("Fast Slider 2 Repeats", () => SetContents(() => testHighSpeed(2)));
-            AddStep("Slow Short Slider 2 Repeats", () => testShortSlowSpeed(2));
+            AddStep("Fast Short Slider", () => SetContents(() => testShortHighSpeed()));
+            AddStep("Fast Short Slider 1 Repeat", () => SetContents(() => testShortHighSpeed(1)));
+            AddStep("Fast Short Slider 2 Repeats", () => SetContents(() => testShortHighSpeed(2)));
+            AddStep("Fast Short Slider 6 Repeats", () => SetContents(() => testShortHighSpeed(6)));
 
-            AddStep("Fast Slider", () => testHighSpeed());
+            AddStep("Perfect Curve", () => SetContents(() => testPerfect()));
-            AddStep("Fast Slider 1 Repeat", () => testHighSpeed(1));
+            AddStep("Perfect Curve 1 Repeat", () => SetContents(() => testPerfect(1)));
-            AddStep("Fast Slider 2 Repeats", () => testHighSpeed(2));
+            AddStep("Perfect Curve 2 Repeats", () => SetContents(() => testPerfect(2)));
-            AddStep("Fast Short Slider", () => testShortHighSpeed());
-            AddStep("Fast Short Slider 1 Repeat", () => testShortHighSpeed(1));
-            AddStep("Fast Short Slider 2 Repeats", () => testShortHighSpeed(2));
-            AddStep("Fast Short Slider 6 Repeats", () => testShortHighSpeed(6));
 
-            AddStep("Perfect Curve", () => testPerfect());
+            AddStep("Linear Slider", () => SetContents(() => testLinear()));
-            AddStep("Perfect Curve 1 Repeat", () => testPerfect(1));
+            AddStep("Linear Slider 1 Repeat", () => SetContents(() => testLinear(1)));
-            AddStep("Perfect Curve 2 Repeats", () => testPerfect(2));
+            AddStep("Linear Slider 2 Repeats", () => SetContents(() => testLinear(2)));
 
-            AddStep("Linear Slider", () => testLinear());
+            AddStep("Bezier Slider", () => SetContents(() => testBezier()));
-            AddStep("Linear Slider 1 Repeat", () => testLinear(1));
+            AddStep("Bezier Slider 1 Repeat", () => SetContents(() => testBezier(1)));
-            AddStep("Linear Slider 2 Repeats", () => testLinear(2));
+            AddStep("Bezier Slider 2 Repeats", () => SetContents(() => testBezier(2)));
 
-            AddStep("Bezier Slider", () => testBezier());
+            AddStep("Linear Overlapping", () => SetContents(() => testLinearOverlapping()));
-            AddStep("Bezier Slider 1 Repeat", () => testBezier(1));
+            AddStep("Linear Overlapping 1 Repeat", () => SetContents(() => testLinearOverlapping(1)));
-            AddStep("Bezier Slider 2 Repeats", () => testBezier(2));
+            AddStep("Linear Overlapping 2 Repeats", () => SetContents(() => testLinearOverlapping(2)));
 
-            AddStep("Linear Overlapping", () => testLinearOverlapping());
+            AddStep("Catmull Slider", () => SetContents(() => testCatmull()));
-            AddStep("Linear Overlapping 1 Repeat", () => testLinearOverlapping(1));
+            AddStep("Catmull Slider 1 Repeat", () => SetContents(() => testCatmull(1)));
-            AddStep("Linear Overlapping 2 Repeats", () => testLinearOverlapping(2));
+            AddStep("Catmull Slider 2 Repeats", () => SetContents(() => testCatmull(2)));
 
-            AddStep("Catmull Slider", () => testCatmull());
+            AddStep("Big Single, Large StackOffset", () => SetContents(() => testSimpleBigLargeStackOffset()));
-            AddStep("Catmull Slider 1 Repeat", () => testCatmull(1));
+            AddStep("Big 1 Repeat, Large StackOffset", () => SetContents(() => testSimpleBigLargeStackOffset(1)));
-            AddStep("Catmull Slider 2 Repeats", () => testCatmull(2));
 
-            AddStep("Big Single, Large StackOffset", () => testSimpleBigLargeStackOffset());
+            AddStep("Distance Overflow", () => SetContents(() => testDistanceOverflow()));
-            AddStep("Big 1 Repeat, Large StackOffset", () => testSimpleBigLargeStackOffset(1));
+            AddStep("Distance Overflow 1 Repeat", () => SetContents(() => testDistanceOverflow(1)));
-
-            AddStep("Distance Overflow", () => testDistanceOverflow());
-            AddStep("Distance Overflow 1 Repeat", () => testDistanceOverflow(1));
         }
 
-        private void testSimpleBig(int repeats = 0) => createSlider(2, repeats: repeats);
+        private Drawable testSimpleBig(int repeats = 0) => createSlider(2, repeats: repeats);
 
-        private void testSimpleBigLargeStackOffset(int repeats = 0) => createSlider(2, repeats: repeats, stackHeight: 10);
+        private Drawable testSimpleBigLargeStackOffset(int repeats = 0) => createSlider(2, repeats: repeats, stackHeight: 10);
 
-        private void testDistanceOverflow(int repeats = 0)
+        private Drawable testDistanceOverflow(int repeats = 0)
         {
             var slider = new Slider
             {
@@ -120,22 +132,22 @@ namespace osu.Game.Rulesets.Osu.Tests
                 StackHeight = 10
             };
 
-            addSlider(slider, 2, 2);
+            return createDrawable(slider, 2, 2);
         }
 
-        private void testSimpleMedium(int repeats = 0) => createSlider(5, repeats: repeats);
+        private Drawable testSimpleMedium(int repeats = 0) => createSlider(5, repeats: repeats);
 
-        private void testSimpleSmall(int repeats = 0) => createSlider(7, repeats: repeats);
+        private Drawable testSimpleSmall(int repeats = 0) => createSlider(7, repeats: repeats);
 
-        private void testSlowSpeed() => createSlider(speedMultiplier: 0.5);
+        private Drawable testSlowSpeed() => createSlider(speedMultiplier: 0.5);
 
-        private void testShortSlowSpeed(int repeats = 0) => createSlider(distance: 100, repeats: repeats, speedMultiplier: 0.5);
+        private Drawable testShortSlowSpeed(int repeats = 0) => createSlider(distance: 100, repeats: repeats, speedMultiplier: 0.5);
 
-        private void testHighSpeed(int repeats = 0) => createSlider(repeats: repeats, speedMultiplier: 15);
+        private Drawable testHighSpeed(int repeats = 0) => createSlider(repeats: repeats, speedMultiplier: 15);
 
-        private void testShortHighSpeed(int repeats = 0) => createSlider(distance: 100, repeats: repeats, speedMultiplier: 15);
+        private Drawable testShortHighSpeed(int repeats = 0) => createSlider(distance: 100, repeats: repeats, speedMultiplier: 15);
 
-        private void createSlider(float circleSize = 2, float distance = 400, int repeats = 0, double speedMultiplier = 2, int stackHeight = 0)
+        private Drawable createSlider(float circleSize = 2, float distance = 400, int repeats = 0, double speedMultiplier = 2, int stackHeight = 0)
         {
             var slider = new Slider
             {
@@ -151,10 +163,10 @@ namespace osu.Game.Rulesets.Osu.Tests
                 StackHeight = stackHeight
             };
 
-            addSlider(slider, circleSize, speedMultiplier);
+            return createDrawable(slider, circleSize, speedMultiplier);
         }
 
-        private void testPerfect(int repeats = 0)
+        private Drawable testPerfect(int repeats = 0)
         {
             var slider = new Slider
             {
@@ -170,12 +182,12 @@ namespace osu.Game.Rulesets.Osu.Tests
                 NodeSamples = createEmptySamples(repeats)
             };
 
-            addSlider(slider, 2, 3);
+            return createDrawable(slider, 2, 3);
         }
 
-        private void testLinear(int repeats = 0) => createLinear(repeats);
+        private Drawable testLinear(int repeats = 0) => createLinear(repeats);
 
-        private void createLinear(int repeats)
+        private Drawable createLinear(int repeats)
         {
             var slider = new Slider
             {
@@ -194,12 +206,12 @@ namespace osu.Game.Rulesets.Osu.Tests
                 NodeSamples = createEmptySamples(repeats)
             };
 
-            addSlider(slider, 2, 3);
+            return createDrawable(slider, 2, 3);
         }
 
-        private void testBezier(int repeats = 0) => createBezier(repeats);
+        private Drawable testBezier(int repeats = 0) => createBezier(repeats);
 
-        private void createBezier(int repeats)
+        private Drawable createBezier(int repeats)
         {
             var slider = new Slider
             {
@@ -217,12 +229,12 @@ namespace osu.Game.Rulesets.Osu.Tests
                 NodeSamples = createEmptySamples(repeats)
             };
 
-            addSlider(slider, 2, 3);
+            return createDrawable(slider, 2, 3);
         }
 
-        private void testLinearOverlapping(int repeats = 0) => createOverlapping(repeats);
+        private Drawable testLinearOverlapping(int repeats = 0) => createOverlapping(repeats);
 
-        private void createOverlapping(int repeats)
+        private Drawable createOverlapping(int repeats)
         {
             var slider = new Slider
             {
@@ -241,12 +253,12 @@ namespace osu.Game.Rulesets.Osu.Tests
                 NodeSamples = createEmptySamples(repeats)
             };
 
-            addSlider(slider, 2, 3);
+            return createDrawable(slider, 2, 3);
         }
 
-        private void testCatmull(int repeats = 0) => createCatmull(repeats);
+        private Drawable testCatmull(int repeats = 0) => createCatmull(repeats);
 
-        private void createCatmull(int repeats = 0)
+        private Drawable createCatmull(int repeats = 0)
         {
             var repeatSamples = new List<List<HitSampleInfo>>();
             for (int i = 0; i < repeats; i++)
@@ -267,7 +279,7 @@ namespace osu.Game.Rulesets.Osu.Tests
                 NodeSamples = repeatSamples
             };
 
-            addSlider(slider, 3, 1);
+            return createDrawable(slider, 3, 1);
         }
 
         private List<List<HitSampleInfo>> createEmptySamples(int repeats)
@@ -278,7 +290,7 @@ namespace osu.Game.Rulesets.Osu.Tests
             return repeatSamples;
         }
 
-        private void addSlider(Slider slider, float circleSize, double speedMultiplier)
+        private Drawable createDrawable(Slider slider, float circleSize, double speedMultiplier)
         {
             var cpi = new ControlPointInfo();
             cpi.DifficultyPoints.Add(new DifficultyControlPoint { SpeedMultiplier = speedMultiplier });
@@ -296,7 +308,7 @@ namespace osu.Game.Rulesets.Osu.Tests
 
             drawable.OnNewResult += onNewResult;
 
-            Add(drawable);
+            return drawable;
         }
 
         private float judgementOffsetDirection = 1;

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

@@ -55,7 +55,6 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
                     Child = new Container
                     {
                         RelativeSizeAxes = Axes.Both,
-                        // TODO: support skin filename animation (sliderb0, sliderb1...)
                         Child = new SkinnableDrawable("Play/osu/sliderball", _ => new DefaultSliderBall()),
                     }
                 }
@@ -168,9 +167,20 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
             return action == OsuAction.LeftButton || action == OsuAction.RightButton;
         }
 
+        private Vector2? lastPosition;
+
         public void UpdateProgress(double completionProgress)
         {
-            Position = slider.CurvePositionAt(completionProgress);
+            var newPos = slider.CurvePositionAt(completionProgress);
+
+            var diff = lastPosition.HasValue ? lastPosition.Value - newPos : newPos - slider.CurvePositionAt(completionProgress + 0.01f);
+            if (diff == Vector2.Zero)
+                return;
+
+            Position = newPos;
+            Rotation = -90 + (float)(-Math.Atan2(diff.X, diff.Y) * 180 / Math.PI);
+
+            lastPosition = newPos;
         }
 
         private class FollowCircleContainer : Container

osu.Game/Skinning/LegacySkin.cs

@@ -1,4 +1,4 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// 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;
@@ -43,6 +43,8 @@ namespace osu.Game.Skinning
         public LegacySkin(SkinInfo skin, IResourceStore<byte[]> storage, AudioManager audioManager)
             : this(skin, new LegacySkinResourceStore<SkinFileInfo>(skin, storage), audioManager, "skin.ini")
         {
+            // defaults should only be applied for non-beatmap skins (which are parsed via this constructor).
+            if (!Configuration.CustomColours.ContainsKey("SliderBall")) Configuration.CustomColours["SliderBall"] = new Color4(2, 170, 255, 255);
         }
 
         private readonly bool hasHitCircle;
@@ -92,8 +94,20 @@ namespace osu.Game.Skinning
                     return null;
 
                 case "Play/osu/sliderball":
-                    if (GetTexture("sliderb") != null)
+                    var sliderBallContent = getAnimation("sliderb", true, true, "");
-                        return new LegacySliderBall();
+
+                    if (sliderBallContent != null)
+                    {
+                        var size = sliderBallContent.Size;
+
+                        sliderBallContent.RelativeSizeAxes = Axes.Both;
+                        sliderBallContent.Size = Vector2.One;
+
+                        return new LegacySliderBall(sliderBallContent)
+                        {
+                            Size = size
+                        };
+                    }
 
                     return null;
 
@@ -180,16 +194,6 @@ namespace osu.Game.Skinning
             return null;
         }
 
-        public class LegacySliderBall : Sprite
-        {
-            [BackgroundDependencyLoader]
-            private void load(ISkinSource skin)
-            {
-                Texture = skin.GetTexture("sliderb");
-                Colour = skin.GetValue<SkinConfiguration, Color4?>(s => s.CustomColours.ContainsKey("SliderBall") ? s.CustomColours["SliderBall"] : (Color4?)null) ?? Color4.White;
-            }
-        }
-
         public override Texture GetTexture(string componentName)
         {
             float ratio = 2;
@@ -344,6 +348,37 @@ namespace osu.Game.Skinning
             }
         }
 
+        public class LegacySliderBall : CompositeDrawable
+        {
+            private readonly Drawable animationContent;
+
+            public LegacySliderBall(Drawable animationContent)
+            {
+                this.animationContent = animationContent;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(ISkinSource skin, DrawableHitObject drawableObject)
+            {
+                animationContent.Colour = skin.GetValue<SkinConfiguration, Color4?>(s => s.CustomColours.ContainsKey("SliderBall") ? s.CustomColours["SliderBall"] : (Color4?)null) ?? Color4.White;
+
+                InternalChildren = new[]
+                {
+                    new Sprite
+                    {
+                        Texture = skin.GetTexture("sliderb-nd"),
+                        Colour = new Color4(5, 5, 5, 255),
+                    },
+                    animationContent,
+                    new Sprite
+                    {
+                        Texture = skin.GetTexture("sliderb-spec"),
+                        Blending = BlendingMode.Additive,
+                    },
+                };
+            }
+        }
+
         public class LegacyMainCirclePiece : CompositeDrawable
         {
             public LegacyMainCirclePiece()