Add beat-synced animation to break overlay #29616
Conversation
I've been meaning to make the progress bar synchronise with the beat rather than a continuous countdown, just to give the overlay a bit more of a rhythmic feel. Not completely happy with how this feels but I think it's a start? I had to refactor how the break overlay works in the process. It no longer creates transforms for all breaks ahead-of-time, which could be argued as a better way of doing things. It's more dynamically able to handle breaks now (maybe useful for the future, who knows).
|
Note that I haven't throughly tested rewind, but I couldn't seem to break it.. |
|
I'm not sure if it's the "used to it" effect but this feels like... too much? Out of all the three things going on with the animation, in order of preference:
|
|
Maybe just having it as an initial horizontal move when it first appears rather than constant will be better, I'll give that a try. |
|
I really don't like the parallax. I don't think the design really works for parallax in general, but the way master applies it to only the arrows makes a lot more sense in my head. Same for the lateral movement of the text. I think it all looks too float-y. In-fact I didn't even realise the bar was beat syncing in the video because all I could look at was the various components moving around. |
|
Sure, I'll remove the parallax as well. |
|
Something here is very wrong with pausing: 2024-08-30.13-33-52.mp4 |
| return; | ||
|
|
||
| float timeBoxTargetWidth = (float)Math.Max(0, (remainingTimeForCurrentPeriod - timingPoint.BeatLength / currentPeriod.Value.Value.Duration)); | ||
| remainingTimeBox.ResizeWidthTo(timeBoxTargetWidth, timingPoint.BeatLength * 2, Easing.OutQuint); |
There was a problem hiding this comment.
I also don't get why this transform has duration of two beat lengths? Won't that cause overlapping transforms if this fires on every beat?
There was a problem hiding this comment.
yeah it's just to make it really smooth (looks weird if it comes to a full stop).
Nothing's really wrong, it's just the I tried to remove this but had some issues. I guess I can try once more. |
|
If you're okay with a local fix, this works for that specific case: diff --git a/osu.Game/Screens/Play/BreakOverlay.cs b/osu.Game/Screens/Play/BreakOverlay.cs
index 7f9e879b44..f2a2a3ed12 100644
--- a/osu.Game/Screens/Play/BreakOverlay.cs
+++ b/osu.Game/Screens/Play/BreakOverlay.cs
@@ -155,6 +155,7 @@ protected override void OnNewBeat(int beatIndex, TimingControlPoint timingPoint,
return;
float timeBoxTargetWidth = (float)Math.Max(0, (remainingTimeForCurrentPeriod - timingPoint.BeatLength / currentPeriod.Value.Value.Duration));
+ remainingTimeBox.ClearTransforms(targetMember: nameof(Width));
remainingTimeBox.ResizeWidthTo(timeBoxTargetWidth, timingPoint.BeatLength * 2, Easing.OutQuint);
}
|
|
That diff fixes nothing for me. A start to fixing the actual issue is this: diff --git a/osu.Game/Screens/Play/BreakOverlay.cs b/osu.Game/Screens/Play/BreakOverlay.cs
index 7f9e879b44..c161d4982b 100644
--- a/osu.Game/Screens/Play/BreakOverlay.cs
+++ b/osu.Game/Screens/Play/BreakOverlay.cs
@@ -52,6 +52,7 @@ public BreakOverlay(bool letterboxing, ScoreProcessor scoreProcessor)
RelativeSizeAxes = Axes.Both;
MinimumBeatLength = 200;
+ AllowMistimedEventFiring = false;
Child = fadeContainer = new Container
{
tl;dr: The code as you have it is relying on transforms being added at the exact beat to have the effect desired. Pausing and unpausing the track causes That said the above is still pretty bad because it doesn't work properly with rewind. I'm not even sure I know how to write this properly. I tried diff --git a/osu.Game/Screens/Play/BreakOverlay.cs b/osu.Game/Screens/Play/BreakOverlay.cs
index 7f9e879b44..d53e4a5a96 100644
--- a/osu.Game/Screens/Play/BreakOverlay.cs
+++ b/osu.Game/Screens/Play/BreakOverlay.cs
@@ -10,6 +10,7 @@
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Logging;
using osu.Game.Beatmaps.ControlPoints;
using osu.Game.Beatmaps.Timing;
using osu.Game.Graphics;
@@ -137,8 +138,8 @@ protected override void LoadComplete()
currentPeriod.BindValueChanged(updateDisplay, true);
}
- private float remainingTimeForCurrentPeriod =>
- currentPeriod.Value == null ? 0 : (float)Math.Max(0, (currentPeriod.Value.Value.End - Time.Current - BREAK_FADE_DURATION) / currentPeriod.Value.Value.Duration);
+ private float remainingTimeForCurrentPeriod(double time) =>
+ currentPeriod.Value == null ? 0 : (float)Math.Max(0, (currentPeriod.Value.Value.End - time - BREAK_FADE_DURATION) / currentPeriod.Value.Value.Duration);
protected override void Update()
{
@@ -154,7 +155,9 @@ protected override void OnNewBeat(int beatIndex, TimingControlPoint timingPoint,
if (currentPeriod.Value == null)
return;
- float timeBoxTargetWidth = (float)Math.Max(0, (remainingTimeForCurrentPeriod - timingPoint.BeatLength / currentPeriod.Value.Value.Duration));
+ double beatTime = timingPoint.Time + beatIndex * timingPoint.BeatLength;
+ Logger.Log($"beattime = {beatTime} current = {Time.Current}");
+ float timeBoxTargetWidth = (float)Math.Max(0, (remainingTimeForCurrentPeriod(beatTime) - timingPoint.BeatLength / currentPeriod.Value.Value.Duration));
remainingTimeBox.ResizeWidthTo(timeBoxTargetWidth, timingPoint.BeatLength * 2, Easing.OutQuint);
}
@@ -178,7 +181,7 @@ private void updateDisplay(ValueChangedEvent<Period?> period)
.Delay(b.Duration - BREAK_FADE_DURATION)
.ResizeWidthTo(0);
- remainingTimeBox.ResizeWidthTo(remainingTimeForCurrentPeriod);
+ remainingTimeBox.ResizeWidthTo(remainingTimeForCurrentPeriod(Time.Current));
remainingTimeCounter.CountTo(b.Duration).CountTo(0, b.Duration);
and it still bugs out because apparently when unpausing |
|
Can you clarify what you want to fix specifically? I don't see the animation being wrong for one beat a huge deal. The fix I proposed was to stop the transforms from piling up, which I thought is what you had an issue with. Also without |
|
I want to stop the progress bar jittering back and forth in width when pausing and unpausing, in a manner that in no way is consistent with the normal animation when pausing is not involved. Or, in other words, the progress bar should never become longer on unpause. |
|
I've applied a very basic fix which seems to look quite good to me, what do you think? |
peppy
added
the
next release
|
It's still not fixing what I wanted to fix because it's doing something about rewind and not pause. But at this point I'm not sure how to fix it myself either so I might just ignore and move on and wait for the inevitable issue report. |
It doesn't work well with pause/resume.
peppy
force-pushed
the
break-overlay-animation
branch
from
66cbd9b
to
7cd24ba
Compare
|
Ah, I missed that it was during pause. I've just disabled the mistimed firing flag for now. |
Add beat-synced animation to break overlay
I've been meaning to make the progress bar synchronise with the beat rather than a continuous countdown, just to give the overlay a bit more of a rhythmic feel.
Not completely happy with how this feels but I think it's a start?
I had to refactor how the break overlay works in the process. It no longer creates transforms for all breaks ahead-of-time, which could be argued as a better way of doing things. It's more dynamically able to handle breaks now (maybe useful for the future, who knows).
osu.2024-08-27.at.07.39.17.mp4
I tried to make the arrows also animate but couldn't get them looking good. Open to suggestion: