h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2024-12-15 02:42:54 +08:00
Code Issues Releases Wiki Activity

Merge pull request #12412 from peppy/timeline-adjustments

Browse Source 
Update timeline control point display
This commit is contained in:
Dean Herbert 2021-04-15 22:43:26 +09:00 committed by GitHub
commit 7cf15fe729
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 255 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
osu.Game.Tests/Visual/Editing/TimelineTestScene.cs
View File

@ -53,13 +53,10 @@ namespace osu.Game.Tests.Visual.Editing
new AudioVisualiser(),
}
},
TimelineArea = new TimelineArea
TimelineArea = new TimelineArea(CreateTestComponent())
{
Child = CreateTestComponent(),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Size = new Vector2(0.8f, 100),
}
});
}

2
osu.Game/Beatmaps/ControlPoints/DifficultyControlPoint.cs
View File

@ -25,7 +25,7 @@ namespace osu.Game.Beatmaps.ControlPoints
MaxValue = 10
};
public override Color4 GetRepresentingColour(OsuColour colours) => colours.GreenDark;
public override Color4 GetRepresentingColour(OsuColour colours) => colours.Lime1;
/// <summary>
/// The speed multiplier at this control point.

2
osu.Game/Beatmaps/ControlPoints/TimingControlPoint.cs
View File

@ -20,7 +20,7 @@ namespace osu.Game.Beatmaps.ControlPoints
/// </summary>
private const double default_beat_length = 60000.0 / 60.0;
public override Color4 GetRepresentingColour(OsuColour colours) => colours.YellowDark;
public override Color4 GetRepresentingColour(OsuColour colours) => colours.Orange1;
public static readonly TimingControlPoint DEFAULT = new TimingControlPoint
{

7
osu.Game/Graphics/OsuColour.cs
View File

@ -186,6 +186,13 @@ namespace osu.Game.Graphics
public readonly Color4 GrayE = Color4Extensions.FromHex(@"eee");
public readonly Color4 GrayF = Color4Extensions.FromHex(@"fff");
// in latest editor design logic, need to figure out where these sit...
public readonly Color4 Lime1 = Color4Extensions.FromHex(@"b2ff66");
public readonly Color4 Orange1 = Color4Extensions.FromHex(@"ffd966");
// Content Background
public readonly Color4 B5 = Color4Extensions.FromHex(@"222a28");
public readonly Color4 RedLighter = Color4Extensions.FromHex(@"ffeded");
public readonly Color4 RedLight = Color4Extensions.FromHex(@"ed7787");
public readonly Color4 Red = Color4Extensions.FromHex(@"ed1121");

58
osu.Game/Screens/Edit/Compose/Components/Timeline/DifficultyPointPiece.cs
View File

@ -1,67 +1,27 @@
// 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.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.Graphics;
namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
public class DifficultyPointPiece : CompositeDrawable
public class DifficultyPointPiece : TopPointPiece
{
private readonly DifficultyControlPoint difficultyPoint;
private OsuSpriteText speedMultiplierText;
private readonly BindableNumber<double> speedMultiplier;
public DifficultyPointPiece(DifficultyControlPoint difficultyPoint)
public DifficultyPointPiece(DifficultyControlPoint point)
: base(point)
{
this.difficultyPoint = difficultyPoint;
speedMultiplier = difficultyPoint.SpeedMultiplierBindable.GetBoundCopy();
speedMultiplier = point.SpeedMultiplierBindable.GetBoundCopy();
Y = Height;
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
protected override void LoadComplete()
{
RelativeSizeAxes = Axes.Y;
AutoSizeAxes = Axes.X;
Color4 colour = difficultyPoint.GetRepresentingColour(colours);
InternalChildren = new Drawable[]
{
new Box
{
Colour = colour,
Width = 2,
RelativeSizeAxes = Axes.Y,
},
new Container
{
AutoSizeAxes = Axes.Both,
Children = new Drawable[]
{
new Box
{
Colour = colour,
RelativeSizeAxes = Axes.Both,
},
speedMultiplierText = new OsuSpriteText
{
Font = OsuFont.Default.With(weight: FontWeight.Bold),
Colour = Color4.White,
}
}
},
};
speedMultiplier.BindValueChanged(multiplier => speedMultiplierText.Text = $"{multiplier.NewValue:n2}x", true);
base.LoadComplete();
speedMultiplier.BindValueChanged(multiplier => Label.Text = $"{multiplier.NewValue:n2}x", true);
}
}
}

61
osu.Game/Screens/Edit/Compose/Components/Timeline/SamplePointPiece.cs
View File

@ -3,9 +3,7 @@
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.Shapes;
using osu.Game.Beatmaps.ControlPoints;
@ -23,7 +21,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
private readonly BindableNumber<int> volume;
private OsuSpriteText text;
private Box volumeBox;
private Container volumeBox;
private const int max_volume_height = 22;
public SamplePointPiece(SampleControlPoint samplePoint)
{
@ -35,8 +35,10 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Origin = Anchor.TopLeft;
Anchor = Anchor.TopLeft;
Margin = new MarginPadding { Vertical = 5 };
Origin = Anchor.BottomCentre;
Anchor = Anchor.BottomCentre;
AutoSizeAxes = Axes.X;
RelativeSizeAxes = Axes.Y;
@ -45,40 +47,43 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
InternalChildren = new Drawable[]
{
volumeBox = new Circle
{
CornerRadius = 5,
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Y = -20,
Width = 10,
Colour = colour,
},
new Container
{
RelativeSizeAxes = Axes.Y,
Width = 20,
AutoSizeAxes = Axes.X,
Height = 16,
Masking = true,
CornerRadius = 8,
Anchor = Anchor.BottomCentre,
Origin = Anchor.BottomCentre,
Children = new Drawable[]
{
volumeBox = new Box
{
X = 2,
Anchor = Anchor.BottomLeft,
Origin = Anchor.BottomLeft,
Colour = ColourInfo.GradientVertical(colour, Color4.Black),
RelativeSizeAxes = Axes.Both,
},
new Box
{
Colour = colour.Lighten(0.2f),
Width = 2,
RelativeSizeAxes = Axes.Y,
Colour = colour,
RelativeSizeAxes = Axes.Both,
},
text = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Padding = new MarginPadding(5),
Font = OsuFont.Default.With(size: 12, weight: FontWeight.SemiBold),
Colour = colours.B5,
}
}
},
text = new OsuSpriteText
{
X = 2,
Y = -5,
Anchor = Anchor.BottomLeft,
Alpha = 0.9f,
Rotation = -90,
Font = OsuFont.Default.With(weight: FontWeight.SemiBold)
}
};
volume.BindValueChanged(volume => volumeBox.Height = volume.NewValue / 100f, true);
volume.BindValueChanged(volume => volumeBox.Height = max_volume_height * volume.NewValue / 100f, true);
bank.BindValueChanged(bank => text.Text = bank.NewValue, true);
}
}

63
osu.Game/Screens/Edit/Compose/Components/Timeline/Timeline.cs
View File

@ -23,6 +23,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
[Cached]
public class Timeline : ZoomableScrollContainer, IPositionSnapProvider
{
private readonly Drawable userContent;
public readonly Bindable<bool> WaveformVisible = new Bindable<bool>();
public readonly Bindable<bool> ControlPointsVisible = new Bindable<bool>();
@ -56,8 +57,15 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
private Track track;
public Timeline()
private const float timeline_height = 72;
private const float timeline_expanded_height = 156;
public Timeline(Drawable userContent)
{
this.userContent = userContent;
RelativeSizeAxes = Axes.X;
ZoomDuration = 200;
ZoomEasing = Easing.OutQuint;
ScrollbarVisible = false;
@ -69,18 +77,31 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
private TimelineControlPointDisplay controlPoints;
private Container mainContent;
private Bindable<float> waveformOpacity;
[BackgroundDependencyLoader]
private void load(IBindable<WorkingBeatmap> beatmap, OsuColour colours, OsuConfigManager config)
{
CentreMarker centreMarker;
// We don't want the centre marker to scroll
AddInternal(centreMarker = new CentreMarker());
AddRange(new Drawable[]
{
new Container
controlPoints = new TimelineControlPointDisplay
{
RelativeSizeAxes = Axes.Both,
RelativeSizeAxes = Axes.X,
Height = timeline_expanded_height,
},
mainContent = new Container
{
RelativeSizeAxes = Axes.X,
Height = timeline_height,
Depth = float.MaxValue,
Children = new Drawable[]
Children = new[]
{
waveform = new WaveformGraph
{
@ -90,8 +111,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
MidColour = colours.BlueDark,
HighColour = colours.BlueDarker,
},
centreMarker.CreateProxy(),
ticks = new TimelineTickDisplay(),
controlPoints = new TimelineControlPointDisplay(),
new Box
{
Name = "zero marker",
@ -100,21 +121,43 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
Origin = Anchor.TopCentre,
Colour = colours.YellowDarker,
},
userContent,
}
},
});
// We don't want the centre marker to scroll
AddInternal(new CentreMarker { Depth = float.MaxValue });
waveformOpacity = config.GetBindable<float>(OsuSetting.EditorWaveformOpacity);
Beatmap.BindTo(beatmap);
}
protected override void LoadComplete()
{
base.LoadComplete();
waveformOpacity.BindValueChanged(_ => updateWaveformOpacity(), true);
WaveformVisible.ValueChanged += _ => updateWaveformOpacity();
ControlPointsVisible.ValueChanged += visible => controlPoints.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint);
TicksVisible.ValueChanged += visible => ticks.FadeTo(visible.NewValue ? 1 : 0, 200, Easing.OutQuint);
ControlPointsVisible.BindValueChanged(visible =>
{
if (visible.NewValue)
{
this.ResizeHeightTo(timeline_expanded_height, 200, Easing.OutQuint);
mainContent.MoveToY(36, 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);
Beatmap.BindTo(beatmap);
Beatmap.BindValueChanged(b =>
{
waveform.Waveform = b.NewValue.Waveform;

29
osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineArea.cs
View File

@ -12,11 +12,19 @@ using osuTK;
namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
public class TimelineArea : Container
public class TimelineArea : CompositeDrawable
{
public readonly Timeline Timeline = new Timeline { RelativeSizeAxes = Axes.Both };
public Timeline Timeline;
protected override Container<Drawable> Content => Timeline;
private readonly Drawable userContent;
public TimelineArea(Drawable content = null)
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
userContent = content ?? Drawable.Empty();
}
[BackgroundDependencyLoader]
private void load()
@ -37,7 +45,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
},
new GridContainer
{
RelativeSizeAxes = Axes.Both,
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Content = new[]
{
new Drawable[]
@ -55,11 +64,9 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
},
new FillFlowContainer
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
AutoSizeAxes = Axes.Y,
Width = 160,
Padding = new MarginPadding { Horizontal = 10 },
Padding = new MarginPadding(10),
Direction = FillDirection.Vertical,
Spacing = new Vector2(0, 4),
Children = new[]
@ -123,14 +130,18 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
}
}
},
Timeline
Timeline = new Timeline(userContent),
},
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
},
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.Distributed),
new Dimension(),
}
}
};

1
osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBlueprintContainer.cs
View File

@ -65,6 +65,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
Colour = Color4.Black,
Depth = float.MaxValue,
Blending = BlendingParameters.Additive,
});
}

6
osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointDisplay.cs
View File

@ -4,7 +4,6 @@
using System.Collections.Specialized;
using System.Linq;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Game.Beatmaps.ControlPoints;
using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
@ -17,11 +16,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
private readonly IBindableList<ControlPointGroup> controlPointGroups = new BindableList<ControlPointGroup>();
public TimelineControlPointDisplay()
{
RelativeSizeAxes = Axes.Both;
}
protected override void LoadBeatmap(EditorBeatmap beatmap)
{
base.LoadBeatmap(beatmap);

2
osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineControlPointGroup.cs
View File

@ -27,6 +27,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
RelativeSizeAxes = Axes.Y;
AutoSizeAxes = Axes.X;
Origin = Anchor.TopCentre;
X = (float)group.Time;
}

39
osu.Game/Screens/Edit/Compose/Components/Timeline/TimingPointPiece.cs
View File

@ -3,60 +3,27 @@
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.Shapes;
using osu.Game.Beatmaps.ControlPoints;
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osuTK.Graphics;
namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
public class TimingPointPiece : CompositeDrawable
public class TimingPointPiece : TopPointPiece
{
private readonly TimingControlPoint point;
private readonly BindableNumber<double> beatLength;
private OsuSpriteText bpmText;
public TimingPointPiece(TimingControlPoint point)
: base(point)
{
this.point = point;
beatLength = point.BeatLengthBindable.GetBoundCopy();
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
Origin = Anchor.CentreLeft;
Anchor = Anchor.CentreLeft;
AutoSizeAxes = Axes.Both;
Color4 colour = point.GetRepresentingColour(colours);
InternalChildren = new Drawable[]
{
new Box
{
Alpha = 0.9f,
Colour = ColourInfo.GradientHorizontal(colour, colour.Opacity(0.5f)),
RelativeSizeAxes = Axes.Both,
},
bpmText = new OsuSpriteText
{
Alpha = 0.9f,
Padding = new MarginPadding(3),
Font = OsuFont.Default.With(size: 40)
}
};
beatLength.BindValueChanged(beatLength =>
{
bpmText.Text = $"{60000 / beatLength.NewValue:n1} BPM";
Label.Text = $"{60000 / beatLength.NewValue:n1} BPM";
}, true);
}
}

55
osu.Game/Screens/Edit/Compose/Components/Timeline/TopPointPiece.cs Normal file
View File

@ -0,0 +1,55 @@
// 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.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;
namespace osu.Game.Screens.Edit.Compose.Components.Timeline
{
public class TopPointPiece : CompositeDrawable
{
private readonly ControlPoint point;
protected OsuSpriteText Label { get; private set; }
public TopPointPiece(ControlPoint point)
{
this.point = point;
AutoSizeAxes = Axes.X;
Height = 16;
Margin = new MarginPadding(4);
Masking = true;
CornerRadius = Height / 2;
Origin = Anchor.TopCentre;
Anchor = Anchor.TopCentre;
}
[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
InternalChildren = new Drawable[]
{
new Box
{
Colour = point.GetRepresentingColour(colours),
RelativeSizeAxes = Axes.Both,
},
Label = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Padding = new MarginPadding(3),
Font = OsuFont.Default.With(size: 14, weight: FontWeight.SemiBold),
Colour = colours.B5,
}
};
}
}
}

124
osu.Game/Screens/Edit/EditorScreenWithTimeline.cs
View File

@ -19,8 +19,6 @@ namespace osu.Game.Screens.Edit
private const float vertical_margins = 10;
private const float horizontal_margins = 20;
private const float timeline_height = 110;
private readonly BindableBeatDivisor beatDivisor = new BindableBeatDivisor();
private Container timelineContainer;
@ -40,64 +38,87 @@ namespace osu.Game.Screens.Edit
if (beatDivisor != null)
this.beatDivisor.BindTo(beatDivisor);
Children = new Drawable[]
Child = new GridContainer
{
mainContent = new Container
RelativeSizeAxes = Axes.Both,
RowDimensions = new[]
{
Name = "Main content",
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding
{
Horizontal = horizontal_margins,
Top = vertical_margins + timeline_height,
Bottom = vertical_margins
},
Child = spinner = new LoadingSpinner(true)
{
State = { Value = Visibility.Visible },
},
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
new Container
Content = new[]
{
Name = "Timeline",
RelativeSizeAxes = Axes.X,
Height = timeline_height,
Children = new Drawable[]
new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black.Opacity(0.5f)
},
new Container
{
Name = "Timeline content",
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Horizontal = horizontal_margins, Vertical = vertical_margins },
Child = new GridContainer
Name = "Timeline",
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
RelativeSizeAxes = Axes.Both,
Content = new[]
new Box
{
new Drawable[]
{
timelineContainer = new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding { Right = 5 },
},
new BeatDivisorControl(beatDivisor) { RelativeSizeAxes = Axes.Both }
},
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black.Opacity(0.5f)
},
ColumnDimensions = new[]
new Container
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, 90),
Name = "Timeline content",
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Horizontal = horizontal_margins, Vertical = vertical_margins },
Child = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Content = new[]
{
new Drawable[]
{
timelineContainer = new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Right = 5 },
},
new BeatDivisorControl(beatDivisor) { RelativeSizeAxes = Axes.Both }
},
},
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
},
ColumnDimensions = new[]
{
new Dimension(),
new Dimension(GridSizeMode.Absolute, 90),
}
},
}
}
},
},
new Drawable[]
{
mainContent = new Container
{
Name = "Main content",
RelativeSizeAxes = Axes.Both,
Depth = float.MaxValue,
Padding = new MarginPadding
{
Horizontal = horizontal_margins,
Top = vertical_margins,
Bottom = vertical_margins
},
}
}
},
Child = spinner = new LoadingSpinner(true)
{
State = { Value = Visibility.Visible },
},
},
},
}
};
}
@ -112,14 +133,7 @@ namespace osu.Game.Screens.Edit
mainContent.Add(content);
content.FadeInFromZero(300, Easing.OutQuint);
LoadComponentAsync(new TimelineArea
{
RelativeSizeAxes = Axes.Both,
Children = new[]
{
CreateTimelineContent(),
}
}, t =>
LoadComponentAsync(new TimelineArea(CreateTimelineContent()), t =>
{
timelineContainer.Add(t);
OnTimelineLoaded(t);