Merge pull request #18523 from peppy/tap-button

Add tap for BPM button

osu.Game.Tests/Visual/Editing/TestSceneTapButton.cs

@@ -0,0 +1,48 @@
+// 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.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Game.Overlays;
+using osu.Game.Screens.Edit.Timing;
+using osuTK;
+using osuTK.Input;
+
+namespace osu.Game.Tests.Visual.Editing
+{
+    public class TestSceneTapButton : OsuManualInputManagerTestScene
+    {
+        private TapButton tapButton;
+
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Aquamarine);
+
+        [Test]
+        public void TestBasic()
+        {
+            AddStep("create button", () =>
+            {
+                Child = tapButton = new TapButton
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Scale = new Vector2(4),
+                };
+            });
+
+            bool pressed = false;
+
+            AddRepeatStep("Press button", () =>
+            {
+                InputManager.MoveMouseTo(tapButton);
+                if (!pressed)
+                    InputManager.PressButton(MouseButton.Left);
+                else
+                    InputManager.ReleaseButton(MouseButton.Left);
+
+                pressed = !pressed;
+            }, 100);
+        }
+    }
+}

osu.Game.Tests/Visual/Editing/TestSceneTapTimingControl.cs

@@ -11,7 +11,7 @@ using osu.Framework.Graphics.Containers;
 using osu.Framework.Testing;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Graphics.Sprites;
-using osu.Game.Graphics.UserInterfaceV2;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Overlays;
 using osu.Game.Screens.Edit;
 using osu.Game.Screens.Edit.Timing;
@@ -77,34 +77,6 @@ namespace osu.Game.Tests.Visual.Editing
                 timingInfo.Text = $"offset: {selectedGroup.Value.Time:N2} bpm: {selectedGroup.Value.ControlPoints.OfType<TimingControlPoint>().First().BPM:N2}";
         }
 
-        [Test]
-        public void TestNoop()
-        {
-            AddStep("do nothing", () => { });
-        }
-
-        [Test]
-        public void TestTapThenReset()
-        {
-            AddStep("click tap button", () =>
-            {
-                control.ChildrenOfType<RoundedButton>()
-                       .Last()
-                       .TriggerClick();
-            });
-
-            AddUntilStep("wait for track playing", () => Clock.IsRunning);
-
-            AddStep("click reset button", () =>
-            {
-                control.ChildrenOfType<RoundedButton>()
-                       .First()
-                       .TriggerClick();
-            });
-
-            AddUntilStep("wait for track stopped", () => !Clock.IsRunning);
-        }
-
         [Test]
         public void TestBasic()
         {
@@ -115,7 +87,7 @@ namespace osu.Game.Tests.Visual.Editing
 
             AddStep("click tap button", () =>
             {
-                control.ChildrenOfType<RoundedButton>()
+                control.ChildrenOfType<OsuButton>()
                        .Last()
                        .TriggerClick();
             });
@@ -129,6 +101,28 @@ namespace osu.Game.Tests.Visual.Editing
             });
         }
 
+        [Test]
+        public void TestTapThenReset()
+        {
+            AddStep("click tap button", () =>
+            {
+                control.ChildrenOfType<OsuButton>()
+                       .Last()
+                       .TriggerClick();
+            });
+
+            AddUntilStep("wait for track playing", () => Clock.IsRunning);
+
+            AddStep("click reset button", () =>
+            {
+                control.ChildrenOfType<OsuButton>()
+                       .First()
+                       .TriggerClick();
+            });
+
+            AddUntilStep("wait for track stopped", () => !Clock.IsRunning);
+        }
+
         protected override void Dispose(bool isDisposing)
         {
             Beatmap.Disabled = false;

osu.Game/Input/Bindings/GlobalActionContainer.cs

@@ -80,6 +80,7 @@ namespace osu.Game.Input.Bindings
             new KeyBinding(new[] { InputKey.K }, GlobalAction.EditorNudgeRight),
             new KeyBinding(new[] { InputKey.G }, GlobalAction.EditorCycleGridDisplayMode),
             new KeyBinding(new[] { InputKey.F5 }, GlobalAction.EditorTestGameplay),
+            new KeyBinding(new[] { InputKey.T }, GlobalAction.EditorTapForBPM),
             new KeyBinding(new[] { InputKey.Control, InputKey.H }, GlobalAction.EditorFlipHorizontally),
             new KeyBinding(new[] { InputKey.Control, InputKey.J }, GlobalAction.EditorFlipVertically),
             new KeyBinding(new[] { InputKey.Control, InputKey.Alt, InputKey.MouseWheelDown }, GlobalAction.EditorDecreaseDistanceSpacing),
@@ -322,5 +323,8 @@ namespace osu.Game.Input.Bindings
 
         [LocalisableDescription(typeof(GlobalActionKeyBindingStrings), nameof(GlobalActionKeyBindingStrings.DeselectAllMods))]
         DeselectAllMods,
+
+        [LocalisableDescription(typeof(GlobalActionKeyBindingStrings), nameof(GlobalActionKeyBindingStrings.EditorTapForBPM))]
+        EditorTapForBPM,
     }
 }

osu.Game/Localisation/GlobalActionKeyBindingStrings.cs

@@ -174,6 +174,11 @@ namespace osu.Game.Localisation
         /// </summary>
         public static LocalisableString EditorTimingMode => new TranslatableString(getKey(@"editor_timing_mode"), @"Timing mode");
 
+        /// <summary>
+        /// "Tap for BPM"
+        /// </summary>
+        public static LocalisableString EditorTapForBPM => new TranslatableString(getKey(@"editor_tap_for_bpm"), @"Tap for BPM");
+
         /// <summary>
         /// "Cycle grid display mode"
         /// </summary>

osu.Game/Screens/Edit/Timing/GroupSection.cs

@@ -37,7 +37,7 @@ namespace osu.Game.Screens.Edit.Timing
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
-            Padding = new MarginPadding(10);
+            Padding = new MarginPadding(10) { Bottom = 0 };
 
             InternalChildren = new Drawable[]
             {

osu.Game/Screens/Edit/Timing/MetronomeDisplay.cs

@@ -38,6 +38,8 @@ namespace osu.Game.Screens.Edit.Timing
         [Resolved]
         private OverlayColourProvider overlayColourProvider { get; set; }
 
+        public bool EnableClicking { get; set; } = true;
+
         [BackgroundDependencyLoader]
         private void load(AudioManager audio)
         {
@@ -281,6 +283,9 @@ namespace osu.Game.Screens.Edit.Timing
 
                     Schedule(() =>
                     {
+                        if (!EnableClicking)
+                            return;
+
                         var channel = clunk?.GetChannel();
 
                         if (channel != null)

osu.Game/Screens/Edit/Timing/Section.cs

@@ -77,7 +77,7 @@ namespace osu.Game.Screens.Edit.Timing
                     {
                         Flow = new FillFlowContainer
                         {
-                            Padding = new MarginPadding(20),
+                            Padding = new MarginPadding(10) { Top = 0 },
                             Spacing = new Vector2(20),
                             RelativeSizeAxes = Axes.X,
                             AutoSizeAxes = Axes.Y,

osu.Game/Screens/Edit/Timing/TapButton.cs

@@ -0,0 +1,418 @@
+// 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.
+
+#nullable enable
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Input.Bindings;
+using osu.Framework.Input.Events;
+using osu.Framework.Threading;
+using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Input.Bindings;
+using osu.Game.Overlays;
+using osuTK;
+using osuTK.Graphics;
+using osuTK.Input;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal class TapButton : CircularContainer, IKeyBindingHandler<GlobalAction>
+    {
+        public const float SIZE = 140;
+
+        public readonly BindableBool IsHandlingTapping = new BindableBool();
+
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; } = null!;
+
+        [Resolved(canBeNull: true)]
+        private Bindable<ControlPointGroup>? selectedGroup { get; set; }
+
+        [Resolved(canBeNull: true)]
+        private IBeatSyncProvider? beatSyncSource { get; set; }
+
+        private Circle hoverLayer = null!;
+
+        private CircularContainer innerCircle = null!;
+        private Box innerCircleHighlight = null!;
+
+        private int currentLight;
+
+        private Container scaleContainer = null!;
+        private Container lights = null!;
+        private Container lightsGlow = null!;
+        private OsuSpriteText bpmText = null!;
+        private Container textContainer = null!;
+
+        private bool grabbedMouseDown;
+
+        private ScheduledDelegate? resetDelegate;
+
+        private const int light_count = 8;
+
+        private const int initial_taps_to_ignore = 4;
+
+        private const int max_taps_to_consider = 128;
+
+        private const double transition_length = 500;
+
+        private const float angular_light_gap = 0.007f;
+
+        private readonly List<double> tapTimings = new List<double>();
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Size = new Vector2(SIZE);
+
+            const float ring_width = 22;
+            const float light_padding = 3;
+
+            InternalChild = scaleContainer = new Container
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                RelativeSizeAxes = Axes.Both,
+                Children = new Drawable[]
+                {
+                    new Circle
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = colourProvider.Background4
+                    },
+                    lights = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    new CircularContainer
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Name = @"outer masking",
+                        Masking = true,
+                        BorderThickness = light_padding,
+                        BorderColour = colourProvider.Background4,
+                        Children = new Drawable[]
+                        {
+                            new Box
+                            {
+                                Colour = Color4.Black,
+                                RelativeSizeAxes = Axes.Both,
+                                Alpha = 0,
+                                AlwaysPresent = true,
+                            },
+                        }
+                    },
+                    new Circle
+                    {
+                        Name = @"inner masking",
+                        Size = new Vector2(SIZE - ring_width * 2 + light_padding * 2),
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Colour = colourProvider.Background4,
+                    },
+                    lightsGlow = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    innerCircle = new CircularContainer
+                    {
+                        Size = new Vector2(SIZE - ring_width * 2),
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Masking = true,
+                        Children = new Drawable[]
+                        {
+                            new Box
+                            {
+                                Colour = colourProvider.Background2,
+                                RelativeSizeAxes = Axes.Both,
+                            },
+                            innerCircleHighlight = new Box
+                            {
+                                Colour = colourProvider.Colour3,
+                                Blending = BlendingParameters.Additive,
+                                RelativeSizeAxes = Axes.Both,
+                                Alpha = 0,
+                            },
+                            textContainer = new Container
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = colourProvider.Background1,
+                                Children = new Drawable[]
+                                {
+                                    new OsuSpriteText
+                                    {
+                                        Font = OsuFont.Torus.With(size: 34, weight: FontWeight.SemiBold),
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.BottomCentre,
+                                        Y = 5,
+                                        Text = "Tap",
+                                    },
+                                    bpmText = new OsuSpriteText
+                                    {
+                                        Font = OsuFont.Torus.With(size: 23, weight: FontWeight.Regular),
+                                        Anchor = Anchor.Centre,
+                                        Origin = Anchor.TopCentre,
+                                        Y = -1,
+                                    },
+                                }
+                            },
+                            hoverLayer = new Circle
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Colour = colourProvider.Background1.Opacity(0.3f),
+                                Blending = BlendingParameters.Additive,
+                                Alpha = 0,
+                            },
+                        }
+                    },
+                }
+            };
+
+            for (int i = 0; i < light_count; i++)
+            {
+                var light = new Light
+                {
+                    Rotation = (i + 1) * (360f / light_count) + 360 * angular_light_gap / 2,
+                };
+
+                lights.Add(light);
+                lightsGlow.Add(light.Glow.CreateProxy());
+            }
+
+            reset();
+        }
+
+        public override bool ReceivePositionalInputAt(Vector2 screenSpacePos) =>
+            hoverLayer.ReceivePositionalInputAt(screenSpacePos);
+
+        private ColourInfo textColour
+        {
+            get
+            {
+                if (grabbedMouseDown)
+                    return colourProvider.Background4;
+
+                if (IsHovered)
+                    return colourProvider.Content2;
+
+                return colourProvider.Background1;
+            }
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            hoverLayer.FadeIn(transition_length, Easing.OutQuint);
+            textContainer.FadeColour(textColour, transition_length, Easing.OutQuint);
+            return true;
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            hoverLayer.FadeOut(transition_length, Easing.OutQuint);
+            textContainer.FadeColour(textColour, transition_length, Easing.OutQuint);
+            base.OnHoverLost(e);
+        }
+
+        protected override bool OnMouseDown(MouseDownEvent e)
+        {
+            const double in_duration = 100;
+
+            grabbedMouseDown = true;
+            IsHandlingTapping.Value = true;
+
+            resetDelegate?.Cancel();
+
+            handleTap();
+
+            textContainer.FadeColour(textColour, in_duration, Easing.OutQuint);
+
+            scaleContainer.ScaleTo(0.99f, in_duration, Easing.OutQuint);
+            innerCircle.ScaleTo(0.96f, in_duration, Easing.OutQuint);
+
+            innerCircleHighlight
+                .FadeIn(50, Easing.OutQuint)
+                .FlashColour(Color4.White, 1000, Easing.OutQuint);
+
+            lights[currentLight % light_count].Hide();
+            lights[(currentLight + light_count / 2) % light_count].Hide();
+
+            currentLight++;
+
+            lights[currentLight % light_count].Show();
+            lights[(currentLight + light_count / 2) % light_count].Show();
+
+            return true;
+        }
+
+        protected override void OnMouseUp(MouseUpEvent e)
+        {
+            const double out_duration = 800;
+
+            grabbedMouseDown = false;
+
+            textContainer.FadeColour(textColour, out_duration, Easing.OutQuint);
+
+            scaleContainer.ScaleTo(1, out_duration, Easing.OutQuint);
+            innerCircle.ScaleTo(1, out_duration, Easing.OutQuint);
+
+            innerCircleHighlight.FadeOut(out_duration, Easing.OutQuint);
+
+            resetDelegate = Scheduler.AddDelayed(reset, 1000);
+
+            base.OnMouseUp(e);
+        }
+
+        public bool OnPressed(KeyBindingPressEvent<GlobalAction> e)
+        {
+            if (e.Action == GlobalAction.EditorTapForBPM && !e.Repeat)
+            {
+                // Direct through mouse handling to achieve animation
+                OnMouseDown(new MouseDownEvent(e.CurrentState, MouseButton.Left));
+                return true;
+            }
+
+            return false;
+        }
+
+        public void OnReleased(KeyBindingReleaseEvent<GlobalAction> e)
+        {
+            if (e.Action == GlobalAction.EditorTapForBPM)
+                OnMouseUp(new MouseUpEvent(e.CurrentState, MouseButton.Left));
+        }
+
+        private void handleTap()
+        {
+            tapTimings.Add(Clock.CurrentTime);
+
+            if (tapTimings.Count > initial_taps_to_ignore + max_taps_to_consider)
+                tapTimings.RemoveAt(0);
+
+            if (tapTimings.Count < initial_taps_to_ignore * 2)
+            {
+                bpmText.Text = new string('.', tapTimings.Count);
+                return;
+            }
+
+            double averageBeatLength = (tapTimings.Last() - tapTimings.Skip(initial_taps_to_ignore).First()) / (tapTimings.Count - initial_taps_to_ignore - 1);
+            double clockRate = beatSyncSource?.Clock?.Rate ?? 1;
+
+            double bpm = Math.Round(60000 / averageBeatLength / clockRate);
+
+            bpmText.Text = $"{bpm} BPM";
+
+            var timingPoint = selectedGroup?.Value.ControlPoints.OfType<TimingControlPoint>().FirstOrDefault();
+
+            if (timingPoint != null)
+            {
+                // Intentionally use the rounded BPM here.
+                timingPoint.BeatLength = 60000 / bpm;
+            }
+        }
+
+        private void reset()
+        {
+            bpmText.FadeOut(transition_length, Easing.OutQuint);
+
+            using (BeginDelayedSequence(tapTimings.Count > 0 ? transition_length : 0))
+            {
+                Schedule(() => bpmText.Text = "the beat!");
+                bpmText.FadeIn(800, Easing.OutQuint);
+            }
+
+            foreach (var light in lights)
+                light.Hide();
+
+            tapTimings.Clear();
+            currentLight = 0;
+            IsHandlingTapping.Value = false;
+        }
+
+        private class Light : CompositeDrawable
+        {
+            public Drawable Glow { get; private set; } = null!;
+
+            private Container fillContent = null!;
+
+            [Resolved]
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            [BackgroundDependencyLoader]
+            private void load()
+            {
+                RelativeSizeAxes = Axes.Both;
+                Anchor = Anchor.Centre;
+                Origin = Anchor.Centre;
+
+                Size = new Vector2(0.98f); // Avoid bleed into masking edge.
+
+                InternalChildren = new Drawable[]
+                {
+                    new CircularProgress
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Current = { Value = 1f / light_count - angular_light_gap },
+                        Colour = colourProvider.Background2,
+                    },
+                    fillContent = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                        Colour = colourProvider.Colour1,
+                        Children = new[]
+                        {
+                            new CircularProgress
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Current = { Value = 1f / light_count - angular_light_gap },
+                                Blending = BlendingParameters.Additive
+                            },
+                            // Please do not try and make sense of this.
+                            // Getting the visual effect I was going for relies on what I can only imagine is broken implementation
+                            // of `PadExtent`. If that's ever fixed in the future this will likely need to be adjusted.
+                            Glow = new CircularProgress
+                            {
+                                RelativeSizeAxes = Axes.Both,
+                                Current = { Value = 1f / light_count - 0.01f },
+                                Blending = BlendingParameters.Additive
+                            }.WithEffect(new GlowEffect
+                            {
+                                Colour = colourProvider.Colour1.Opacity(0.4f),
+                                BlurSigma = new Vector2(9f),
+                                Strength = 10,
+                                PadExtent = true
+                            }),
+                        }
+                    },
+                };
+            }
+
+            public override void Show()
+            {
+                fillContent
+                    .FadeIn(50, Easing.OutQuint)
+                    .FlashColour(Color4.White, 1000, Easing.OutQuint);
+            }
+
+            public override void Hide()
+            {
+                fillContent
+                    .FadeOut(300, Easing.OutQuint);
+            }
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/TapTimingControl.cs

@@ -1,33 +1,45 @@
 // 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.
 
+#nullable enable
+
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
 using osu.Game.Overlays;
+using osuTK;
 
 namespace osu.Game.Screens.Edit.Timing
 {
     public class TapTimingControl : CompositeDrawable
     {
         [Resolved]
-        private EditorClock editorClock { get; set; }
+        private EditorClock editorClock { get; set; } = null!;
 
         [Resolved]
-        private EditorBeatmap beatmap { get; set; }
+        private EditorBeatmap beatmap { get; set; } = null!;
 
         [Resolved]
-        private Bindable<ControlPointGroup> selectedGroup { get; set; }
+        private Bindable<ControlPointGroup> selectedGroup { get; set; } = null!;
+
+        private readonly BindableBool isHandlingTapping = new BindableBool();
+
+        private MetronomeDisplay metronome = null!;
 
         [BackgroundDependencyLoader]
         private void load(OverlayColourProvider colourProvider, OsuColour colours)
         {
+            const float padding = 10;
+
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
 
@@ -48,8 +60,8 @@ namespace osu.Game.Screens.Edit.Timing
                     RowDimensions = new[]
                     {
                         new Dimension(GridSizeMode.Absolute, 200),
-                        new Dimension(GridSizeMode.Absolute, 60),
+                        new Dimension(GridSizeMode.Absolute, 50),
-                        new Dimension(GridSizeMode.Absolute, 60),
+                        new Dimension(GridSizeMode.Absolute, TapButton.SIZE + padding),
                     },
                     Content = new[]
                     {
@@ -58,6 +70,7 @@ namespace osu.Game.Screens.Edit.Timing
                             new Container
                             {
                                 RelativeSizeAxes = Axes.Both,
+                                Padding = new MarginPadding(padding),
                                 Children = new Drawable[]
                                 {
                                     new GridContainer
@@ -72,7 +85,7 @@ namespace osu.Game.Screens.Edit.Timing
                                         {
                                             new Drawable[]
                                             {
-                                                new MetronomeDisplay
+                                                metronome = new MetronomeDisplay
                                                 {
                                                     Anchor = Anchor.CentreLeft,
                                                     Origin = Anchor.CentreLeft,
@@ -89,15 +102,14 @@ namespace osu.Game.Screens.Edit.Timing
                             new Container
                             {
                                 RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding(10),
+                                Padding = new MarginPadding { Bottom = padding, Horizontal = padding },
                                 Children = new Drawable[]
                                 {
                                     new TimingAdjustButton(1)
                                     {
                                         Text = "Offset",
-                                        RelativeSizeAxes = Axes.X,
+                                        RelativeSizeAxes = Axes.Both,
-                                        Width = 0.48f,
+                                        Size = new Vector2(0.48f, 1),
-                                        Height = 50,
                                         Action = adjustOffset,
                                     },
                                     new TimingAdjustButton(0.1)
@@ -105,9 +117,8 @@ namespace osu.Game.Screens.Edit.Timing
                                         Anchor = Anchor.TopRight,
                                         Origin = Anchor.TopRight,
                                         Text = "BPM",
-                                        RelativeSizeAxes = Axes.X,
+                                        RelativeSizeAxes = Axes.Both,
-                                        Width = 0.48f,
+                                        Size = new Vector2(0.48f, 1),
-                                        Height = 50,
                                         Action = adjustBpm,
                                     }
                                 }
@@ -118,33 +129,70 @@ namespace osu.Game.Screens.Edit.Timing
                             new Container
                             {
                                 RelativeSizeAxes = Axes.Both,
-                                Padding = new MarginPadding(10),
+                                Padding = new MarginPadding { Bottom = padding, Horizontal = padding },
                                 Children = new Drawable[]
                                 {
-                                    new RoundedButton
+                                    new Container
                                     {
-                                        Text = "Reset",
+                                        RelativeSizeAxes = Axes.Y,
-                                        BackgroundColour = colours.Pink,
+                                        Anchor = Anchor.Centre,
-                                        RelativeSizeAxes = Axes.X,
+                                        Origin = Anchor.CentreRight,
-                                        Width = 0.3f,
+                                        Height = 0.98f,
-                                        Action = reset,
+                                        Width = TapButton.SIZE / 1.3f,
+                                        Masking = true,
+                                        CornerRadius = 15,
+                                        Children = new Drawable[]
+                                        {
+                                            new InlineButton(FontAwesome.Solid.Stop, Anchor.TopLeft)
+                                            {
+                                                BackgroundColour = colourProvider.Background1,
+                                                RelativeSizeAxes = Axes.Both,
+                                                Height = 0.49f,
+                                                Action = reset,
+                                            },
+                                            new InlineButton(FontAwesome.Solid.Play, Anchor.BottomLeft)
+                                            {
+                                                BackgroundColour = colourProvider.Background1,
+                                                RelativeSizeAxes = Axes.Both,
+                                                Height = 0.49f,
+                                                Anchor = Anchor.BottomLeft,
+                                                Origin = Anchor.BottomLeft,
+                                                Action = start,
+                                            },
+                                        },
                                     },
-                                    new RoundedButton
+                                    new TapButton
                                     {
-                                        Anchor = Anchor.TopRight,
+                                        Anchor = Anchor.Centre,
-                                        Origin = Anchor.TopRight,
+                                        Origin = Anchor.Centre,
-                                        Text = "Play from start",
+                                        IsHandlingTapping = { BindTarget = isHandlingTapping }
-                                        RelativeSizeAxes = Axes.X,
-                                        BackgroundColour = colourProvider.Background1,
-                                        Width = 0.68f,
-                                        Action = tap,
                                     }
                                 }
                             },
-                        }
+                        },
                     }
                 },
             };
+
+            isHandlingTapping.BindValueChanged(handling =>
+            {
+                metronome.EnableClicking = !handling.NewValue;
+
+                if (handling.NewValue)
+                    start();
+            }, true);
+        }
+
+        private void start()
+        {
+            editorClock.Seek(selectedGroup.Value.Time);
+            editorClock.Start();
+        }
+
+        private void reset()
+        {
+            editorClock.Stop();
+            editorClock.Seek(selectedGroup.Value.Time);
         }
 
         private void adjustOffset(double adjust)
@@ -176,16 +224,66 @@ namespace osu.Game.Screens.Edit.Timing
             timing.BeatLength = 60000 / (timing.BPM + adjust);
         }
 
-        private void tap()
+        private class InlineButton : OsuButton
         {
-            editorClock.Seek(selectedGroup.Value.Time);
+            private readonly IconUsage icon;
-            editorClock.Start();
+            private readonly Anchor anchor;
-        }
 
-        private void reset()
+            private SpriteIcon spriteIcon = null!;
-        {
+
-            editorClock.Stop();
+            [Resolved]
-            editorClock.Seek(selectedGroup.Value.Time);
+            private OverlayColourProvider colourProvider { get; set; } = null!;
+
+            public InlineButton(IconUsage icon, Anchor anchor)
+            {
+                this.icon = icon;
+                this.anchor = anchor;
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Content.CornerRadius = 0;
+                Content.Masking = false;
+
+                BackgroundColour = colourProvider.Background2;
+
+                Content.Add(new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding(15),
+                    Children = new Drawable[]
+                    {
+                        spriteIcon = new SpriteIcon
+                        {
+                            Icon = icon,
+                            Size = new Vector2(22),
+                            Anchor = anchor,
+                            Origin = anchor,
+                            Colour = colourProvider.Background1,
+                        },
+                    }
+                });
+            }
+
+            protected override bool OnMouseDown(MouseDownEvent e)
+            {
+                // scale looks bad so don't call base.
+                return false;
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                spriteIcon.FadeColour(colourProvider.Content2, 200, Easing.OutQuint);
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                spriteIcon.FadeColour(colourProvider.Background1, 200, Easing.OutQuint);
+                base.OnHoverLost(e);
+            }
         }
     }
 }

osu.Game/Screens/Edit/Timing/TimingAdjustButton.cs

@@ -187,7 +187,7 @@ namespace osu.Game.Screens.Edit.Timing
                         Origin = direction,
                         Font = OsuFont.Default.With(size: 10, weight: FontWeight.Bold),
                         Text = $"{(index > 0 ? "+" : "-")}{Math.Abs(Multiplier * amount)}",
-                        Padding = new MarginPadding(5),
+                        Padding = new MarginPadding(2),
                         Alpha = 0,
                     }
                 };