mirror of
https://github.com/ppy/osu.git
synced 2024-12-15 16:06:06 +08:00
Merge pull request #17245 from peppy/hit-error-meter-improvements
Improve readability of hit error display
This commit is contained in:
Dan Balasescu
GitHub
commit
1da87dbd7f
@ -48,7 +48,11 @@ namespace osu.Game.Tests.Visual.Gameplay
|
||||
{
|
||||
AddStep("create display", () => recreateDisplay(new OsuHitWindows(), 5));
|
||||
|
||||
AddRepeatStep("New random judgement", () => newJudgement(), 40);
|
||||
AddRepeatStep("New random judgement", () =>
|
||||
{
|
||||
double offset = RNG.Next(-150, 150);
|
||||
newJudgement(offset, drawableRuleset.HitWindows.ResultFor(offset));
|
||||
}, 400);
|
||||
|
||||
AddRepeatStep("New max negative", () => newJudgement(-drawableRuleset.HitWindows.WindowFor(HitResult.Meh)), 20);
|
||||
AddRepeatStep("New max positive", () => newJudgement(drawableRuleset.HitWindows.WindowFor(HitResult.Meh)), 20);
|
||||
|
||||
@ -13,23 +13,13 @@ using osu.Framework.Graphics.Sprites;
|
||||
using osu.Game.Rulesets.Judgements;
|
||||
using osu.Game.Rulesets.Scoring;
|
||||
using osuTK;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
{
|
||||
public class BarHitErrorMeter : HitErrorMeter
|
||||
{
|
||||
private const int arrow_move_duration = 400;
|
||||
|
||||
private const int judgement_line_width = 6;
|
||||
|
||||
private const int bar_height = 200;
|
||||
|
||||
private const int bar_width = 2;
|
||||
|
||||
private const int spacing = 2;
|
||||
|
||||
private const float chevron_size = 8;
|
||||
private const int judgement_line_width = 14;
|
||||
private const int judgement_line_height = 4;
|
||||
|
||||
private SpriteIcon arrow;
|
||||
private SpriteIcon iconEarly;
|
||||
@ -50,17 +40,94 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
InternalChild = new FillFlowContainer
|
||||
const int centre_marker_size = 8;
|
||||
const int bar_height = 200;
|
||||
const int bar_width = 2;
|
||||
const float chevron_size = 8;
|
||||
const float icon_size = 14;
|
||||
|
||||
var hitWindows = HitWindows.GetAllAvailableWindows().ToArray();
|
||||
|
||||
InternalChild = new Container
|
||||
{
|
||||
AutoSizeAxes = Axes.X,
|
||||
Height = bar_height,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Spacing = new Vector2(spacing, 0),
|
||||
Margin = new MarginPadding(2),
|
||||
Children = new Drawable[]
|
||||
{
|
||||
colourBars = new Container
|
||||
{
|
||||
Name = "colour axis",
|
||||
X = chevron_size,
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Width = judgement_line_width,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
iconEarly = new SpriteIcon
|
||||
{
|
||||
Y = -10,
|
||||
Size = new Vector2(icon_size),
|
||||
Icon = FontAwesome.Solid.ShippingFast,
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.Centre,
|
||||
},
|
||||
iconLate = new SpriteIcon
|
||||
{
|
||||
Y = 10,
|
||||
Size = new Vector2(icon_size),
|
||||
Icon = FontAwesome.Solid.Bicycle,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Origin = Anchor.Centre,
|
||||
},
|
||||
colourBarsEarly = new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Width = bar_width,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Height = 0.5f,
|
||||
Scale = new Vector2(1, -1),
|
||||
},
|
||||
colourBarsLate = new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.TopCentre,
|
||||
Width = bar_width,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Height = 0.5f,
|
||||
},
|
||||
new Circle
|
||||
{
|
||||
Name = "middle marker behind",
|
||||
Colour = GetColourForHitResult(hitWindows.Last().result),
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(centre_marker_size),
|
||||
},
|
||||
judgementsContainer = new Container
|
||||
{
|
||||
Name = "judgements",
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.TopCentre,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Width = judgement_line_width,
|
||||
},
|
||||
new Circle
|
||||
{
|
||||
Name = "middle marker in front",
|
||||
Colour = GetColourForHitResult(hitWindows.Last().result).Darken(0.3f),
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Size = new Vector2(centre_marker_size),
|
||||
Scale = new Vector2(0.5f),
|
||||
},
|
||||
}
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Name = "average chevron",
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Width = chevron_size,
|
||||
@ -75,58 +142,10 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
Size = new Vector2(chevron_size),
|
||||
}
|
||||
},
|
||||
colourBars = new Container
|
||||
{
|
||||
Width = bar_width,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
colourBarsEarly = new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.TopRight,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Height = 0.5f,
|
||||
Scale = new Vector2(1, -1),
|
||||
},
|
||||
colourBarsLate = new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.TopRight,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Height = 0.5f,
|
||||
},
|
||||
iconEarly = new SpriteIcon
|
||||
{
|
||||
Y = -10,
|
||||
Size = new Vector2(10),
|
||||
Icon = FontAwesome.Solid.ShippingFast,
|
||||
Anchor = Anchor.TopCentre,
|
||||
Origin = Anchor.Centre,
|
||||
},
|
||||
iconLate = new SpriteIcon
|
||||
{
|
||||
Y = 10,
|
||||
Size = new Vector2(10),
|
||||
Icon = FontAwesome.Solid.Bicycle,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Origin = Anchor.Centre,
|
||||
}
|
||||
}
|
||||
},
|
||||
judgementsContainer = new Container
|
||||
{
|
||||
Anchor = Anchor.CentreLeft,
|
||||
Origin = Anchor.CentreLeft,
|
||||
Width = judgement_line_width,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
createColourBars();
|
||||
createColourBars(hitWindows);
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
@ -149,10 +168,8 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
iconLate.Rotation = -Rotation;
|
||||
}
|
||||
|
||||
private void createColourBars()
|
||||
private void createColourBars((HitResult result, double length)[] windows)
|
||||
{
|
||||
var windows = HitWindows.GetAllAvailableWindows().ToArray();
|
||||
|
||||
// max to avoid div-by-zero.
|
||||
maxHitWindow = Math.Max(1, windows.First().length);
|
||||
|
||||
@ -166,17 +183,11 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
colourBarsLate.Add(createColourBar(result, hitWindow, i == 0));
|
||||
}
|
||||
|
||||
// a little nub to mark the centre point.
|
||||
var centre = createColourBar(windows.Last().result, 0.01f);
|
||||
centre.Anchor = centre.Origin = Anchor.CentreLeft;
|
||||
centre.Width = 2.5f;
|
||||
colourBars.Add(centre);
|
||||
|
||||
Drawable createColourBar(HitResult result, float height, bool first = false)
|
||||
Drawable createColourBar(HitResult result, float height, bool requireGradient = false)
|
||||
{
|
||||
var colour = GetColourForHitResult(result);
|
||||
|
||||
if (first)
|
||||
if (requireGradient)
|
||||
{
|
||||
// the first bar needs gradient rendering.
|
||||
const float gradient_start = 0.8f;
|
||||
@ -220,6 +231,8 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
|
||||
protected override void OnNewJudgement(JudgementResult judgement)
|
||||
{
|
||||
const int arrow_move_duration = 800;
|
||||
|
||||
if (!judgement.IsHit || judgement.HitObject.HitWindows?.WindowFor(HitResult.Miss) == 0)
|
||||
return;
|
||||
|
||||
@ -243,46 +256,52 @@ namespace osu.Game.Screens.Play.HUD.HitErrorMeters
|
||||
judgementsContainer.Add(new JudgementLine
|
||||
{
|
||||
Y = getRelativeJudgementPosition(judgement.TimeOffset),
|
||||
Origin = Anchor.CentreLeft,
|
||||
Colour = GetColourForHitResult(judgement.Type),
|
||||
});
|
||||
|
||||
arrow.MoveToY(
|
||||
getRelativeJudgementPosition(floatingAverage = floatingAverage * 0.9 + judgement.TimeOffset * 0.1)
|
||||
, arrow_move_duration, Easing.Out);
|
||||
, arrow_move_duration, Easing.OutQuint);
|
||||
}
|
||||
|
||||
private float getRelativeJudgementPosition(double value) => Math.Clamp((float)((value / maxHitWindow) + 1) / 2, 0, 1);
|
||||
|
||||
internal class JudgementLine : CompositeDrawable
|
||||
{
|
||||
private const int judgement_fade_duration = 5000;
|
||||
|
||||
public JudgementLine()
|
||||
{
|
||||
RelativeSizeAxes = Axes.X;
|
||||
RelativePositionAxes = Axes.Y;
|
||||
Height = 3;
|
||||
Height = judgement_line_height;
|
||||
|
||||
InternalChild = new CircularContainer
|
||||
Blending = BlendingParameters.Additive;
|
||||
|
||||
Origin = Anchor.Centre;
|
||||
Anchor = Anchor.TopCentre;
|
||||
|
||||
InternalChild = new Circle
|
||||
{
|
||||
Masking = true,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Child = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = Color4.White,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
const int judgement_fade_in_duration = 100;
|
||||
const int judgement_fade_out_duration = 5000;
|
||||
|
||||
base.LoadComplete();
|
||||
|
||||
Alpha = 0;
|
||||
Width = 0;
|
||||
|
||||
this.ResizeWidthTo(1, 200, Easing.OutElasticHalf);
|
||||
this.FadeTo(0.8f, 150).Then().FadeOut(judgement_fade_duration).Expire();
|
||||
this
|
||||
.FadeTo(0.6f, judgement_fade_in_duration, Easing.OutQuint)
|
||||
.ResizeWidthTo(1, judgement_fade_in_duration, Easing.OutQuint)
|
||||
.Then()
|
||||
.FadeOut(judgement_fade_out_duration)
|
||||
.ResizeWidthTo(0, judgement_fade_out_duration, Easing.InQuint)
|
||||
.Expire();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user