Joehuu
commented
1 year ago I'll try to tackle this while the focus is on scoring.
Open bdach opened 1 year ago
Joehuu
commented
1 year ago I'll try to tackle this while the focus is on scoring.
NiceAesth
commented
1 year ago 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
Joehuu
commented
1 year ago 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.
april83c
commented
10 months ago 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?
Unless that was what the Basic and Pro buttons were supposed to do (switch between the view shown and a different view with more stats?), in which case I think they should be labelled something else (maybe "Default" and "Compact"?)
ghost
commented
9 months ago 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
Qunas101
commented
9 months ago 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.
Zyfarok
commented
9 months ago 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: In osu! at least, the huge majority of beatmaps above 5 have CS 4\~5, OD 8\~9, AR 8\~10, and HP 5\~6, while the bars go from 0 to 10, which makes most bars look very similar on all 5+ beatmaps. The difference between CS 4 and 5 is huge but it's very hard to see from the bars. Similar issues can be seen at lower star ratings too (values don't vary much between maps of similar difficulty). Having the numbers themselves is very important though, and this is something that is completely missing from the "Draft 5" one, but bars won't bring anything relevant that the numbers don't already give.
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.
peppy
commented
9 months ago @arflyte ^
arflyte
commented
8 months ago 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)
Joehuu
commented
7 months ago 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): https://github.com/ppy/osu/compare/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:
home-gihub
commented
4 months ago skin support for the menu?
necocat0918
commented
4 months ago skin support for the menu? @peppy please?
Zyfarok
commented
2 months ago 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. I have a few comments however, from my PoV of player:
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?
Zyfarok
commented
1 month ago 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...)
arflyte
commented
1 month ago 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.
cloudrac3r
commented
1 month ago 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.
felipemarins
commented
1 month ago 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.
necocat0918
commented
1 month ago 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
leah7-7
commented
3 weeks ago 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.