1
0
mirror of https://github.com/ppy/osu.git synced 2026-05-26 20:50:41 +08:00

Merge pull request #33317 from peppy/song-select-v2-polish

SongSelectV2: Various polish
This commit is contained in:
Bartłomiej Dach
2025-05-29 14:30:47 +02:00
committed by GitHub
Unverified
7 changed files with 95 additions and 100 deletions
@@ -81,7 +81,7 @@ namespace osu.Game.Screens.SelectV2
private const float username_min_width = 120;
private const float statistics_regular_min_width = 165;
private const float statistics_compact_min_width = 90;
private const float rank_label_width = 60;
private const float rank_label_width = 40;
private const int corner_radius = 10;
private const int transition_duration = 200;
@@ -144,6 +144,7 @@ namespace osu.Game.Screens.SelectV2
{
background = new Box
{
Alpha = 0.4f,
RelativeSizeAxes = Axes.Both,
Colour = backgroundColour
},
@@ -190,6 +191,7 @@ namespace osu.Game.Screens.SelectV2
{
foreground = new Box
{
Alpha = 0.4f,
RelativeSizeAxes = Axes.Both,
Colour = foregroundColour
},
@@ -312,8 +314,8 @@ namespace osu.Game.Screens.SelectV2
Child = statisticsContainer = new FillFlowContainer
{
Name = @"Statistics container",
Padding = new MarginPadding { Right = 40 },
Spacing = new Vector2(25, 0),
Padding = new MarginPadding { Right = 10 },
Spacing = new Vector2(20, 0),
Shear = sheared ? -OsuGame.SHEAR : Vector2.Zero,
Anchor = Anchor.CentreRight,
Origin = Anchor.CentreRight,
@@ -567,13 +569,13 @@ namespace osu.Game.Screens.SelectV2
private DisplayMode getCurrentDisplayMode()
{
if (DrawWidth >= HEIGHT + username_min_width + statistics_regular_min_width + expanded_right_content_width + rank_label_width)
if (DrawWidth >= username_min_width + statistics_regular_min_width + expanded_right_content_width + rank_label_width)
return DisplayMode.Full;
if (DrawWidth >= HEIGHT + username_min_width + statistics_regular_min_width + expanded_right_content_width)
if (DrawWidth >= username_min_width + statistics_regular_min_width + expanded_right_content_width)
return DisplayMode.Regular;
if (DrawWidth >= HEIGHT + username_min_width + statistics_compact_min_width + expanded_right_content_width)
if (DrawWidth >= username_min_width + statistics_compact_min_width + expanded_right_content_width)
return DisplayMode.Compact;
return DisplayMode.Minimal;
@@ -10,7 +10,6 @@ using osu.Framework.Bindables;
using osu.Framework.Extensions.PolygonExtensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Game.Beatmaps;
using osu.Game.Graphics;
@@ -70,7 +69,7 @@ namespace osu.Game.Screens.SelectV2
private readonly IBindable<LeaderboardScores?> fetchedScores = new Bindable<LeaderboardScores?>();
private const float personal_best_height = 80;
private const float personal_best_height = 100;
[BackgroundDependencyLoader]
private void load()
@@ -109,7 +108,10 @@ namespace osu.Game.Screens.SelectV2
RelativeSizeAxes = Axes.X,
Height = personal_best_height,
Shear = OsuGame.SHEAR,
Margin = new MarginPadding { Left = -40f },
Margin = new MarginPadding
{
Left = -40f,
},
CornerRadius = 10f,
Masking = true,
// push the personal best 1px down to hide masking issues
@@ -118,11 +120,7 @@ namespace osu.Game.Screens.SelectV2
Alpha = 0f,
Children = new Drawable[]
{
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background4,
},
new WedgeBackground(),
new Container
{
RelativeSizeAxes = Axes.X,
+39 -33
View File
@@ -61,11 +61,10 @@ namespace osu.Game.Screens.SelectV2
public Color4? AccentColour
{
get => accentColour;
set
{
accentColour = value;
updateDisplay();
updateAccentColour();
}
}
@@ -95,8 +94,8 @@ namespace osu.Game.Screens.SelectV2
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Shadow,
Offset = new Vector2(1f),
Radius = 10,
Hollow = true,
Radius = 2,
},
Children = new Drawable[]
{
@@ -108,7 +107,7 @@ namespace osu.Game.Screens.SelectV2
backgroundBorder = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.White,
Colour = Color4.Black,
},
backgroundLayerHorizontalPadding = new Container
{
@@ -124,6 +123,8 @@ namespace osu.Game.Screens.SelectV2
{
RelativeSizeAxes = Axes.Both,
},
// TODO: this is only used by beatmap panels and should NOT be in this class.
// it's wasting fill rate.
backgroundAccentGradient = new Box
{
RelativeSizeAxes = Axes.Both,
@@ -158,10 +159,9 @@ namespace osu.Game.Screens.SelectV2
selectionLayer = new Box
{
Alpha = 0,
Colour = ColourInfo.GradientHorizontal(colours.BlueDark.Opacity(0), colours.BlueDark.Opacity(0.6f)),
Blending = BlendingParameters.Additive,
RelativeSizeAxes = Axes.Both,
Width = 0.3f,
Width = 0.6f,
Blending = BlendingParameters.Additive,
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
},
@@ -190,15 +190,15 @@ namespace osu.Game.Screens.SelectV2
{
base.LoadComplete();
Expanded.BindValueChanged(_ => updateDisplay(), true);
Selected.BindValueChanged(selected =>
Expanded.BindValueChanged(_ =>
{
if (selected.NewValue)
selectionLayer.FadeIn(100, Easing.OutQuint);
else
selectionLayer.FadeOut(200, Easing.OutQuint);
updateSelectedState();
updateXOffset();
});
Selected.BindValueChanged(_ =>
{
updateSelectedState();
updateXOffset();
}, true);
@@ -217,6 +217,9 @@ namespace osu.Game.Screens.SelectV2
{
base.PrepareForUse();
updateAccentColour();
updateXOffset();
this.FadeIn(DURATION, Easing.OutQuint);
}
@@ -236,18 +239,29 @@ namespace osu.Game.Screens.SelectV2
return true;
}
private void updateDisplay()
private void updateAccentColour()
{
var backgroundColour = accentColour ?? Color4.White;
backgroundAccentGradient.Colour = ColourInfo.GradientHorizontal(backgroundColour.Opacity(0.25f), backgroundColour.Opacity(0f));
backgroundBorder.Colour = backgroundColour;
selectionLayer.Colour = ColourInfo.GradientHorizontal(backgroundColour.Opacity(0), backgroundColour.Opacity(0.5f));
updateSelectedState(animated: false);
}
private void updateSelectedState(bool animated = true)
{
bool selectedOrExpanded = Expanded.Value || Selected.Value;
var edgeEffectColour = accentColour ?? Color4Extensions.FromHex(@"4EBFFF");
TopLevelContent.FadeEdgeEffectTo(selectedOrExpanded ? edgeEffectColour.Opacity(0.8f) : Color4.Black.Opacity(0.4f), animated ? DURATION : 0, Easing.OutQuint);
backgroundAccentGradient.FadeColour(ColourInfo.GradientHorizontal(backgroundColour.Opacity(0.25f), backgroundColour.Opacity(0f)), DURATION, Easing.OutQuint);
backgroundBorder.FadeColour(backgroundColour, DURATION, Easing.OutQuint);
TopLevelContent.FadeEdgeEffectTo(Expanded.Value ? edgeEffectColour.Opacity(0.5f) : Color4.Black.Opacity(0.4f), DURATION, Easing.OutQuint);
updateXOffset();
updateHover();
if (selectedOrExpanded)
selectionLayer.FadeIn(100, Easing.OutQuint);
else
selectionLayer.FadeOut(200, Easing.OutQuint);
}
private void updateXOffset()
@@ -263,23 +277,15 @@ namespace osu.Game.Screens.SelectV2
TopLevelContent.MoveToX(x, DURATION, Easing.OutQuint);
}
private void updateHover()
{
if (IsHovered)
hoverLayer.FadeIn(100, Easing.OutQuint);
else
hoverLayer.FadeOut(1000, Easing.OutQuint);
}
protected override bool OnHover(HoverEvent e)
{
updateHover();
hoverLayer.FadeIn(100, Easing.OutQuint);
return true;
}
protected override void OnHoverLost(HoverLostEvent e)
{
updateHover();
hoverLayer.FadeOut(1000, Easing.OutQuint);
base.OnHoverLost(e);
}
+14 -17
View File
@@ -210,7 +210,13 @@ namespace osu.Game.Screens.SelectV2
var beatmap = (BeatmapInfo)Item.Model;
starDifficultyBindable = difficultyCache.GetBindableDifficulty(beatmap, starDifficultyCancellationSource.Token, SongSelect.SELECTION_DEBOUNCE);
starDifficultyBindable.BindValueChanged(_ => updateDisplay(), true);
starDifficultyBindable.BindValueChanged(_ =>
{
var starDifficulty = starDifficultyBindable?.Value ?? default;
starRatingDisplay.Current.Value = starDifficulty;
starCounter.Current = (float)starDifficulty.Stars;
}, true);
}
protected override void Update()
@@ -226,6 +232,13 @@ namespace osu.Game.Screens.SelectV2
// Dirty hack to make sure we don't take up spacing in parent fill flow when not displaying a rank.
// I can't find a better way to do this.
starRatingDisplay.Margin = new MarginPadding { Left = 1 / starRatingDisplay.Scale.X * (localRank.HasRank ? 0 : -3) };
var diffColour = starRatingDisplay.DisplayedDifficultyColour;
AccentColour = diffColour;
starCounter.Colour = diffColour;
difficultyIcon.Colour = starRatingDisplay.DisplayedStars.Value > OsuColour.STAR_DIFFICULTY_DEFINED_COLOUR_CUTOFF ? colours.Orange1 : colourProvider.Background5;
}
private void updateKeyCount()
@@ -249,22 +262,6 @@ namespace osu.Game.Screens.SelectV2
keyCountText.Alpha = 0;
}
private void updateDisplay()
{
const float duration = 500;
var starDifficulty = starDifficultyBindable?.Value ?? default;
starRatingDisplay.Current.Value = starDifficulty;
starCounter.Current = (float)starDifficulty.Stars;
difficultyIcon.FadeColour(starDifficulty.Stars > OsuColour.STAR_DIFFICULTY_DEFINED_COLOUR_CUTOFF ? colours.Orange1 : colourProvider.Background5, duration, Easing.OutQuint);
var starRatingColour = colours.ForStarDifficulty(starDifficulty.Stars);
starCounter.FadeColour(starRatingColour, duration, Easing.OutQuint);
AccentColour = starRatingColour;
}
public override MenuItem[] ContextMenuItems
{
get
@@ -257,7 +257,13 @@ namespace osu.Game.Screens.SelectV2
var beatmap = (BeatmapInfo)Item.Model;
starDifficultyBindable = difficultyCache.GetBindableDifficulty(beatmap, starDifficultyCancellationSource.Token, SongSelect.SELECTION_DEBOUNCE);
starDifficultyBindable.BindValueChanged(_ => updateDisplay(), true);
starDifficultyBindable.BindValueChanged(_ =>
{
var starDifficulty = starDifficultyBindable?.Value ?? default;
starRatingDisplay.Current.Value = starDifficulty;
starCounter.Current = (float)starDifficulty.Stars;
}, true);
}
protected override void Update()
@@ -273,6 +279,13 @@ namespace osu.Game.Screens.SelectV2
// Dirty hack to make sure we don't take up spacing in parent fill flow when not displaying a rank.
// I can't find a better way to do this.
starRatingDisplay.Margin = new MarginPadding { Left = 1 / starRatingDisplay.Scale.X * (localRank.HasRank ? 0 : -3) };
var diffColour = starRatingDisplay.DisplayedDifficultyColour;
AccentColour = diffColour;
starCounter.Colour = diffColour;
difficultyIcon.Colour = starRatingDisplay.DisplayedStars.Value > OsuColour.STAR_DIFFICULTY_DEFINED_COLOUR_CUTOFF ? colours.Orange1 : colourProvider.Background5;
}
private void updateKeyCount()
@@ -296,22 +309,6 @@ namespace osu.Game.Screens.SelectV2
keyCountText.Alpha = 0;
}
private void updateDisplay()
{
const float duration = 500;
var starDifficulty = starDifficultyBindable?.Value ?? default;
starRatingDisplay.Current.Value = starDifficulty;
starCounter.Current = (float)starDifficulty.Stars;
difficultyIcon.FadeColour(starDifficulty.Stars > OsuColour.STAR_DIFFICULTY_DEFINED_COLOUR_CUTOFF ? colours.Orange1 : colourProvider.Background5, duration, Easing.OutQuint);
var starRatingColour = colours.ForStarDifficulty(starDifficulty.Stars);
starCounter.FadeColour(starRatingColour, duration, Easing.OutQuint);
AccentColour = colours.ForStarDifficulty(starDifficulty.Stars);
}
public override MenuItem[] ContextMenuItems
{
get
@@ -2,6 +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;
@@ -61,34 +62,27 @@ namespace osu.Game.Screens.SelectV2
Direction = FillDirection.Horizontal,
// This makes the gradient not be perfectly horizontal, but diagonal at a ~40° angle
Shear = new Vector2(0.8f, 0),
Alpha = 0.5f,
Children = new[]
{
// The left half with no gradient applied
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = Color4.Black,
Colour = Color4.Black.Opacity(0.5f),
Width = 0.4f,
},
// Piecewise-linear gradient with 3 segments to make it appear smoother
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientHorizontal(Color4.Black, new Color4(0f, 0f, 0f, 0.9f)),
Width = 0.05f,
},
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.9f), new Color4(0f, 0f, 0f, 0.1f)),
Colour = ColourInfo.GradientHorizontal(Color4.Black.Opacity(0.5f), Color4.Black.Opacity(0.3f)),
Width = 0.2f,
},
new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientHorizontal(new Color4(0f, 0f, 0f, 0.1f), new Color4(0, 0, 0, 0)),
Width = 0.05f,
Colour = ColourInfo.GradientHorizontal(Color4.Black.Opacity(0.3f), Color4.Black.Opacity(0.2f)),
// Slightly more than 1.0 in total to account for shear.
Width = 0.45f,
},
}
},
+8 -7
View File
@@ -146,9 +146,9 @@ namespace osu.Game.Screens.SelectV2
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.Relative, 0.5f, maxSize: 850),
new Dimension(GridSizeMode.Relative, 0.5f, maxSize: 660),
new Dimension(),
new Dimension(GridSizeMode.Relative, 0.5f, maxSize: 750),
new Dimension(GridSizeMode.Relative, 0.5f, maxSize: 580),
},
Content = new[]
{
@@ -162,6 +162,11 @@ namespace osu.Game.Screens.SelectV2
// screen-wide scroll handling.
Depth = float.MinValue,
Shear = OsuGame.SHEAR,
Padding = new MarginPadding
{
Top = -CORNER_RADIUS_HIDE_OFFSET,
Left = -CORNER_RADIUS_HIDE_OFFSET,
},
Children = new Drawable[]
{
new Container
@@ -177,11 +182,6 @@ namespace osu.Game.Screens.SelectV2
wedgesContainer = new FillFlowContainer
{
RelativeSizeAxes = Axes.Both,
Margin = new MarginPadding
{
Top = -CORNER_RADIUS_HIDE_OFFSET,
Left = -CORNER_RADIUS_HIDE_OFFSET
},
Spacing = new Vector2(0f, 4f),
Direction = FillDirection.Vertical,
Children = new Drawable[]
@@ -401,6 +401,7 @@ namespace osu.Game.Screens.SelectV2
backgroundModeBeatmap.BlurAmount.Value = 0;
backgroundModeBeatmap.Beatmap = beatmap;
backgroundModeBeatmap.IgnoreUserSettings.Value = true;
backgroundModeBeatmap.DimWhenUserSettingsIgnored.Value = 0.1f;
backgroundModeBeatmap.FadeColour(Color4.White, 250);
});
}