Song select redesign #22204
Comments
|
I'll try to tackle this while the focus is on scoring. |
Joehuu
added
the
epic
|
Sorry to pester about this, but it has been bothering me a bit as something that could potentially go south if not communicated. This issue tracks the addition of the "Let's GO!" button from figma, yet that seems to contradict what I have read on Discord https://discord.com/channels/188630481301012481/188630652340404224/1149721526279606396, which would be having the osu! cookie there instead @Joehuu just making sure you were also aware of this conversation |
|
It's just there because it's in figma (even in the new iteration). I'll append a question mark to the task. I also don't like it replacing the osu! logo. |
|
I had some thoughts on the design: The controls including and around the search bar really clash with the beatmap carousel behind them. I would give them some sort of background, something like this: I also don't like that density and fail rate are the stats shown here. I would show more useful statistics like OD/AR/CS/HP (possibly even Max PP above those?), and maybe make the top banner smaller. Something like this? |
|
hope im not late, wanted to share my thoughts on new iteration. slightly different approach, aligned some stuff, tidied up search a bit, added borders to grades so they look more pronounced. figma |
|
I hope this will be skinnable. I like the current song carousel much more. There's just too much colour here. Sampling colour from background sounds cool on the surface, but in reality you often end up with something weird that does not really represent the picture in a good way. Especially when you block the picture with a gradient. The current look is much cleaner. |
|
I don't know if it's the right place to give feedback on this, but here's some comment, mostly on the "Select Draft 2" one: First thing, showing bars for AR/CS/OD/HP is useless and a complete waste of space: Second, something showing the proportion of sliders/slider-ticks/circles/spinners in the map might be nice but multiple bars does not seem to be the best way to show this. Maybe some stacked bars or a pie-chart would work better ? Lastly, the space left for the leaderboard is really small... Along with removing bars as mentionned above, it would be good to compact things more (buttons for leaderboard options could move to the middle of the top bar ? Some numbers can move to the beatmap card bellow the star rating and song title ? Write AR/CS/OD/HP in abbreviated form and only show the full name on hover ?) and have a way to disable more of the less important info like tags, success rate and user rating/rating spread, or have them be displayed on hover only. Other than that, the designs look very nice overall. Can't wait for them to be part of the game. |
|
@arflyte ^ |
|
There's a major redesign on the left side to declutter and de-messy-fy to address most of the concerns above, such at the search bar background, information overload and the panels on the left side. While the design is nice, I'm not quite happy with how the information is displayed so far, so this requires quite a lot of rethinking and rework. (The Let's Go! button is just a placeholder, the cookie remains) |
|
I'll give an update that I should've done a month ago. This was listed in the future tasks issue so I plan to prioritize this again. I have the changes for the first iteration wedge details (top left) working and polished visually (unsure about code): master...Joehuu:osu:song-select-metadata-content And I was concerned the header was taking too much space and have a diff to remove that (and replace with an arrow within the background wedge): diff --git a/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs b/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
index bd3e5f4d4f..dfbcc56aa2 100644
--- a/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
+++ b/osu.Game/Screens/Select/BeatmapInfoWedgeV2.cs
@@ -2,10 +2,12 @@
// See the LICENCE file in the repository root for full licence text.
using System;
+using System.Collections.Generic;
using System.Threading;
using osuTK;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
@@ -14,16 +16,21 @@
using osu.Game.Graphics;
using osu.Game.Graphics.Sprites;
using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
using osu.Framework.Localisation;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osu.Game.Resources.Localisation.Web;
using osu.Game.Rulesets;
+using osuTK.Graphics;
namespace osu.Game.Screens.Select
{
public partial class BeatmapInfoWedgeV2 : VisibilityContainer
{
- public const float WEDGE_HEIGHT = 120;
+ public const float WEDGE_HEIGHT = 100;
public const float SHEAR_WIDTH = SongSelect.SHEAR_X * WEDGE_HEIGHT;
private const float transition_duration = 250;
public const float COLOUR_BAR_WIDTH = 30;
@@ -149,6 +156,15 @@ private void load()
}
}
},
+ new ExpandDetailsButton
+ {
+ Anchor = Anchor.BottomRight,
+ Origin = Anchor.BottomRight,
+ Expanded = { BindTarget = ShowDetails },
+ Margin = new MarginPadding { Bottom = 3, Right = COLOUR_BAR_WIDTH + 8 },
+ Depth = float.MinValue,
+ Shear = -SongSelect.WEDGED_CONTAINER_SHEAR,
+ },
}
},
new Container
@@ -379,5 +395,101 @@ protected override void UpdateAfterChildren()
ArtistLabel.MaxWidth = DrawWidth - SongSelect.TEXT_MARGIN - SongSelect.SHEAR_X * DrawHeight;
}
}
+
+ public partial class ExpandDetailsButton : OsuHoverContainer
+ {
+ private const int fade_duration = 500;
+
+ public readonly BindableBool Expanded = new BindableBool();
+
+ protected override IEnumerable<Drawable> EffectTargets => new[] { background };
+
+ private Color4 flashColour;
+
+ private readonly Container content;
+ private readonly Box background;
+ private readonly SpriteIcon spriteIcon;
+
+ public ExpandDetailsButton()
+ : base(HoverSampleSet.ScrollToTop)
+ {
+ Size = new Vector2(20);
+ Add(content = new CircularContainer
+ {
+ RelativeSizeAxes = Axes.Both,
+ Anchor = Anchor.Centre,
+ Origin = Anchor.Centre,
+ Masking = true,
+ EdgeEffect = new EdgeEffectParameters
+ {
+ Type = EdgeEffectType.Shadow,
+ Offset = new Vector2(0f, 1f),
+ Radius = 3f,
+ Colour = Color4.Black.Opacity(0.25f),
+ },
+ Children = new Drawable[]
+ {
+ background = new Box
+ {
+ RelativeSizeAxes = Axes.Both
+ },
+ spriteIcon = new SpriteIcon
+ {
+ Anchor = Anchor.Centre,
+ Origin = Anchor.Centre,
+ Size = new Vector2(10),
+ Icon = FontAwesome.Solid.ChevronUp
+ }
+ }
+ });
+
+ TooltipText = CommonStrings.ButtonsBackToTop;
+ }
+
+ [BackgroundDependencyLoader]
+ private void load(OverlayColourProvider colourProvider)
+ {
+ IdleColour = colourProvider.Background3;
+ HoverColour = colourProvider.Background2;
+ flashColour = colourProvider.Light1;
+
+ Action = Expanded.Toggle;
+ }
+
+ protected override void LoadComplete()
+ {
+ base.LoadComplete();
+
+ Expanded.BindValueChanged(e =>
+ {
+ spriteIcon.RotateTo(e.NewValue ? 0 : 180, fade_duration, Easing.OutQuint);
+ TooltipText = e.NewValue ? "Hide details" : "Show details";
+ }, true);
+ }
+
+ protected override bool OnClick(ClickEvent e)
+ {
+ background.FlashColour(flashColour, 800, Easing.OutQuint);
+ return base.OnClick(e);
+ }
+
+ protected override bool OnMouseDown(MouseDownEvent e)
+ {
+ content.ScaleTo(0.75f, 2000, Easing.OutQuint);
+ return true;
+ }
+
+ protected override void OnMouseUp(MouseUpEvent e)
+ {
+ content.ScaleTo(1, 1000, Easing.OutElastic);
+ base.OnMouseUp(e);
+ }
+
+ protected override bool OnHover(HoverEvent e)
+ {
+ base.OnHover(e);
+ return true;
+ }
+ }
}
}
diff --git a/osu.Game/Screens/Select/SongSelect.cs b/osu.Game/Screens/Select/SongSelect.cs
index cd441b0394..c827328d25 100644
--- a/osu.Game/Screens/Select/SongSelect.cs
+++ b/osu.Game/Screens/Select/SongSelect.cs
@@ -111,8 +111,6 @@ public abstract partial class SongSelect : ScreenWithBeatmapBackground, IKeyBind
protected GridContainer LeftArea { get; private set; } = null!;
- private BeatmapInfoWedgeV2 beatmapInfoWedge = null!;
-
[Resolved]
private IDialogOverlay? dialogOverlay { get; set; }
@@ -258,46 +256,17 @@ private void load(AudioManager audio, OsuColour colours, ManageCollectionsDialog
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
- new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
- new Drawable[]
- {
- new Container
- {
- RelativeSizeAxes = Axes.X,
- Height = 90,
- Padding = new MarginPadding { Left = TEXT_MARGIN - WEDGE_CORNER_RADIUS, Right = BeatmapInfoWedgeV2.COLOUR_BAR_WIDTH },
- Children = new Drawable[]
- {
- new SongSelectHeaderTitle
- {
- Anchor = Anchor.CentreLeft,
- Origin = Anchor.CentreLeft,
- Alpha = ShowHeader ? 1 : 0,
- },
- toggleDetailsButton = new ShearedToggleButton(120)
- {
- Anchor = Anchor.CentreRight,
- Origin = Anchor.CentreRight,
- Text = "Details",
- Height = 25,
- Active = { Value = true },
- Font = OsuFont.GetFont(weight: FontWeight.SemiBold, size: 14),
- Padding = new MarginPadding(),
- HasGradientBorder = false,
- },
- }
- }
- },
new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
- Child = beatmapInfoWedge = new BeatmapInfoWedgeV2
+ Padding = new MarginPadding { Top = 10 },
+ Child = new BeatmapInfoWedgeV2
{
RelativeSizeAxes = Axes.X,
},
@@ -382,8 +351,6 @@ protected override void LoadComplete()
modSelectOverlayRegistration = OverlayManager?.RegisterBlockingOverlay(ModSelect);
- toggleDetailsButton.Active.BindTo(beatmapInfoWedge.ShowDetails);
-
apiState.BindTo(api.State);
apiState.BindValueChanged(_ => fetchOnlineBeatmap(), true);
}
@@ -972,7 +939,6 @@ private void updateVisibleBeatmapCount()
}
private bool boundLocalBindables;
- private ShearedToggleButton toggleDetailsButton = null!;
public virtual bool ShowHeader => true;
private void bindBindables()
The details collapsed is underwhelming and should have a condensed display showing the really important stats. As with the code changes, I'm just a little overwhelmed with them and would preferably do one (future) skinnable component per PR. Something like this: |
Joehuu
added
the
priority:1
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
|
The last iteration of song select design (top left of https://www.figma.com/design/9bpXaCQNLuYQlbtyzcs115/Song-Select-6 ) looks nice and fixed most of the previous issues (A lot more room for leaderboard, feels less bloated, ...). Good job @arflyte. In osu! when I'm selecting a beatmap, I will look at a few different values, usually in this order from the most important to the least important (in my opinion):
I'd like to have all the above list displayed in a reasonably big font, and close to one other, as they are the most important and define most of what a beatmap is about. Currently, the BPM and length are too small and too far from the rest, and CS is not included in the latest design (probably an oversight since SR is duplicated). Note that OD and HP can be relevant, but usually not as much as the above (so their size/position matters less). Additionally, when I'm searching for something specific and want to know even more about a the type of beatmap, I look at:
These two are of course less important and can be lower priority, but I think it would be nice to have in the future. Talking about the future, as beatmap tags are added, it might be nice to also have a way to display them. Lastly, for the leaderboard, it would be nice to display miss-counts and maybe (?) also mod multipliers in addition to the rest? |
|
Ah, also, I noticed the mapset author is missing from the beatmap list... Would be a nice to have ! (And the design for beatmap lists when not grouping by set: where did it go ? The last example is in the "draft 2" figma...) |
|
The design has more focus on the layout frames than details. The details in the frame are suggestions on what to put with specific design format. Things can be easily expanded, moved around or reduced. Feel free to move around BPM etc wherever relevant. Since the screen is customisable on player's end, more widgets will be added so they can suit their play style. As for the missing stuffs, I'll see where I can cram the additional info. |
|
I notice that the top left quadrant of the screen is used up by a box with the beatmap background in it. I think this is a strange design decision because the beatmap background is already used as the background of the whole screen. Why is the background partially covered by a copy of itself? I think it would make more sense to remove the box in the top left, creating some empty space, which would make the background more visible as the background of the whole screen. |
|
I think the box background being the beatmap background makes sense and is nice to see, as it allows you to see the beatmap background in a more clear way. Also, the default setting is to blur the song select background, so it doesn't work as a main display for the beatmap background. |
|
Can mod select overlay's mod customize list be like tabs for each mod instead of a loooong list of all the customizable mods cause with we have a lot of mods to customize, it will be pain for users to find where the mod is |
|
can you add back thumbnails like in stable? no one benefits from seeing the small badly cropped part of the background, also you need to add the mapper/uploader name to beatmaps before we click on them. currently it is very hard to tell apart different mapsets of the same song, especially without a proper way to see the map's background without clicking on it. and theres mapsets of the same song that use the same backgrounds, making it even worse. cheers |
Designs:
Work is in progress by
@mk56-spn@Joehuu.Wedge/Info
Carousel
Footer
BeatmapOptionsOverlayis missing new design #24273OsuGameand add temporarySongSelectV2screen #28185ScreenFooterto house footer content of sheared overlays #28682ScreenFooter#28683Leaderboards
Filter Control
The text was updated successfully, but these errors were encountered: