Add arc-shaped progress bars to "argon" spinner

osu.Game.Rulesets.Osu/Skinning/Argon/ArgonSpinnerDisc.cs

@@ -16,7 +16,6 @@ using osu.Game.Rulesets.Osu.Objects;
 using osu.Game.Rulesets.Osu.Objects.Drawables;
 using osu.Game.Rulesets.Osu.Skinning.Default;
 using osuTK;
-using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Osu.Skinning.Argon
 {
@@ -52,6 +51,9 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
         private Container centre = null!;
         private CircularContainer fill = null!;
 
+        private Container ticksContainer = null!;
+        private ArgonSpinnerTicks ticks = null!;
+
         [BackgroundDependencyLoader]
         private void load(DrawableHitObject drawableHitObject)
         {
@@ -70,41 +72,84 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
                     RelativeSizeAxes = Axes.Both,
                     Children = new Drawable[]
                     {
-                        fill = new CircularContainer
+                        new Container
                         {
-                            Name = @"Fill",
-                            Anchor = Anchor.Centre,
-                            Origin = Anchor.Centre,
                             RelativeSizeAxes = Axes.Both,
-                            Masking = true,
+                            Padding = new MarginPadding(8f),
-                            EdgeEffect = new EdgeEffectParameters
+                            Children = new[]
                             {
-                                Type = EdgeEffectType.Shadow,
+                                fill = new CircularContainer
-                                Colour = Colour4.FromHex("FC618F").Opacity(1f),
+                                {
-                                Radius = 40,
+                                    Name = @"Fill",
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    RelativeSizeAxes = Axes.Both,
+                                    Masking = true,
+                                    EdgeEffect = new EdgeEffectParameters
+                                    {
+                                        Type = EdgeEffectType.Shadow,
+                                        Colour = Colour4.FromHex("FC618F").Opacity(1f),
+                                        Radius = 40,
+                                    },
+                                    Child = new Box
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Alpha = 0f,
+                                        AlwaysPresent = true,
+                                    }
+                                },
+                                new Container
+                                {
+                                    Name = @"Ring",
+                                    Masking = true,
+                                    RelativeSizeAxes = Axes.Both,
+                                    Children = new[]
+                                    {
+                                        new ArgonSpinnerRingArc
+                                        {
+                                            Anchor = Anchor.Centre,
+                                            Origin = Anchor.Centre,
+                                            Name = "Top Arc",
+                                        },
+                                        new ArgonSpinnerRingArc
+                                        {
+                                            Anchor = Anchor.Centre,
+                                            Origin = Anchor.Centre,
+                                            Name = "Bottom Arc",
+                                            Scale = new Vector2(1, -1),
+                                        },
+                                    }
+                                },
+                                ticksContainer = new Container
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    RelativeSizeAxes = Axes.Both,
+                                    Child = ticks = new ArgonSpinnerTicks(),
+                                }
                             },
-                            Child = new Box
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Alpha = 0f,
-                                AlwaysPresent = true,
-                            }
                         },
-                        new CircularContainer
+                        new Container
                         {
-                            Name = @"Ring",
+                            Name = @"Sides",
-                            Masking = true,
-                            BorderColour = Color4.White,
-                            BorderThickness = 5,
                             RelativeSizeAxes = Axes.Both,
-                            Child = new Box
+                            Children = new[]
                             {
-                                RelativeSizeAxes = Axes.Both,
+                                new ArgonSpinnerProgressArc
-                                Alpha = 0,
+                                {
-                                AlwaysPresent = true,
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Name = "Left Bar"
+                                },
+                                new ArgonSpinnerProgressArc
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Name = "Right Bar",
+                                    Scale = new Vector2(-1, 1),
+                                },
                             }
                         },
-                        new ArgonSpinnerTicks(),
                     }
                 },
                 centre = new Container
@@ -167,7 +212,7 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
             float targetScale = initial_fill_scale + (0.98f - initial_fill_scale) * drawableSpinner.Progress;
 
             fill.Scale = new Vector2((float)Interpolation.Lerp(fill.Scale.X, targetScale, Math.Clamp(Math.Abs(Time.Elapsed) / 100, 0, 1)));
-            disc.Rotation = drawableSpinner.RotationTracker.Rotation;
+            ticks.Rotation = drawableSpinner.RotationTracker.Rotation;
         }
 
         private void updateStateTransforms(DrawableHitObject drawableHitObject, ArmedState state)
@@ -180,12 +225,12 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
             using (BeginAbsoluteSequence(spinner.StartTime - spinner.TimePreempt))
             {
                 this.ScaleTo(initial_scale);
-                this.RotateTo(0);
+                ticksContainer.RotateTo(0);
 
                 using (BeginDelayedSequence(spinner.TimePreempt / 2))
                 {
                     // constant ambient rotation to give the spinner "spinning" character.
-                    this.RotateTo((float)(25 * spinner.Duration / 2000), spinner.TimePreempt + spinner.Duration);
+                    ticksContainer.RotateTo((float)(25 * spinner.Duration / 2000), spinner.TimePreempt + spinner.Duration);
                 }
 
                 using (BeginDelayedSequence(spinner.TimePreempt + spinner.Duration + drawableHitObject.Result.TimeOffset))
@@ -194,7 +239,7 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
                     {
                         case ArmedState.Hit:
                             this.ScaleTo(initial_scale * 1.2f, 320, Easing.Out);
-                            this.RotateTo(Rotation + 180, 320);
+                            ticksContainer.RotateTo(ticksContainer.Rotation + 180, 320);
                             break;
 
                         case ArmedState.Miss:

osu.Game.Rulesets.Osu/Skinning/Argon/ArgonSpinnerProgressArc.cs

@@ -0,0 +1,67 @@
+// 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.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Utils;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Objects.Drawables;
+using osu.Game.Rulesets.Osu.Objects.Drawables;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Osu.Skinning.Argon
+{
+    public class ArgonSpinnerProgressArc : CompositeDrawable
+    {
+        private const float arc_fill = 0.15f;
+        private const float arc_radius = 0.12f;
+
+        private CircularProgress fill = null!;
+
+        private DrawableSpinner spinner = null!;
+
+        [BackgroundDependencyLoader]
+        private void load(DrawableHitObject drawableHitObject, OsuColour colours)
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            spinner = (DrawableSpinner)drawableHitObject;
+
+            InternalChildren = new Drawable[]
+            {
+                new CircularProgress
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Colour = Color4.White.Opacity(0.25f),
+                    RelativeSizeAxes = Axes.Both,
+                    Current = { Value = arc_fill },
+                    Rotation = 90 - arc_fill * 180,
+                    InnerRadius = arc_radius,
+                    RoundedCaps = true,
+                },
+                fill = new CircularProgress
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.Both,
+                    InnerRadius = arc_radius,
+                    RoundedCaps = true,
+                }
+            };
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            fill.Alpha = (float)Interpolation.DampContinuously(fill.Alpha, spinner.Progress > 0 ? 1 : 0, 120f, (float)Math.Abs(Time.Elapsed));
+            fill.Current.Value = (float)Interpolation.DampContinuously(fill.Current.Value, arc_fill * spinner.Progress, 120f, (float)Math.Abs(Time.Elapsed));
+            fill.Rotation = (float)(90 - fill.Current.Value * 180);
+        }
+    }
+}

osu.Game.Rulesets.Osu/Skinning/Argon/ArgonSpinnerRingArc.cs

@@ -0,0 +1,33 @@
+// 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.Framework.Graphics.Containers;
+using osu.Framework.Graphics.UserInterface;
+
+namespace osu.Game.Rulesets.Osu.Skinning.Argon
+{
+    public class ArgonSpinnerRingArc : CompositeDrawable
+    {
+        private const float arc_fill = 0.31f;
+        private const float arc_radius = 0.02f;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            InternalChild = new CircularProgress
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                RelativeSizeAxes = Axes.Both,
+                Current = { Value = arc_fill },
+                Rotation = -arc_fill * 180,
+                InnerRadius = arc_radius,
+                RoundedCaps = true,
+            };
+        }
+    }
+}