Ranked play general UI/UX fixes

osu.Game.Rulesets.Osu/Skinning/Default/TrianglesPiece.cs

@@ -9,12 +9,12 @@ namespace osu.Game.Rulesets.Osu.Skinning.Default
     public partial class TrianglesPiece : Triangles
     {
         protected override bool CreateNewTriangles => false;
-        protected override float SpawnRatio => 0.5f;
 
         public TrianglesPiece(int? seed = null)
             : base(seed)
         {
             TriangleScale = 1.2f;
+            SpawnRatio = 0.5f;
             HideAlphaDiscrepancies = false;
             ClampAxes = Axes.None;
         }

osu.Game.Tests/Visual/RankedPlay/TestSceneRankedPlayBackground.cs

@@ -17,7 +17,6 @@ public partial class TestSceneRankedPlayBackground : OsuTestScene
 
         private readonly Bindable<Colour4> gradientOuter = new Bindable<Colour4>(Color4Extensions.FromHex("AC6D97"));
         private readonly Bindable<Colour4> gradientInner = new Bindable<Colour4>(Color4Extensions.FromHex("544483"));
-        private readonly Bindable<Colour4> dots = new Bindable<Colour4>(Color4Extensions.FromHex("D56CF6"));
 
         public TestSceneRankedPlayBackground()
         {
@@ -40,11 +39,6 @@ public TestSceneRankedPlayBackground()
                             Scale = new Vector2(0.4f),
                             Current = gradientInner,
                         },
-                        new BasicColourPicker
-                        {
-                            Scale = new Vector2(0.4f),
-                            Current = dots,
-                        }
                     ]
                 }
             ];
@@ -54,9 +48,8 @@ protected override void LoadComplete()
         {
             base.LoadComplete();
 
-            gradientOuter.BindValueChanged(e => background.GradientOutside = e.NewValue, true);
-            gradientInner.BindValueChanged(e => background.GradientInside = e.NewValue, true);
-            dots.BindValueChanged(e => background.DotsColour = e.NewValue, true);
+            gradientOuter.BindValueChanged(e => background.GradientBottom = e.NewValue, true);
+            gradientInner.BindValueChanged(e => background.GradientTop = e.NewValue, true);
         }
     }
 }

osu.Game/Graphics/Backgrounds/Triangles.cs

@@ -66,7 +66,7 @@ public Color4 ColourDark
         /// <summary>
         /// The amount of triangles we want compared to the default distribution.
         /// </summary>
-        protected virtual float SpawnRatio => 1;
+        public float SpawnRatio { get; set; } = 1;
 
         private readonly BindableFloat triangleScale = new BindableFloat(1f);
 

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Hand/HandOfCards.cs

@@ -11,6 +11,7 @@
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Primitives;
+using osu.Framework.Layout;
 using osu.Game.Online.Multiplayer.MatchTypes.RankedPlay;
 using osu.Game.Online.RankedPlay;
 using osu.Game.Screens.OnlinePlay.Matchmaking.RankedPlay.Card;
@@ -57,6 +58,8 @@ protected HandOfCards()
             {
                 RelativeSizeAxes = Axes.Both,
             });
+
+            AddLayout(layoutBacking);
         }
 
         protected override void Update()
@@ -188,7 +191,7 @@ private static bool affectsDrawOrder(ValueChangedEvent<RankedPlayCardState> evt)
 
         #region Layout
 
-        private readonly Cached layoutBacking = new Cached();
+        private readonly LayoutValue layoutBacking = new LayoutValue(Invalidation.DrawSize | Invalidation.MiscGeometry);
         private readonly Cached drawOrderBacking = new Cached();
 
         /// <summary>

osu.Game/Screens/OnlinePlay/Matchmaking/RankedPlay/Intro/StarRatingSequence.cs

@@ -5,7 +5,6 @@
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
@@ -16,6 +15,7 @@
 using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Screens.OnlinePlay.Matchmaking.RankedPlay.Intro
 {
@@ -25,7 +25,6 @@ public partial class StarRatingSequence : CompositeDrawable
         private Container<StarRatingDisplay> starContainer = null!;
         private Container centerContainer = null!;
         private OsuSpriteText title = null!;
-        private OsuSpriteText creatingMapPool = null!;
         private OsuSpriteText explainer = null!;
 
         private Sample? tickSample;
@@ -38,73 +37,87 @@ public partial class StarRatingSequence : CompositeDrawable
         [BackgroundDependencyLoader]
         private void load(OsuColour colour, AudioManager audio)
         {
-            RelativeSizeAxes = Axes.X;
+            Width = 600;
             AutoSizeAxes = Axes.Y;
             Anchor = Anchor.Centre;
             Origin = Anchor.Centre;
             Alpha = 0;
 
-            Padding = new MarginPadding { Horizontal = 100 };
+            Masking = true;
+            CornerRadius = 10;
 
-            InternalChild = new FillFlowContainer
+            InternalChild = new Container
             {
-                RelativeSizeAxes = Axes.X,
                 AutoSizeAxes = Axes.Y,
-                Direction = FillDirection.Vertical,
-                Children =
-                [
-                    title = new OsuSpriteText
-                    {
-                        Text = "Finding Match Rating...",
-                        Font = OsuFont.Style.Title,
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
-                    },
-                    creatingMapPool = new OsuSpriteText
+                RelativeSizeAxes = Axes.X,
+                Children = new Drawable[]
+                {
+                    new Box
                     {
-                        Text = "Creating a mappool...",
-                        Font = OsuFont.Style.Heading1,
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
-                        Margin = new MarginPadding { Bottom = 30 },
-                        Alpha = 0,
-                        AlwaysPresent = true,
+                        Colour = Color4.Black,
+                        Alpha = 0.2f,
+                        RelativeSizeAxes = Axes.Both,
                     },
-                    centerContainer = new Container
+                    new FillFlowContainer
                     {
                         RelativeSizeAxes = Axes.X,
-                        Height = 90,
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
+                        AutoSizeAxes = Axes.Y,
+                        Padding = new MarginPadding(30),
+                        Spacing = new Vector2(10),
+                        Direction = FillDirection.Vertical,
                         Children =
                         [
-                            bars = new Container<Bar>
+                            title = new OsuSpriteText
                             {
-                                RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding { Top = 30 },
-                                Anchor = Anchor.BottomLeft,
-                                Origin = Anchor.BottomLeft,
+                                Text = "Refining star difficulty range...",
+                                Padding = new MarginPadding { Bottom = 20 },
+                                Font = OsuFont.Style.Title,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
                             },
-                        ]
-                    },
-                    starContainer = new Container<StarRatingDisplay>
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        Height = 20,
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
-                    },
-                    explainer = new OsuSpriteText
-                    {
-                        Text = "There’s still a chance that you get maps outside of the selected match rating!",
-                        Font = OsuFont.Style.Heading2,
-                        Anchor = Anchor.TopCentre,
-                        Origin = Anchor.TopCentre,
-                        Margin = new MarginPadding { Top = 20 },
-                        Alpha = 0,
-                        AlwaysPresent = true,
+                            centerContainer = new Container
+                            {
+                                RelativeSizeAxes = Axes.X,
+                                Height = 90,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Masking = true,
+                                CornerRadius = 8,
+                                Children =
+                                [
+                                    new Box
+                                    {
+                                        Alpha = 0.4f,
+                                        Colour = Color4.Black,
+                                        RelativeSizeAxes = Axes.Both,
+                                    },
+                                    bars = new Container<Bar>
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Padding = new MarginPadding { Top = 40, Horizontal = 3 },
+                                    },
+                                ]
+                            },
+                            starContainer = new Container<StarRatingDisplay>
+                            {
+                                RelativeSizeAxes = Axes.X,
+                                Height = 20,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                            },
+                            explainer = new OsuSpriteText
+                            {
+                                Text = "Difficulty range is calculated to suit the two players.",
+                                Padding = new MarginPadding { Top = 20 },
+                                Font = OsuFont.Style.Heading2,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                                Alpha = 0,
+                                AlwaysPresent = true,
+                            }
+                        ],
                     }
-                ],
+                }
             };
 
             for (int i = 0; i < 100; i++)
@@ -153,28 +166,28 @@ private void load(OsuColour colour, AudioManager audio)
 
         private bool animateGaussianCurve;
 
+        [Resolved]
+        private OsuColour colours { get; set; } = null!;
+
         public void Play(ref double delay, float starRating)
         {
             using (BeginDelayedSequence(delay))
-            {
                 popIn();
-            }
-
-            delay += 500;
 
-            using (BeginDelayedSequence(delay))
+            using (BeginDelayedSequence(delay += 500))
             {
                 Schedule(() => animateGaussianCurve = true);
 
                 this.TransformTo(nameof(starRating), starRating < 5 ? starRating + 4 : starRating - 4);
                 this.TransformTo(nameof(starRating), starRating, 4000, new CubicBezierEasingFunction(easeIn: 0.3, easeOut: 0.5));
                 this.TransformTo(nameof(amplitude), 1f, 4000, new CubicBezierEasingFunction(easeIn: 0.1, easeOut: 0.8));
                 this.TransformTo(nameof(stdDev), 0.3f, 4500, new CubicBezierEasingFunction(easeIn: 0.2, easeOut: 0.7));
-            }
 
-            delay += 5000;
+                explainer.Delay(400)
+                         .FadeIn(200);
+            }
 
-            using (BeginDelayedSequence(delay))
+            using (BeginDelayedSequence(delay += 5000))
             {
                 Schedule(() =>
                 {
@@ -190,8 +203,8 @@ public void Play(ref double delay, float starRating)
                         AutoSizeAxes = Axes.Both,
                         RelativePositionAxes = Axes.X,
                         X = starRating * 0.1f,
-                        Y = 24,
-                        Colour = Color4Extensions.FromHex("#FFE280"),
+                        Y = 34,
+                        Colour = colours.ForStarDifficulty(starRating),
                         Spacing = new Vector2(4, 0),
                         Children =
                         [
@@ -218,14 +231,17 @@ public void Play(ref double delay, float starRating)
                              .ScaleTo(0)
                              .ScaleTo(1, 400, Easing.OutElasticQuarter);
 
-                    title.Text = "Match rating found!";
+                    title.Text = "Star rating has been decided!";
 
-                    creatingMapPool.FadeIn(100);
-                    explainer.Delay(1050).FadeIn(100);
-                    Scheduler.AddDelayed(() =>
+                    using (BeginDelayedSequence(1050))
                     {
-                        noticeSample?.Play();
-                    }, 1050);
+                        explainer.FadeInFromZero(200);
+                        Schedule(() =>
+                        {
+                            explainer.Text = "There's always a chance that you get maps outside this range";
+                            noticeSample?.Play();
+                        });
+                    }
                 });
             }
         }
@@ -279,13 +295,15 @@ protected override void Update()
             if (!animateGaussianCurve)
                 return;
 
+            const float min_alpha = 0.4f;
+
             foreach (var bar in bars)
             {
                 float value = gaussianCurve(bar.StarRating, 1f, starRating, stdDev);
 
                 bar.Height = float.Lerp(0.1f, 1f, value * amplitude);
 
-                float targetAlpha = float.Clamp(0.35f + value * 20f, 0.35f, 1);
+                float targetAlpha = float.Clamp(min_alpha + value * 20f, min_alpha, 1);
 
                 bar.Alpha = float.Lerp(targetAlpha, bar.Alpha, (float)Math.Exp(-0.01f * Time.Elapsed));
             }
@@ -294,7 +312,7 @@ protected override void Update()
             {
                 float value = gaussianCurve(child.X * 10f, 1f, starRating, stdDev);
 
-                float targetAlpha = float.Clamp(0.35f + value * 20f, 0.35f, 1);
+                float targetAlpha = float.Clamp(min_alpha + value * 20f, min_alpha, 1);
 
                 child.Alpha = float.Lerp(targetAlpha, child.Alpha, (float)Math.Exp(-0.01f * Time.Elapsed));
             }