From a0002943a1ac11f653570366710f61ef45cd289c Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Wed, 21 Aug 2024 15:51:02 +0900 Subject: [PATCH 1/7] Adjust centre marker visuals a bit --- .../Components/Timeline/CentreMarker.cs | 32 +++++++++++-------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs index 7d8622905c..5282fbf1fc 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs @@ -14,22 +14,19 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline { public partial class CentreMarker : CompositeDrawable { - private const float triangle_width = 8; - - private const float bar_width = 1.6f; - - public CentreMarker() - { - RelativeSizeAxes = Axes.Y; - Size = new Vector2(triangle_width, 1); - - Anchor = Anchor.TopCentre; - Origin = Anchor.TopCentre; - } - [BackgroundDependencyLoader] private void load(OverlayColourProvider colours) { + const float triangle_width = 8; + const float bar_width = 2f; + + RelativeSizeAxes = Axes.Y; + + Anchor = Anchor.TopCentre; + Origin = Anchor.TopCentre; + + Size = new Vector2(triangle_width, 1); + InternalChildren = new Drawable[] { new Box @@ -47,6 +44,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline Origin = Anchor.BottomCentre, Size = new Vector2(triangle_width, triangle_width * 0.8f), Scale = new Vector2(1, -1), + EdgeSmoothness = new Vector2(1, 0), + Colour = colours.Colour2, + }, + new Triangle + { + Anchor = Anchor.BottomCentre, + Origin = Anchor.BottomCentre, + Size = new Vector2(triangle_width, triangle_width * 0.8f), + Scale = new Vector2(1, 1), Colour = colours.Colour2, }, }; From 3065f808a78761935ca84cc4f4c03882eeed4806 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Wed, 21 Aug 2024 00:50:41 +0900 Subject: [PATCH 2/7] Simplify timing point display on timeline --- .../Compose/Components/Timeline/Timeline.cs | 7 +- .../Timeline/TimelineControlPointDisplay.cs | 98 ----------- .../Timeline/TimelineControlPointGroup.cs | 52 ------ .../Timeline/TimelineTimingChangeDisplay.cs | 164 ++++++++++++++++++ .../Components/Timeline/TimingPointPiece.cs | 29 ---- .../Components/Timeline/TopPointPiece.cs | 91 ---------- 6 files changed, 168 insertions(+), 273 deletions(-) delete mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointDisplay.cs delete mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs create mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs delete mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs delete mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TopPointPiece.cs diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs index 7a28f7bbaa..af53697b05 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs @@ -78,7 +78,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline private TimelineTickDisplay ticks = null!; - private TimelineControlPointDisplay controlPoints = null!; + private TimelineTimingChangeDisplay controlPoints = null!; private Container mainContent = null!; @@ -117,10 +117,11 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline AddRange(new Drawable[] { - controlPoints = new TimelineControlPointDisplay + ticks = new TimelineTickDisplay(), + controlPoints = new TimelineTimingChangeDisplay { RelativeSizeAxes = Axes.X, - Height = timeline_expanded_height, + Height = timeline_expanded_height - timeline_height, }, ticks, mainContent = new Container diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointDisplay.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointDisplay.cs deleted file mode 100644 index 116a3ee105..0000000000 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointDisplay.cs +++ /dev/null @@ -1,98 +0,0 @@ -// Copyright (c) ppy Pty Ltd . 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.Caching; -using osu.Game.Beatmaps.ControlPoints; -using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts; - -namespace osu.Game.Screens.Edit.Compose.Components.Timeline -{ - /// - /// The part of the timeline that displays the control points. - /// - public partial class TimelineControlPointDisplay : TimelinePart - { - [Resolved] - private Timeline timeline { get; set; } = null!; - - /// - /// The visible time/position range of the timeline. - /// - private (float min, float max) visibleRange = (float.MinValue, float.MaxValue); - - private readonly Cached groupCache = new Cached(); - - private readonly IBindableList controlPointGroups = new BindableList(); - - protected override void LoadBeatmap(EditorBeatmap beatmap) - { - base.LoadBeatmap(beatmap); - - controlPointGroups.UnbindAll(); - controlPointGroups.BindTo(beatmap.ControlPointInfo.Groups); - controlPointGroups.BindCollectionChanged((_, _) => groupCache.Invalidate(), true); - } - - protected override void Update() - { - base.Update(); - - if (DrawWidth <= 0) return; - - (float, float) newRange = ( - (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopLeft).X - TopPointPiece.WIDTH) / DrawWidth * Content.RelativeChildSize.X, - (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopRight).X) / DrawWidth * Content.RelativeChildSize.X); - - if (visibleRange != newRange) - { - visibleRange = newRange; - groupCache.Invalidate(); - } - - if (!groupCache.IsValid) - { - recreateDrawableGroups(); - groupCache.Validate(); - } - } - - private void recreateDrawableGroups() - { - // Remove groups outside the visible range - foreach (TimelineControlPointGroup drawableGroup in this) - { - if (!shouldBeVisible(drawableGroup.Group)) - drawableGroup.Expire(); - } - - // Add remaining ones - for (int i = 0; i < controlPointGroups.Count; i++) - { - var group = controlPointGroups[i]; - - if (!shouldBeVisible(group)) - continue; - - bool alreadyVisible = false; - - foreach (var g in this) - { - if (ReferenceEquals(g.Group, group)) - { - alreadyVisible = true; - break; - } - } - - if (alreadyVisible) - continue; - - Add(new TimelineControlPointGroup(group)); - } - } - - private bool shouldBeVisible(ControlPointGroup group) => group.Time >= visibleRange.min && group.Time <= visibleRange.max; - } -} diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs deleted file mode 100644 index 98556fda45..0000000000 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs +++ /dev/null @@ -1,52 +0,0 @@ -// Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. -// See the LICENCE file in the repository root for full licence text. - -using osu.Framework.Bindables; -using osu.Framework.Graphics; -using osu.Framework.Graphics.Containers; -using osu.Game.Beatmaps.ControlPoints; - -namespace osu.Game.Screens.Edit.Compose.Components.Timeline -{ - public partial class TimelineControlPointGroup : CompositeDrawable - { - public readonly ControlPointGroup Group; - - private readonly IBindableList controlPoints = new BindableList(); - - public TimelineControlPointGroup(ControlPointGroup group) - { - Group = group; - - RelativePositionAxes = Axes.X; - RelativeSizeAxes = Axes.Y; - AutoSizeAxes = Axes.X; - - Origin = Anchor.TopLeft; - - // offset visually to avoid overlapping timeline tick display. - X = (float)group.Time + 6; - } - - protected override void LoadComplete() - { - base.LoadComplete(); - - controlPoints.BindTo(Group.ControlPoints); - controlPoints.BindCollectionChanged((_, _) => - { - ClearInternal(); - - foreach (var point in controlPoints) - { - switch (point) - { - case TimingControlPoint timingPoint: - AddInternal(new TimingPointPiece(timingPoint)); - break; - } - } - }, true); - } - } -} diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs new file mode 100644 index 0000000000..908aa6bc76 --- /dev/null +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs @@ -0,0 +1,164 @@ +// Copyright (c) ppy Pty Ltd . 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.Bindables; +using osu.Framework.Caching; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Shapes; +using osu.Game.Beatmaps.ControlPoints; +using osu.Game.Graphics; +using osu.Game.Graphics.Sprites; +using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts; +using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations; +using osuTK.Graphics; + +namespace osu.Game.Screens.Edit.Compose.Components.Timeline +{ + /// + /// The part of the timeline that displays the control points. + /// + public partial class TimelineTimingChangeDisplay : TimelinePart + { + [Resolved] + private Timeline timeline { get; set; } = null!; + + /// + /// The visible time/position range of the timeline. + /// + private (float min, float max) visibleRange = (float.MinValue, float.MaxValue); + + private readonly Cached groupCache = new Cached(); + + private ControlPointInfo controlPointInfo = null!; + + protected override void LoadBeatmap(EditorBeatmap beatmap) + { + base.LoadBeatmap(beatmap); + + beatmap.ControlPointInfo.ControlPointsChanged += () => groupCache.Invalidate(); + controlPointInfo = beatmap.ControlPointInfo; + } + + protected override void Update() + { + base.Update(); + + if (DrawWidth <= 0) return; + + (float, float) newRange = ( + (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopLeft).X - TimingPointPiece.WIDTH) / DrawWidth * Content.RelativeChildSize.X, + (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopRight).X + TimingPointPiece.WIDTH) / DrawWidth * Content.RelativeChildSize.X); + + if (visibleRange != newRange) + { + visibleRange = newRange; + groupCache.Invalidate(); + } + + if (!groupCache.IsValid) + { + recreateDrawableGroups(); + groupCache.Validate(); + } + } + + private void recreateDrawableGroups() + { + // Remove groups outside the visible range (or timing points which have since been removed from the beatmap). + foreach (TimingPointPiece drawableGroup in this) + { + if (!controlPointInfo.TimingPoints.Contains(drawableGroup.Point) || !shouldBeVisible(drawableGroup.Point)) + drawableGroup.Expire(); + } + + // Add remaining / new ones. + foreach (TimingControlPoint t in controlPointInfo.TimingPoints) + attemptAddTimingPoint(t); + } + + private void attemptAddTimingPoint(TimingControlPoint point) + { + if (!shouldBeVisible(point)) + return; + + foreach (var child in this) + { + if (ReferenceEquals(child.Point, point)) + return; + } + + Add(new TimingPointPiece(point)); + } + + private bool shouldBeVisible(TimingControlPoint point) => point.Time >= visibleRange.min && point.Time <= visibleRange.max; + + public partial class TimingPointPiece : CompositeDrawable + { + public const float WIDTH = 16; + + public readonly TimingControlPoint Point; + + private readonly BindableNumber beatLength; + + protected OsuSpriteText Label { get; private set; } = null!; + + public TimingPointPiece(TimingControlPoint timingPoint) + { + RelativePositionAxes = Axes.X; + + RelativeSizeAxes = Axes.Y; + Width = WIDTH; + + Origin = Anchor.TopRight; + + Point = timingPoint; + + beatLength = timingPoint.BeatLengthBindable.GetBoundCopy(); + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) + { + const float corner_radius = PointVisualisation.MAX_WIDTH / 2; + + InternalChildren = new Drawable[] + { + new Container + { + RelativeSizeAxes = Axes.Both, + Colour = Point.GetRepresentingColour(colours), + Masking = true, + CornerRadius = corner_radius, + Child = new Box + { + Colour = Color4.White, + RelativeSizeAxes = Axes.Both, + }, + }, + Label = new OsuSpriteText + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + Rotation = 90, + Padding = new MarginPadding { Horizontal = 2 }, + Font = OsuFont.Default.With(size: 12, weight: FontWeight.SemiBold), + } + }; + + beatLength.BindValueChanged(beatLength => + { + Label.Text = $"{60000 / beatLength.NewValue:n1} BPM"; + }, true); + } + + protected override void Update() + { + base.Update(); + X = (float)Point.Time; + } + } + } +} diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs deleted file mode 100644 index 2a4ad66918..0000000000 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs +++ /dev/null @@ -1,29 +0,0 @@ -// Copyright (c) ppy Pty Ltd . 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.Game.Beatmaps.ControlPoints; - -namespace osu.Game.Screens.Edit.Compose.Components.Timeline -{ - public partial class TimingPointPiece : TopPointPiece - { - private readonly BindableNumber beatLength; - - public TimingPointPiece(TimingControlPoint point) - : base(point) - { - beatLength = point.BeatLengthBindable.GetBoundCopy(); - } - - [BackgroundDependencyLoader] - private void load() - { - beatLength.BindValueChanged(beatLength => - { - Label.Text = $"{60000 / beatLength.NewValue:n1} BPM"; - }, true); - } - } -} diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TopPointPiece.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TopPointPiece.cs deleted file mode 100644 index a40a805361..0000000000 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TopPointPiece.cs +++ /dev/null @@ -1,91 +0,0 @@ -// Copyright (c) ppy Pty Ltd . 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.Shapes; -using osu.Game.Beatmaps.ControlPoints; -using osu.Game.Graphics; -using osu.Game.Graphics.Sprites; -using osuTK; -using osuTK.Graphics; - -namespace osu.Game.Screens.Edit.Compose.Components.Timeline -{ - public partial class TopPointPiece : CompositeDrawable - { - protected readonly ControlPoint Point; - - protected OsuSpriteText Label { get; private set; } = null!; - - public const float WIDTH = 80; - - public TopPointPiece(ControlPoint point) - { - Point = point; - Width = WIDTH; - Height = 16; - Margin = new MarginPadding { Vertical = 4 }; - - Origin = Anchor.TopCentre; - Anchor = Anchor.TopCentre; - } - - [BackgroundDependencyLoader] - private void load(OsuColour colours) - { - const float corner_radius = 4; - const float arrow_extension = 3; - const float triangle_portion = 15; - - InternalChildren = new Drawable[] - { - // This is a triangle, trust me. - // Doing it this way looks okay. Doing it using Triangle primitive is basically impossible. - new Container - { - Colour = Point.GetRepresentingColour(colours), - X = -corner_radius, - Size = new Vector2(triangle_portion * arrow_extension, Height), - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - Masking = true, - CornerRadius = Height, - CornerExponent = 1.4f, - Children = new Drawable[] - { - new Box - { - Colour = Color4.White, - RelativeSizeAxes = Axes.Both, - }, - } - }, - new Container - { - RelativeSizeAxes = Axes.Y, - Width = WIDTH - triangle_portion, - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - Colour = Point.GetRepresentingColour(colours), - Masking = true, - CornerRadius = corner_radius, - Child = new Box - { - Colour = Color4.White, - RelativeSizeAxes = Axes.Both, - }, - }, - Label = new OsuSpriteText - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - Padding = new MarginPadding(3), - Font = OsuFont.Default.With(size: 14, weight: FontWeight.SemiBold), - Colour = colours.B5, - } - }; - } - } -} From 1a48a6f6542404e79cc8787d895e75ab90742ac5 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Wed, 21 Aug 2024 00:44:29 +0900 Subject: [PATCH 3/7] Reduce size of hit objects on timeline --- .../Compose/Components/Timeline/TimelineHitObjectBlueprint.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineHitObjectBlueprint.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineHitObjectBlueprint.cs index a168dcbd3e..6c0d5af247 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineHitObjectBlueprint.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineHitObjectBlueprint.cs @@ -30,7 +30,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline { public partial class TimelineHitObjectBlueprint : SelectionBlueprint { - private const float circle_size = 38; + private const float circle_size = 32; private Container? repeatsContainer; From 7e6490133d6588582171c1121083021f4ae88075 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Tue, 20 Aug 2024 22:24:48 +0900 Subject: [PATCH 4/7] Adjust visuals of tick display (and fine tune some other timeline elements) --- osu.Game/Screens/Edit/BindableBeatDivisor.cs | 8 ++-- .../Compose/Components/BeatDivisorControl.cs | 2 +- .../Components/Timeline/CentreMarker.cs | 7 +--- .../Compose/Components/Timeline/Timeline.cs | 40 +++++++++---------- .../Timeline/TimelineTickDisplay.cs | 26 +++++++----- .../Timeline/TimelineTimingChangeDisplay.cs | 5 +-- 6 files changed, 42 insertions(+), 46 deletions(-) diff --git a/osu.Game/Screens/Edit/BindableBeatDivisor.cs b/osu.Game/Screens/Edit/BindableBeatDivisor.cs index 3bb1b4e079..bd9c9bab9a 100644 --- a/osu.Game/Screens/Edit/BindableBeatDivisor.cs +++ b/osu.Game/Screens/Edit/BindableBeatDivisor.cs @@ -145,18 +145,18 @@ namespace osu.Game.Screens.Edit { case 1: case 2: - return new Vector2(0.6f, 0.9f); + return new Vector2(1, 0.9f); case 3: case 4: - return new Vector2(0.5f, 0.8f); + return new Vector2(0.8f, 0.8f); case 6: case 8: - return new Vector2(0.4f, 0.7f); + return new Vector2(0.8f, 0.7f); default: - return new Vector2(0.3f, 0.6f); + return new Vector2(0.8f, 0.6f); } } diff --git a/osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs b/osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs index 3c2a66b8bb..43a2abe4c4 100644 --- a/osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs +++ b/osu.Game/Screens/Edit/Compose/Components/BeatDivisorControl.cs @@ -526,7 +526,7 @@ namespace osu.Game.Screens.Edit.Compose.Components AlwaysDisplayed = alwaysDisplayed; Divisor = divisor; - Size = new Vector2(6f, 18) * BindableBeatDivisor.GetSize(divisor); + Size = new Vector2(4, 18) * BindableBeatDivisor.GetSize(divisor); Alpha = alwaysDisplayed ? 1 : 0; InternalChild = new Box { RelativeSizeAxes = Axes.Both }; diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs index 5282fbf1fc..c63dfdfb55 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/CentreMarker.cs @@ -2,9 +2,7 @@ // See the LICENCE file in the repository root for full licence text. 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.Game.Overlays; @@ -29,14 +27,13 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline InternalChildren = new Drawable[] { - new Box + new Circle { Anchor = Anchor.Centre, Origin = Anchor.Centre, RelativeSizeAxes = Axes.Y, Width = bar_width, - Blending = BlendingParameters.Additive, - Colour = ColourInfo.GradientVertical(colours.Colour2.Opacity(0.6f), colours.Colour2.Opacity(0)), + Colour = colours.Colour2, }, new Triangle { diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs index af53697b05..3fa9fc8e3d 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs @@ -14,7 +14,9 @@ using osu.Framework.Input.Events; using osu.Game.Beatmaps; using osu.Game.Configuration; using osu.Game.Graphics; +using osu.Game.Overlays; using osu.Game.Rulesets.Edit; +using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations; using osuTK; using osuTK.Input; @@ -24,7 +26,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline public partial class Timeline : ZoomableScrollContainer, IPositionSnapProvider { private const float timeline_height = 80; - private const float timeline_expanded_height = 94; + private const float timeline_expanded_height = 80; private readonly Drawable userContent; @@ -103,32 +105,28 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline } [BackgroundDependencyLoader] - private void load(IBindable beatmap, OsuColour colours, OsuConfigManager config) + private void load(IBindable beatmap, OsuColour colours, OverlayColourProvider colourProvider, OsuConfigManager config) { CentreMarker centreMarker; // We don't want the centre marker to scroll AddInternal(centreMarker = new CentreMarker()); - ticks = new TimelineTickDisplay - { - Padding = new MarginPadding { Vertical = 2, }, - }; + ticks = new TimelineTickDisplay(); AddRange(new Drawable[] { - ticks = new TimelineTickDisplay(), + ticks, controlPoints = new TimelineTimingChangeDisplay { - RelativeSizeAxes = Axes.X, - Height = timeline_expanded_height - timeline_height, + RelativeSizeAxes = Axes.Both, + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, }, - ticks, mainContent = new Container { RelativeSizeAxes = Axes.X, Height = timeline_height, - Depth = float.MaxValue, Children = new[] { waveform = new WaveformGraph @@ -139,19 +137,19 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline MidColour = colours.BlueDark, HighColour = colours.BlueDarker, }, - ticks.CreateProxy(), centreMarker.CreateProxy(), - new Box - { - Name = "zero marker", - RelativeSizeAxes = Axes.Y, - Width = 2, - Origin = Anchor.TopCentre, - Colour = colours.YellowDarker, - }, + ticks.CreateProxy(), userContent, } }, + new Box + { + Name = "zero marker", + RelativeSizeAxes = Axes.Y, + Width = TimelineTickDisplay.TICK_WIDTH / 2, + Origin = Anchor.TopCentre, + Colour = colourProvider.Background1, + }, }); waveformOpacity = config.GetBindable(OsuSetting.EditorWaveformOpacity); @@ -195,7 +193,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline if (visible.NewValue || alwaysShowControlPoints) { this.ResizeHeightTo(timeline_expanded_height, 200, Easing.OutQuint); - mainContent.MoveToY(15, 200, Easing.OutQuint); + mainContent.MoveToY(0, 200, Easing.OutQuint); // delay the fade in else masking looks weird. controlPoints.Delay(180).FadeIn(400, Easing.OutQuint); diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTickDisplay.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTickDisplay.cs index 4796c08809..66d0df9e18 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTickDisplay.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTickDisplay.cs @@ -17,6 +17,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline { public partial class TimelineTickDisplay : TimelinePart { + public const float TICK_WIDTH = 3; + // With current implementation every tick in the sub-tree should be visible, no need to check whether they are masked away. public override bool UpdateSubTreeMasking() => false; @@ -138,20 +140,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline // even though "bar lines" take up the full vertical space, we render them in two pieces because it allows for less anchor/origin churn. - Vector2 size = Vector2.One; - - if (indexInBar != 0) - size = BindableBeatDivisor.GetSize(divisor); + var size = indexInBar == 0 + ? new Vector2(1.3f, 1) + : BindableBeatDivisor.GetSize(divisor); var line = getNextUsableLine(); line.X = xPos; - line.Anchor = Anchor.CentreLeft; - line.Origin = Anchor.Centre; - - line.Height = 0.6f + size.Y * 0.4f; - line.Width = PointVisualisation.MAX_WIDTH * (0.6f + 0.4f * size.X); - + line.Width = TICK_WIDTH * size.X; + line.Height = size.Y; line.Colour = colour; } @@ -174,8 +171,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline Drawable getNextUsableLine() { PointVisualisation point; + if (drawableIndex >= Count) - Add(point = new PointVisualisation(0)); + { + Add(point = new PointVisualisation(0) + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.Centre, + }); + } else point = Children[drawableIndex]; diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs index 908aa6bc76..419f7e111f 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTimingChangeDisplay.cs @@ -12,7 +12,6 @@ using osu.Game.Beatmaps.ControlPoints; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts; -using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations; using osuTK.Graphics; namespace osu.Game.Screens.Edit.Compose.Components.Timeline @@ -122,8 +121,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline [BackgroundDependencyLoader] private void load(OsuColour colours) { - const float corner_radius = PointVisualisation.MAX_WIDTH / 2; - InternalChildren = new Drawable[] { new Container @@ -131,7 +128,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline RelativeSizeAxes = Axes.Both, Colour = Point.GetRepresentingColour(colours), Masking = true, - CornerRadius = corner_radius, + CornerRadius = TimelineTickDisplay.TICK_WIDTH / 2, Child = new Box { Colour = Color4.White, From fef56cc29eeca9d0af0a6ae5daadd8a5505cd324 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Wed, 21 Aug 2024 15:57:52 +0900 Subject: [PATCH 5/7] Remove expanding behaviour of timeline completely --- .../Compose/Components/Timeline/Timeline.cs | 51 ++----------------- .../Screens/Edit/EditorScreenWithTimeline.cs | 10 +--- osu.Game/Screens/Edit/Timing/TimingScreen.cs | 8 --- 3 files changed, 4 insertions(+), 65 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs index 3fa9fc8e3d..840f1311db 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs @@ -16,7 +16,6 @@ using osu.Game.Configuration; using osu.Game.Graphics; using osu.Game.Overlays; using osu.Game.Rulesets.Edit; -using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations; using osuTK; using osuTK.Input; @@ -26,25 +25,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline public partial class Timeline : ZoomableScrollContainer, IPositionSnapProvider { private const float timeline_height = 80; - private const float timeline_expanded_height = 80; private readonly Drawable userContent; - private bool alwaysShowControlPoints; - - public bool AlwaysShowControlPoints - { - get => alwaysShowControlPoints; - set - { - if (value == alwaysShowControlPoints) - return; - - alwaysShowControlPoints = value; - controlPointsVisible.TriggerChange(); - } - } - [Resolved] private EditorClock editorClock { get; set; } = null!; @@ -80,12 +63,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline private TimelineTickDisplay ticks = null!; - private TimelineTimingChangeDisplay controlPoints = null!; - - private Container mainContent = null!; - private Bindable waveformOpacity = null!; - private Bindable controlPointsVisible = null!; private Bindable ticksVisible = null!; private double trackLengthForZoom; @@ -112,18 +90,16 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline // We don't want the centre marker to scroll AddInternal(centreMarker = new CentreMarker()); - ticks = new TimelineTickDisplay(); - AddRange(new Drawable[] { - ticks, - controlPoints = new TimelineTimingChangeDisplay + ticks = new TimelineTickDisplay(), + new TimelineTimingChangeDisplay { RelativeSizeAxes = Axes.Both, Anchor = Anchor.CentreLeft, Origin = Anchor.CentreLeft, }, - mainContent = new Container + new Container { RelativeSizeAxes = Axes.X, Height = timeline_height, @@ -153,7 +129,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline }); waveformOpacity = config.GetBindable(OsuSetting.EditorWaveformOpacity); - controlPointsVisible = config.GetBindable(OsuSetting.EditorTimelineShowTimingChanges); ticksVisible = config.GetBindable(OsuSetting.EditorTimelineShowTicks); track.BindTo(editorClock.Track); @@ -187,26 +162,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline waveformOpacity.BindValueChanged(_ => updateWaveformOpacity(), true); ticksVisible.BindValueChanged(visible => ticks.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint), true); - - controlPointsVisible.BindValueChanged(visible => - { - if (visible.NewValue || alwaysShowControlPoints) - { - this.ResizeHeightTo(timeline_expanded_height, 200, Easing.OutQuint); - mainContent.MoveToY(0, 200, Easing.OutQuint); - - // delay the fade in else masking looks weird. - controlPoints.Delay(180).FadeIn(400, Easing.OutQuint); - } - else - { - controlPoints.FadeOut(200, Easing.OutQuint); - - // likewise, delay the resize until the fade is complete. - this.Delay(180).ResizeHeightTo(timeline_height, 200, Easing.OutQuint); - mainContent.Delay(180).MoveToY(0, 200, Easing.OutQuint); - } - }, true); } private void updateWaveformOpacity() => diff --git a/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs b/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs index 01908e45c7..5bbf293e0a 100644 --- a/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs +++ b/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs @@ -106,18 +106,10 @@ namespace osu.Game.Screens.Edit MainContent.Add(content); content.FadeInFromZero(300, Easing.OutQuint); - LoadComponentAsync(TimelineArea = new TimelineArea(CreateTimelineContent()), timeline => - { - ConfigureTimeline(timeline); - timelineContent.Add(timeline); - }); + LoadComponentAsync(TimelineArea = new TimelineArea(CreateTimelineContent()), timelineContent.Add); }); } - protected virtual void ConfigureTimeline(TimelineArea timelineArea) - { - } - protected abstract Drawable CreateMainContent(); protected virtual Drawable CreateTimelineContent() => new Container(); diff --git a/osu.Game/Screens/Edit/Timing/TimingScreen.cs b/osu.Game/Screens/Edit/Timing/TimingScreen.cs index 67d4429be8..3f911f5067 100644 --- a/osu.Game/Screens/Edit/Timing/TimingScreen.cs +++ b/osu.Game/Screens/Edit/Timing/TimingScreen.cs @@ -6,7 +6,6 @@ using osu.Framework.Bindables; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Game.Beatmaps.ControlPoints; -using osu.Game.Screens.Edit.Compose.Components.Timeline; namespace osu.Game.Screens.Edit.Timing { @@ -54,12 +53,5 @@ namespace osu.Game.Screens.Edit.Timing SelectedGroup.Value = EditorBeatmap.ControlPointInfo.GroupAt(nearestTimingPoint.Time); } } - - protected override void ConfigureTimeline(TimelineArea timelineArea) - { - base.ConfigureTimeline(timelineArea); - - timelineArea.Timeline.AlwaysShowControlPoints = true; - } } } From 843b10ef34a222ff938bc904597569f1862b8e5b Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 22 Aug 2024 01:05:47 +0900 Subject: [PATCH 6/7] Add back incorrectly removed control point display toggle --- .../Compose/Components/Timeline/Timeline.cs | 29 ++++++++++++++++++- .../Screens/Edit/EditorScreenWithTimeline.cs | 10 ++++++- osu.Game/Screens/Edit/Timing/TimingScreen.cs | 8 +++++ 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs index 840f1311db..a9b0b5c286 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs @@ -28,6 +28,21 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline private readonly Drawable userContent; + private bool alwaysShowControlPoints; + + public bool AlwaysShowControlPoints + { + get => alwaysShowControlPoints; + set + { + if (value == alwaysShowControlPoints) + return; + + alwaysShowControlPoints = value; + controlPointsVisible.TriggerChange(); + } + } + [Resolved] private EditorClock editorClock { get; set; } = null!; @@ -63,7 +78,10 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline private TimelineTickDisplay ticks = null!; + private TimelineTimingChangeDisplay controlPoints = null!; + private Bindable waveformOpacity = null!; + private Bindable controlPointsVisible = null!; private Bindable ticksVisible = null!; private double trackLengthForZoom; @@ -93,7 +111,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline AddRange(new Drawable[] { ticks = new TimelineTickDisplay(), - new TimelineTimingChangeDisplay + controlPoints = new TimelineTimingChangeDisplay { RelativeSizeAxes = Axes.Both, Anchor = Anchor.CentreLeft, @@ -129,6 +147,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline }); waveformOpacity = config.GetBindable(OsuSetting.EditorWaveformOpacity); + controlPointsVisible = config.GetBindable(OsuSetting.EditorTimelineShowTimingChanges); ticksVisible = config.GetBindable(OsuSetting.EditorTimelineShowTicks); track.BindTo(editorClock.Track); @@ -162,6 +181,14 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline waveformOpacity.BindValueChanged(_ => updateWaveformOpacity(), true); ticksVisible.BindValueChanged(visible => ticks.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint), true); + + controlPointsVisible.BindValueChanged(visible => + { + if (visible.NewValue || alwaysShowControlPoints) + controlPoints.FadeIn(400, Easing.OutQuint); + else + controlPoints.FadeOut(200, Easing.OutQuint); + }, true); } private void updateWaveformOpacity() => diff --git a/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs b/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs index 5bbf293e0a..01908e45c7 100644 --- a/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs +++ b/osu.Game/Screens/Edit/EditorScreenWithTimeline.cs @@ -106,10 +106,18 @@ namespace osu.Game.Screens.Edit MainContent.Add(content); content.FadeInFromZero(300, Easing.OutQuint); - LoadComponentAsync(TimelineArea = new TimelineArea(CreateTimelineContent()), timelineContent.Add); + LoadComponentAsync(TimelineArea = new TimelineArea(CreateTimelineContent()), timeline => + { + ConfigureTimeline(timeline); + timelineContent.Add(timeline); + }); }); } + protected virtual void ConfigureTimeline(TimelineArea timelineArea) + { + } + protected abstract Drawable CreateMainContent(); protected virtual Drawable CreateTimelineContent() => new Container(); diff --git a/osu.Game/Screens/Edit/Timing/TimingScreen.cs b/osu.Game/Screens/Edit/Timing/TimingScreen.cs index 3f911f5067..67d4429be8 100644 --- a/osu.Game/Screens/Edit/Timing/TimingScreen.cs +++ b/osu.Game/Screens/Edit/Timing/TimingScreen.cs @@ -6,6 +6,7 @@ using osu.Framework.Bindables; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Game.Beatmaps.ControlPoints; +using osu.Game.Screens.Edit.Compose.Components.Timeline; namespace osu.Game.Screens.Edit.Timing { @@ -53,5 +54,12 @@ namespace osu.Game.Screens.Edit.Timing SelectedGroup.Value = EditorBeatmap.ControlPointInfo.GroupAt(nearestTimingPoint.Time); } } + + protected override void ConfigureTimeline(TimelineArea timelineArea) + { + base.ConfigureTimeline(timelineArea); + + timelineArea.Timeline.AlwaysShowControlPoints = true; + } } } From fb5fb78fd31fc5ead2106a641d14595c4a299203 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Thu, 22 Aug 2024 01:09:22 +0900 Subject: [PATCH 7/7] Move zero marker below control points to avoid common overlap scenario --- .../Edit/Compose/Components/Timeline/Timeline.cs | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs index a9b0b5c286..aea8d02838 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs @@ -111,6 +111,14 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline AddRange(new Drawable[] { ticks = new TimelineTickDisplay(), + new Box + { + Name = "zero marker", + RelativeSizeAxes = Axes.Y, + Width = TimelineTickDisplay.TICK_WIDTH / 2, + Origin = Anchor.TopCentre, + Colour = colourProvider.Background1, + }, controlPoints = new TimelineTimingChangeDisplay { RelativeSizeAxes = Axes.Both, @@ -136,14 +144,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline userContent, } }, - new Box - { - Name = "zero marker", - RelativeSizeAxes = Axes.Y, - Width = TimelineTickDisplay.TICK_WIDTH / 2, - Origin = Anchor.TopCentre, - Colour = colourProvider.Background1, - }, }); waveformOpacity = config.GetBindable(OsuSetting.EditorWaveformOpacity);