Quickplay: Update top level layout to match designs #35791
Conversation
|
I dunno what it is about the progress display at top but it just feels wrong to me (reason I kept it at the bottom all this time). Maybe it's that I expect the top area to generally have a toolbar, not part of the screen interface, as most screens are "built up" from the bottom? |
|
Might be because there's still bits of the design missing? I think it looks quite good here The stage-display is kind of acting like a page title imo, which feels quite natural to have at the top |
|
Does it matter whether it's placed in the header or footer? If not then maybe we can move it to the footer again until everyone agrees? |
I can remove the StageDisplay layout changes for now and maybe we can revisit the topic once there is more of the new design in place? I think the stage-display would create quite a lot of ugly negative space by proximity with the screen footer if the screenstack will extend al the way down to the footer like in the designs. |
|
I'm fine with keeping it at the top, but could we make the background a gradient fading out to zero opacity at the bottom rather than a hard semi-transparent box? I think this will make it feel much better. |
|
Here's how that would look Since I quite like the horizontal gradient I also tried what both gradients multiplied on top of each other would look like |
|
Got a diff for that change? Probably the latter one. |
First version: Index: osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs b/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs
--- a/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs (revision 0f3bf2198e32be36227f9c3112fa79066177514c)
+++ b/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs (date 1764069076897)
@@ -50,7 +50,7 @@
{
new Box
{
- Colour = ColourInfo.GradientHorizontal(colourProvider.Dark6, colourProvider.Dark6.Opacity(0.5f)),
+ Colour = ColourInfo.GradientVertical(colourProvider.Dark6, colourProvider.Dark6.Opacity(0f)),
RelativeSizeAxes = Axes.Both,
Alpha = 0.7f
},
Second version: Index: osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs b/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs
--- a/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs (revision 0f3bf2198e32be36227f9c3112fa79066177514c)
+++ b/osu.Game/Screens/OnlinePlay/Matchmaking/Match/StageDisplay.cs (date 1764069016844)
@@ -19,6 +19,7 @@
using osu.Game.Online.Multiplayer.MatchTypes.Matchmaking;
using osu.Game.Overlays;
using osuTK;
+using osuTK.Graphics;
namespace osu.Game.Screens.OnlinePlay.Matchmaking.Match
{
@@ -48,11 +49,16 @@
{
InternalChildren = new Drawable[]
{
- new Box
+ new BufferedContainer(cachedFrameBuffer: true)
{
- Colour = ColourInfo.GradientHorizontal(colourProvider.Dark6, colourProvider.Dark6.Opacity(0.5f)),
- RelativeSizeAxes = Axes.Both,
- Alpha = 0.7f
+ RelativeSizeAxes = Axes.Both,
+ Colour = ColourInfo.GradientVertical(Color4.White, Color4.Transparent),
+ Alpha = 0.8f,
+ Child = new Box
+ {
+ Colour = ColourInfo.GradientHorizontal(colourProvider.Dark6, colourProvider.Dark6.Opacity(0.5f)),
+ RelativeSizeAxes = Axes.Both,
+ }
},
new Container
{ |
Co-authored-by: marvin <[email protected]>
smoogipoo
left a comment
There was a problem hiding this comment.
I'm gonna get this in with the second of the above, just to keep things moving. LGTM
Changes the top level layout & adjusts some of the colours to match the new designs.
List of Changes
StageDisplayto the top of the screenCurrentRoundDisplayvertically and add a tiny bit of ease-outStageDisplayto match the new designs (leaving other design adjustments to the segments for the future)OverlayColourScheme.Pinkfor the entire screenCurrentRoundDisplayto match the designs2025-11-24.22-14-48.mp4