Redesign editor timelines to address most frequent user complaints #28788

bdach · 2024-07-09T07:42:07Z

	master	this PR
osu! (timing changes on)
osu! (timing changes off)
mania (timing changes off)

The main user complaints in question are:

Slider velocity currently covers up the tick behind it #28667
Bottom timeline is too large for the value it provides
BPM indicator in bottom left is useless
Bottom timeline dots are not readable (thin lines preferred)
Bottom timeline colours changing around is screwing up user visual parsing (this is mostly fixed, "green lines" still aren't green on scrolling rulesets, but let's treat that as a separate concern since scrolling rulesets have a way to go to make adding scroll speed changes more user-friendly, and also preview point colour is not the same - remains green).

Addresses ppy#28667.

This removes the BPM display, which is commonly cited to have no functional purpose by users, and reduces the height of the bottom bar in exchange for more space for the playfield.

peppy · 2024-07-11T10:06:27Z

osu.Game/Screens/Edit/BottomBar.cs

@@ -31,7 +31,7 @@ private void load(Editor editor)

            RelativeSizeAxes = Axes.X;

-            Height = 60;
+            Height = 40;


Hmm, I really liked the BPM display. Also feel like the new height is way too cramped. Can we settle on this?

diff --git a/osu.Game/Screens/Edit/BottomBar.cs b/osu.Game/Screens/Edit/BottomBar.cs index a11f40c8fd..9f04d80e65 100644 --- a/osu.Game/Screens/Edit/BottomBar.cs +++ b/osu.Game/Screens/Edit/BottomBar.cs @@ -31,7 +31,7 @@ private void load(Editor editor) RelativeSizeAxes = Axes.X; - Height = 40; + Height = 50; Masking = true; EdgeEffect = new EdgeEffectParameters diff --git a/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs b/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs index 37facb3b95..25dc9b9552 100644 --- a/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs +++ b/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs @@ -17,6 +17,8 @@ namespace osu.Game.Screens.Edit.Components { public partial class TimeInfoContainer : BottomBarContainer { + private OsuSpriteText bpm = null!; + [Resolved] private EditorBeatmap editorBeatmap { get; set; } = null!; @@ -24,16 +26,41 @@ public partial class TimeInfoContainer : BottomBarContainer private EditorClock editorClock { get; set; } = null!; [BackgroundDependencyLoader] - private void load(OverlayColourProvider colourProvider) + private void load(OsuColour colours, OverlayColourProvider colourProvider) { Background.Colour = colourProvider.Background5; Children = new Drawable[] { - new TimestampControl(), + new TimestampControl + { + Position = new Vector2(0, -2), + }, + bpm = new OsuSpriteText + { + Colour = colours.Orange1, + Anchor = Anchor.CentreLeft, + Font = OsuFont.Torus.With(size: 18, weight: FontWeight.SemiBold), + Position = new Vector2(2, 6), + } }; } + private double? lastBPM; + + protected override void Update() + { + base.Update(); + + double newBPM = editorBeatmap.ControlPointInfo.TimingPointAt(editorClock.CurrentTime).BPM; + + if (lastBPM != newBPM) + { + lastBPM = newBPM; + bpm.Text = @$"{newBPM:0} BPM"; + } + } + private partial class TimestampControl : OsuClickableContainer { private Container hoverLayer = null!; @@ -87,8 +114,9 @@ private void load() }, inputTextBox = new OsuTextBox { + Position = new Vector2(-4, 4), Width = 150, - Height = 36, + Height = 32, Alpha = 0, CommitOnFocusLost = true, },

As stated in OP, I've had the bpm display described as "useless" to me (on multiple occasions, I wanna say), but I'm not wholly opposed to bringing it back. Although I do find complaints about "cramped" a little funny given that with the bpm display back the left side of the bottom bar is more cramped than I have it here.

I think if you want to proceed with that we'll need to reduce some font sizes. The timestamp uses a humongous text size for no real reason. The BPM text could probably also be smaller too.

Although I do find complaints about "cramped" a little funny given that with the bpm display back the left side of the bottom bar is more cramped than I have it here.

It's more the bar as a whole than that area of the bar.

I'd recommend against reducing font sizes as the current time is one of the most (if not the most) important visual displays in the editor.

Something like this maybe if I were to give an actual counterproposal.

diff --git a/osu.Game/Screens/Edit/BottomBar.cs b/osu.Game/Screens/Edit/BottomBar.cs index a11f40c8fd..514a06f1c5 100644 --- a/osu.Game/Screens/Edit/BottomBar.cs +++ b/osu.Game/Screens/Edit/BottomBar.cs @@ -31,7 +31,7 @@ private void load(Editor editor) RelativeSizeAxes = Axes.X; - Height = 40; + Height = 50; Masking = true; EdgeEffect = new EdgeEffectParameters @@ -48,7 +48,7 @@ private void load(Editor editor) RelativeSizeAxes = Axes.Both, ColumnDimensions = new[] { - new Dimension(GridSizeMode.Absolute, 170), + new Dimension(GridSizeMode.Absolute, 150), new Dimension(), new Dimension(GridSizeMode.Absolute, 220), new Dimension(GridSizeMode.Absolute, HitObjectComposer.TOOLBOX_CONTRACTED_SIZE_RIGHT), diff --git a/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs b/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs index 37facb3b95..ddbb652821 100644 --- a/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs +++ b/osu.Game/Screens/Edit/Components/TimeInfoContainer.cs @@ -17,6 +17,8 @@ namespace osu.Game.Screens.Edit.Components { public partial class TimeInfoContainer : BottomBarContainer { + private OsuSpriteText bpm = null!; + [Resolved] private EditorBeatmap editorBeatmap { get; set; } = null!; @@ -24,16 +26,38 @@ public partial class TimeInfoContainer : BottomBarContainer private EditorClock editorClock { get; set; } = null!; [BackgroundDependencyLoader] - private void load(OverlayColourProvider colourProvider) + private void load(OsuColour colours, OverlayColourProvider colourProvider) { Background.Colour = colourProvider.Background5; Children = new Drawable[] { new TimestampControl(), + bpm = new OsuSpriteText + { + Colour = colours.Orange1, + Anchor = Anchor.CentreLeft, + Font = OsuFont.Torus.With(size: 14, weight: FontWeight.SemiBold), + Position = new Vector2(2, 4), + } }; } + private double? lastBPM; + + protected override void Update() + { + base.Update(); + + double newBPM = editorBeatmap.ControlPointInfo.TimingPointAt(editorClock.CurrentTime).BPM; + + if (lastBPM != newBPM) + { + lastBPM = newBPM; + bpm.Text = @$"{newBPM:0} BPM"; + } + } + private partial class TimestampControl : OsuClickableContainer { private Container hoverLayer = null!; @@ -83,12 +107,13 @@ private void load() Anchor = Anchor.CentreLeft, Origin = Anchor.CentreLeft, Spacing = new Vector2(-2, 0), - Font = OsuFont.Torus.With(size: 36, fixedWidth: true, weight: FontWeight.Light), + Font = OsuFont.Torus.With(size: 32, fixedWidth: true, weight: FontWeight.Light), }, - inputTextBox = new OsuTextBox + inputTextBox = new TimestampTextBox { - Width = 150, - Height = 36, + Position = new Vector2(-4, 4), + Width = 130, + Height = 24, Alpha = 0, CommitOnFocusLost = true, }, @@ -136,6 +161,14 @@ protected override void Update() showingHoverLayer = shouldShowHoverLayer; } } + + private partial class TimestampTextBox : OsuTextBox + { + public TimestampTextBox() + { + TextContainer.Height = 0.8f; + } + } } } }

Seems good, I've applied this and done some further realignment of the hover and textbox.

peppy · 2024-07-11T10:14:07Z

The changes to the summary timeline are visually unappealing to me. I'll see what I can come up with. The lines probably need to be adjusted for screen resolution, and maybe the corner rounding removed (or a minimum width enforced).

bdach · 2024-07-11T10:21:38Z

The changes to the summary timeline are visually unappealing to me (...) The lines probably need to be adjusted for screen resolution

Might be a hidpi thing. They seemed fine here.

.. with a somewhat appealing design.

peppy · 2024-07-12T05:36:07Z

I've pushed enough changes to be on board with this now. I get that you're probably not willing to give a subjective opinion on this, but please check that you don't strongly disagree with anything.

Things I have started on but will push as separate efforts today:

Tooltips for all summary timeline displays
Stopping kiai start / ends from showing as effect point dots (they already show as a duration)

peppy · 2024-07-12T07:51:48Z

I'm done making changes here now, FWIW.

Will wait for re-approval from @bdach or someone else before merging.

bdach · 2024-07-12T08:02:45Z

On a technical level changes seem fine. I've made most of my functional concerns with the changes clear internally already, but will restate here again for the sake of transparency.

Slider velocity currently covers up the tick behind it #28667 could be (on an uncharitable read) considered not resolved with this PR anymore because cases like this are now possible (while they weren't with my initial changes):

They require hiding the timing indicators, yes, but they are possible.
BPM indicator is back but smaller, unsure what the user reaction will be.
Bottom timeline indicators are not thin anymore, unsure what the user reaction will be. The rationale given internally was that keeping them wide but giving them transparency instead was going to cause a similar effect to stable's thin lines of conveying density more properly.

peppy

Let's get these changes out and see what the feedback is like.

bdach added 3 commits July 9, 2024 09:25

Ensure timeline ticks aren't hidden by other pieces

50818da

Addresses ppy#28667.

Slim down bottom timeline

29b8948

This removes the BPM display, which is commonly cited to have no functional purpose by users, and reduces the height of the bottom bar in exchange for more space for the playfield.

Redesign bottom timeline pieces to match stable better

5d5dd0d

bdach added area:editor type:cosmetic labels Jul 9, 2024

pull-request-size bot added the size/L label Jul 9, 2024

Remove unused using

ca4c0aa

bdach self-assigned this Jul 9, 2024

peppy self-requested a review July 11, 2024 07:56

Merge branch 'master' into timeline-redesign

95464eb

peppy reviewed Jul 11, 2024

View reviewed changes

peppy self-requested a review July 11, 2024 16:23

peppy added 5 commits July 12, 2024 12:34

Add back BPM and adjust sizing of bottom bar a bit more

fb4f620

Change red shade for timing control points

e6b7d25

Adjust various visuals of summary timeline in a hope for user acceptance

685b19a

.. with a somewhat appealing design.

Adjust timeline ticks to add a bit more body back

9a7a0cd

Add slight offset for timeline BPM display to avoid overlaps

2ad2ae0

peppy added 3 commits July 12, 2024 15:45

Adjust breaks in timeline to be centered with waveform / hitobjects

f65ab67

Adjust timeline centre marker visuals and bring in front of ticks

ca2fc72

Fix test regression

43addc8

peppy force-pushed the timeline-redesign branch from a7c0a33 to 43addc8 Compare July 12, 2024 07:29

peppy mentioned this pull request Jul 12, 2024

Add tooltips to summary timeline display #28831

Merged

1 task

peppy previously approved these changes Jul 12, 2024

View reviewed changes

peppy added 2 commits July 12, 2024 17:22

Add a bit more padding between node overlays and hitobjects in timeline

d2cb07b

Reduce opacity of centre marker slightly

4be5d05

peppy dismissed their stale review via 4be5d05 July 12, 2024 08:23

peppy approved these changes Jul 12, 2024

View reviewed changes

bdach merged commit 518dc17 into ppy:master Jul 12, 2024
14 of 17 checks passed

bdach deleted the timeline-redesign branch July 12, 2024 08:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redesign editor timelines to address most frequent user complaints #28788

Redesign editor timelines to address most frequent user complaints #28788

bdach commented Jul 9, 2024

peppy Jul 11, 2024

bdach Jul 11, 2024

peppy Jul 11, 2024

bdach Jul 11, 2024

peppy Jul 12, 2024

peppy commented Jul 11, 2024

bdach commented Jul 11, 2024 •

edited

Loading

peppy commented Jul 12, 2024 •

edited

Loading

peppy commented Jul 12, 2024 •

edited

Loading

bdach commented Jul 12, 2024 •

edited

Loading

peppy left a comment

Redesign editor timelines to address most frequent user complaints #28788

Redesign editor timelines to address most frequent user complaints #28788

Conversation

bdach commented Jul 9, 2024

peppy Jul 11, 2024

Choose a reason for hiding this comment

bdach Jul 11, 2024

Choose a reason for hiding this comment

peppy Jul 11, 2024

Choose a reason for hiding this comment

bdach Jul 11, 2024

Choose a reason for hiding this comment

peppy Jul 12, 2024

Choose a reason for hiding this comment

peppy commented Jul 11, 2024

bdach commented Jul 11, 2024 • edited Loading

peppy commented Jul 12, 2024 • edited Loading

peppy commented Jul 12, 2024 • edited Loading

bdach commented Jul 12, 2024 • edited Loading

peppy left a comment

Choose a reason for hiding this comment

bdach commented Jul 11, 2024 •

edited

Loading

peppy commented Jul 12, 2024 •

edited

Loading

peppy commented Jul 12, 2024 •

edited

Loading

bdach commented Jul 12, 2024 •

edited

Loading