Merge pull request #5753 from EVAST9919/accuracy-bar

Add hit error display

Co-authored-by: Dean Herbert <pe@ppy.sh>
Co-authored-by: Dan Balasescu <smoogipoo@smgi.me>

osu.Game.Tests/Visual/Gameplay/TestSceneBarHitErrorMeter.cs

@@ -0,0 +1,119 @@
+// 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 NUnit.Framework;
+using osu.Game.Rulesets.Objects;
+using osu.Game.Rulesets.Osu.Objects;
+using osu.Game.Rulesets.Taiko.Objects;
+using osu.Game.Rulesets.Mania.Objects;
+using osu.Game.Rulesets.Catch.Objects;
+using System;
+using System.Collections.Generic;
+using osu.Game.Rulesets.Judgements;
+using osu.Game.Rulesets.Scoring;
+using osu.Framework.MathUtils;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Screens.Play.HUD.HitErrorMeters;
+
+namespace osu.Game.Tests.Visual.Gameplay
+{
+    public class TestSceneBarHitErrorMeter : OsuTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(HitErrorMeter),
+        };
+
+        private HitErrorMeter meter;
+        private HitErrorMeter meter2;
+        private HitWindows hitWindows;
+
+        public TestSceneBarHitErrorMeter()
+        {
+            recreateDisplay(new OsuHitWindows(), 5);
+
+            AddRepeatStep("New random judgement", () => newJudgement(), 40);
+
+            AddRepeatStep("New max negative", () => newJudgement(-hitWindows.HalfWindowFor(HitResult.Meh)), 20);
+            AddRepeatStep("New max positive", () => newJudgement(hitWindows.HalfWindowFor(HitResult.Meh)), 20);
+            AddStep("New fixed judgement (50ms)", () => newJudgement(50));
+        }
+
+        [Test]
+        public void TestOsu()
+        {
+            AddStep("OD 1", () => recreateDisplay(new OsuHitWindows(), 1));
+            AddStep("OD 10", () => recreateDisplay(new OsuHitWindows(), 10));
+        }
+
+        [Test]
+        public void TestTaiko()
+        {
+            AddStep("OD 1", () => recreateDisplay(new TaikoHitWindows(), 1));
+            AddStep("OD 10", () => recreateDisplay(new TaikoHitWindows(), 10));
+        }
+
+        [Test]
+        public void TestMania()
+        {
+            AddStep("OD 1", () => recreateDisplay(new ManiaHitWindows(), 1));
+            AddStep("OD 10", () => recreateDisplay(new ManiaHitWindows(), 10));
+        }
+
+        [Test]
+        public void TestCatch()
+        {
+            AddStep("OD 1", () => recreateDisplay(new CatchHitWindows(), 1));
+            AddStep("OD 10", () => recreateDisplay(new CatchHitWindows(), 10));
+        }
+
+        private void recreateDisplay(HitWindows hitWindows, float overallDifficulty)
+        {
+            this.hitWindows = hitWindows;
+
+            hitWindows?.SetDifficulty(overallDifficulty);
+
+            Clear();
+
+            Add(new FillFlowContainer
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Direction = FillDirection.Vertical,
+                AutoSizeAxes = Axes.Both,
+                Children = new[]
+                {
+                    new SpriteText { Text = $@"Great: {hitWindows?.Great}" },
+                    new SpriteText { Text = $@"Good: {hitWindows?.Good}" },
+                    new SpriteText { Text = $@"Meh: {hitWindows?.Meh}" },
+                }
+            });
+
+            Add(meter = new BarHitErrorMeter(hitWindows, true)
+            {
+                Anchor = Anchor.CentreRight,
+                Origin = Anchor.CentreRight,
+            });
+
+            Add(meter2 = new BarHitErrorMeter(hitWindows, false)
+            {
+                Anchor = Anchor.CentreLeft,
+                Origin = Anchor.CentreLeft,
+            });
+        }
+
+        private void newJudgement(double offset = 0)
+        {
+            var judgement = new JudgementResult(new Judgement())
+            {
+                TimeOffset = offset == 0 ? RNG.Next(-150, 150) : offset,
+                Type = HitResult.Perfect,
+            };
+
+            meter.OnNewJudgement(judgement);
+            meter2.OnNewJudgement(judgement);
+        }
+    }
+}

osu.Game/Configuration/OsuConfigManager.cs

@@ -83,6 +83,7 @@ namespace osu.Game.Configuration
             Set(OsuSetting.ShowInterface, true);
             Set(OsuSetting.ShowHealthDisplayWhenCantFail, true);
             Set(OsuSetting.KeyOverlay, false);
+            Set(OsuSetting.ScoreMeter, ScoreMeterType.HitErrorBoth);
 
             Set(OsuSetting.FloatingComments, false);
 
@@ -136,6 +137,7 @@ namespace osu.Game.Configuration
         BlurLevel,
         ShowStoryboard,
         KeyOverlay,
+        ScoreMeter,
         FloatingComments,
         ShowInterface,
         ShowHealthDisplayWhenCantFail,

osu.Game/Configuration/ScoreMeterType.cs

@@ -1,12 +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 System.ComponentModel;
+
 namespace osu.Game.Configuration
 {
     public enum ScoreMeterType
     {
+        [Description("None")]
         None,
-        Colour,
+
-        Error
+        [Description("Hit Error (left)")]
+        HitErrorLeft,
+
+        [Description("Hit Error (right)")]
+        HitErrorRight,
+
+        [Description("Hit Error (both)")]
+        HitErrorBoth,
     }
 }

osu.Game/Overlays/Settings/Sections/Gameplay/GeneralSettings.cs

@@ -44,6 +44,11 @@ namespace osu.Game.Overlays.Settings.Sections.Gameplay
                     LabelText = "Always show key overlay",
                     Bindable = config.GetBindable<bool>(OsuSetting.KeyOverlay)
                 },
+                new SettingsEnumDropdown<ScoreMeterType>
+                {
+                    LabelText = "Score meter type",
+                    Bindable = config.GetBindable<ScoreMeterType>(OsuSetting.ScoreMeter)
+                },
                 new SettingsEnumDropdown<ScoringMode>
                 {
                     LabelText = "Score display mode",

osu.Game/Rulesets/Objects/HitWindows.cs

@@ -65,6 +65,19 @@ namespace osu.Game.Rulesets.Objects
             return HitResult.None;
         }
 
+        /// <summary>
+        /// Retrieves a mapping of <see cref="HitResult"/>s to their half window timing for all allowed <see cref="HitResult"/>s.
+        /// </summary>
+        /// <returns></returns>
+        public IEnumerable<(HitResult result, double length)> GetAllAvailableHalfWindows()
+        {
+            for (var result = HitResult.Meh; result <= HitResult.Perfect; ++result)
+            {
+                if (IsHitResultAllowed(result))
+                    yield return (result, HalfWindowFor(result));
+            }
+        }
+
         /// <summary>
         /// Check whether it is possible to achieve the provided <see cref="HitResult"/>.
         /// </summary>

osu.Game/Screens/Play/HUD/HitErrorDisplay.cs

@@ -0,0 +1,100 @@
+// 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.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Configuration;
+using osu.Game.Rulesets.Judgements;
+using osu.Game.Rulesets.Objects;
+using osu.Game.Rulesets.Scoring;
+using osu.Game.Screens.Play.HUD.HitErrorMeters;
+
+namespace osu.Game.Screens.Play.HUD
+{
+    public class HitErrorDisplay : Container<HitErrorMeter>
+    {
+        private const int fade_duration = 200;
+        private const int margin = 10;
+
+        private readonly Bindable<ScoreMeterType> type = new Bindable<ScoreMeterType>();
+
+        private readonly HitWindows hitWindows;
+
+        private readonly ScoreProcessor processor;
+
+        public HitErrorDisplay(ScoreProcessor processor, HitWindows hitWindows)
+        {
+            this.processor = processor;
+            this.hitWindows = hitWindows;
+
+            RelativeSizeAxes = Axes.Both;
+
+            processor.NewJudgement += onNewJudgement;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuConfigManager config)
+        {
+            config.BindWith(OsuSetting.ScoreMeter, type);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            type.BindValueChanged(typeChanged, true);
+        }
+
+        private void onNewJudgement(JudgementResult result)
+        {
+            foreach (var c in Children)
+                c.OnNewJudgement(result);
+        }
+
+        private void typeChanged(ValueChangedEvent<ScoreMeterType> type)
+        {
+            Children.ForEach(c => c.FadeOut(fade_duration, Easing.OutQuint));
+
+            if (hitWindows == null)
+                return;
+
+            switch (type.NewValue)
+            {
+                case ScoreMeterType.HitErrorBoth:
+                    createBar(false);
+                    createBar(true);
+                    break;
+
+                case ScoreMeterType.HitErrorLeft:
+                    createBar(false);
+                    break;
+
+                case ScoreMeterType.HitErrorRight:
+                    createBar(true);
+                    break;
+            }
+        }
+
+        private void createBar(bool rightAligned)
+        {
+            var display = new BarHitErrorMeter(hitWindows, rightAligned)
+            {
+                Margin = new MarginPadding(margin),
+                Anchor = rightAligned ? Anchor.CentreRight : Anchor.CentreLeft,
+                Origin = rightAligned ? Anchor.CentreRight : Anchor.CentreLeft,
+                Alpha = 0,
+            };
+
+            Add(display);
+            display.FadeInFromZero(fade_duration, Easing.OutQuint);
+        }
+
+        protected override void Dispose(bool isDisposing)
+        {
+            base.Dispose(isDisposing);
+            processor.NewJudgement -= onNewJudgement;
+        }
+    }
+}

osu.Game/Screens/Play/HUD/HitErrorMeters/BarHitErrorMeter.cs

@@ -0,0 +1,284 @@
+// 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.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Judgements;
+using osu.Game.Rulesets.Objects;
+using osu.Game.Rulesets.Scoring;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Screens.Play.HUD.HitErrorMeters
+{
+    public class BarHitErrorMeter : HitErrorMeter
+    {
+        private readonly Anchor alignment;
+
+        private const int arrow_move_duration = 400;
+
+        private const int judgement_line_width = 6;
+
+        private const int bar_height = 200;
+
+        private const int bar_width = 2;
+
+        private const int spacing = 2;
+
+        private const float chevron_size = 8;
+
+        private SpriteIcon arrow;
+
+        private Container colourBarsEarly;
+        private Container colourBarsLate;
+
+        private Container judgementsContainer;
+
+        private double maxHitWindow;
+
+        public BarHitErrorMeter(HitWindows hitWindows, bool rightAligned = false)
+            : base(hitWindows)
+        {
+            alignment = rightAligned ? Anchor.x0 : Anchor.x2;
+
+            AutoSizeAxes = Axes.Both;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            InternalChild = new FillFlowContainer
+            {
+                AutoSizeAxes = Axes.X,
+                Height = bar_height,
+                Direction = FillDirection.Horizontal,
+                Spacing = new Vector2(spacing, 0),
+                Margin = new MarginPadding(2),
+                Children = new Drawable[]
+                {
+                    judgementsContainer = new Container
+                    {
+                        Anchor = Anchor.y1 | alignment,
+                        Origin = Anchor.y1 | alignment,
+                        Width = judgement_line_width,
+                        RelativeSizeAxes = Axes.Y,
+                    },
+                    colourBars = new Container
+                    {
+                        Width = bar_width,
+                        RelativeSizeAxes = Axes.Y,
+                        Anchor = Anchor.y1 | alignment,
+                        Origin = Anchor.y1 | alignment,
+                        Children = new Drawable[]
+                        {
+                            colourBarsEarly = new Container
+                            {
+                                Anchor = Anchor.y1 | alignment,
+                                Origin = alignment,
+                                RelativeSizeAxes = Axes.Both,
+                                Height = 0.5f,
+                                Scale = new Vector2(1, -1),
+                            },
+                            colourBarsLate = new Container
+                            {
+                                Anchor = Anchor.y1 | alignment,
+                                Origin = alignment,
+                                RelativeSizeAxes = Axes.Both,
+                                Height = 0.5f,
+                            },
+                            new SpriteIcon
+                            {
+                                Y = -10,
+                                Size = new Vector2(10),
+                                Icon = FontAwesome.Solid.ShippingFast,
+                                Anchor = Anchor.TopCentre,
+                                Origin = Anchor.TopCentre,
+                            },
+                            new SpriteIcon
+                            {
+                                Y = 10,
+                                Size = new Vector2(10),
+                                Icon = FontAwesome.Solid.Bicycle,
+                                Anchor = Anchor.BottomCentre,
+                                Origin = Anchor.BottomCentre,
+                            }
+                        }
+                    },
+                    new Container
+                    {
+                        Anchor = Anchor.y1 | alignment,
+                        Origin = Anchor.y1 | alignment,
+                        Width = chevron_size,
+                        RelativeSizeAxes = Axes.Y,
+                        Child = arrow = new SpriteIcon
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.Centre,
+                            RelativePositionAxes = Axes.Y,
+                            Y = 0.5f,
+                            Icon = alignment == Anchor.x2 ? FontAwesome.Solid.ChevronRight : FontAwesome.Solid.ChevronLeft,
+                            Size = new Vector2(chevron_size),
+                        }
+                    },
+                }
+            };
+
+            createColourBars(colours);
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            colourBars.Height = 0;
+            colourBars.ResizeHeightTo(1, 800, Easing.OutQuint);
+
+            arrow.Alpha = 0;
+            arrow.Delay(200).FadeInFromZero(600);
+        }
+
+        private void createColourBars(OsuColour colours)
+        {
+            var windows = HitWindows.GetAllAvailableHalfWindows().ToArray();
+
+            maxHitWindow = windows.First().length;
+
+            for (var i = 0; i < windows.Length; i++)
+            {
+                var (result, length) = windows[i];
+
+                colourBarsEarly.Add(createColourBar(result, (float)(length / maxHitWindow), i == 0));
+                colourBarsLate.Add(createColourBar(result, (float)(length / maxHitWindow), i == 0));
+            }
+
+            // a little nub to mark the centre point.
+            var centre = createColourBar(windows.Last().result, 0.01f);
+            centre.Anchor = centre.Origin = Anchor.y1 | (alignment == Anchor.x2 ? Anchor.x0 : Anchor.x2);
+            centre.Width = 2.5f;
+            colourBars.Add(centre);
+
+            Color4 getColour(HitResult result)
+            {
+                switch (result)
+                {
+                    case HitResult.Meh:
+                        return colours.Yellow;
+
+                    case HitResult.Ok:
+                        return colours.Green;
+
+                    case HitResult.Good:
+                        return colours.GreenLight;
+
+                    case HitResult.Great:
+                        return colours.Blue;
+
+                    default:
+                        return colours.BlueLight;
+                }
+            }
+
+            Drawable createColourBar(HitResult result, float height, bool first = false)
+            {
+                var colour = getColour(result);
+
+                if (first)
+                {
+                    // the first bar needs gradient rendering.
+                    const float gradient_start = 0.8f;
+
+                    return new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new Drawable[]
+                        {
+                            new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = getColour(result),
+                                Height = height * gradient_start
+                            },
+                            new Box
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                RelativePositionAxes = Axes.Both,
+                                Colour = ColourInfo.GradientVertical(colour, colour.Opacity(0)),
+                                Y = gradient_start,
+                                Height = height * (1 - gradient_start)
+                            },
+                        }
+                    };
+                }
+
+                return new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colour,
+                    Height = height
+                };
+            }
+        }
+
+        private double floatingAverage;
+        private Container colourBars;
+
+        public override void OnNewJudgement(JudgementResult judgement)
+        {
+            if (!judgement.IsHit)
+                return;
+
+            judgementsContainer.Add(new JudgementLine
+            {
+                Y = getRelativeJudgementPosition(judgement.TimeOffset),
+                Anchor = alignment == Anchor.x2 ? Anchor.x0 : Anchor.x2,
+                Origin = alignment == Anchor.x2 ? Anchor.x0 : Anchor.x2,
+            });
+
+            arrow.MoveToY(
+                getRelativeJudgementPosition(floatingAverage = floatingAverage * 0.9 + judgement.TimeOffset * 0.1)
+                , arrow_move_duration, Easing.Out);
+        }
+
+        private float getRelativeJudgementPosition(double value) => (float)((value / maxHitWindow) + 1) / 2;
+
+        private class JudgementLine : CompositeDrawable
+        {
+            private const int judgement_fade_duration = 10000;
+
+            public JudgementLine()
+            {
+                RelativeSizeAxes = Axes.X;
+                RelativePositionAxes = Axes.Y;
+                Height = 3;
+
+                InternalChild = new CircularContainer
+                {
+                    Masking = true,
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.White,
+                    }
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Width = 0;
+
+                this.ResizeWidthTo(1, 200, Easing.OutElasticHalf);
+                this.FadeTo(0.8f, 150).Then().FadeOut(judgement_fade_duration, Easing.OutQuint).Expire();
+            }
+        }
+    }
+}

osu.Game/Screens/Play/HUD/HitErrorMeters/HitErrorMeter.cs

@@ -0,0 +1,21 @@
+// 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.Containers;
+using osu.Game.Rulesets.Judgements;
+using osu.Game.Rulesets.Objects;
+
+namespace osu.Game.Screens.Play.HUD.HitErrorMeters
+{
+    public abstract class HitErrorMeter : CompositeDrawable
+    {
+        protected readonly HitWindows HitWindows;
+
+        protected HitErrorMeter(HitWindows hitWindows)
+        {
+            HitWindows = hitWindows;
+        }
+
+        public abstract void OnNewJudgement(JudgementResult judgement);
+    }
+}

osu.Game/Screens/Play/HUDOverlay.cs

@@ -3,6 +3,7 @@
 
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
@@ -33,6 +34,7 @@ namespace osu.Game.Screens.Play
         public readonly HealthDisplay HealthDisplay;
         public readonly SongProgress Progress;
         public readonly ModDisplay ModDisplay;
+        public readonly HitErrorDisplay HitErrorDisplay;
         public readonly HoldForMenuButton HoldToQuit;
         public readonly PlayerSettingsOverlay PlayerSettingsOverlay;
 
@@ -84,6 +86,7 @@ namespace osu.Game.Screens.Play
                         HealthDisplay = CreateHealthDisplay(),
                         Progress = CreateProgress(),
                         ModDisplay = CreateModsContainer(),
+                        HitErrorDisplay = CreateHitErrorDisplayOverlay(),
                     }
                 },
                 PlayerSettingsOverlay = CreatePlayerSettingsOverlay(),
@@ -256,6 +259,8 @@ namespace osu.Game.Screens.Play
             Margin = new MarginPadding { Top = 20, Right = 10 },
         };
 
+        protected virtual HitErrorDisplay CreateHitErrorDisplayOverlay() => new HitErrorDisplay(scoreProcessor, drawableRuleset.Objects.FirstOrDefault()?.HitWindows);
+
         protected virtual PlayerSettingsOverlay CreatePlayerSettingsOverlay() => new PlayerSettingsOverlay();
 
         protected virtual void BindProcessor(ScoreProcessor processor)