Merge pull request #7909 from smoogipoo/multiplayer-header-background

Add a global multiplayer background header

osu.Game/Screens/Multi/Lounge/Components/FilterControl.cs

@@ -4,8 +4,8 @@
 using System.ComponentModel;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Threading;
-using osu.Game.Graphics;
 using osu.Game.Overlays.SearchableList;
 using osu.Game.Rulesets;
 using osuTK.Graphics;
@@ -14,7 +14,7 @@ namespace osu.Game.Screens.Multi.Lounge.Components
 {
     public class FilterControl : SearchableListFilterControl<PrimaryFilter, SecondaryFilter>
     {
-        protected override Color4 BackgroundColour => OsuColour.FromHex(@"362e42");
+        protected override Color4 BackgroundColour => Color4.Black.Opacity(0.5f);
         protected override PrimaryFilter DefaultTab => PrimaryFilter.Open;
         protected override SecondaryFilter DefaultCategory => SecondaryFilter.Public;
 

osu.Game/Screens/Multi/Match/MatchSubScreen.cs

@@ -5,14 +5,11 @@ using System;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Screens;
 using osu.Game.Audio;
 using osu.Game.Beatmaps;
-using osu.Game.Beatmaps.Drawables;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Online.Multiplayer.GameTypes;
 using osu.Game.Rulesets.Mods;
@@ -20,7 +17,6 @@ using osu.Game.Screens.Multi.Components;
 using osu.Game.Screens.Multi.Match.Components;
 using osu.Game.Screens.Multi.Play;
 using osu.Game.Screens.Select;
-using osuTK.Graphics;
 using Footer = osu.Game.Screens.Multi.Match.Components.Footer;
 
 namespace osu.Game.Screens.Multi.Match
@@ -64,12 +60,6 @@ namespace osu.Game.Screens.Multi.Match
         {
             InternalChildren = new Drawable[]
             {
-                new HeaderBackgroundSprite
-                {
-                    RelativeSizeAxes = Axes.X,
-                    Height = 200,
-                    Colour = ColourInfo.GradientVertical(Color4.White.Opacity(0.4f), Color4.White.Opacity(0))
-                },
                 new GridContainer
                 {
                     RelativeSizeAxes = Axes.Both,
@@ -253,15 +243,5 @@ namespace osu.Game.Screens.Multi.Match
             if (beatmapManager != null)
                 beatmapManager.ItemAdded -= beatmapAdded;
         }
-
-        private class HeaderBackgroundSprite : MultiplayerBackgroundSprite
-        {
-            protected override UpdateableBeatmapBackgroundSprite CreateBackgroundSprite() => new BackgroundSprite { RelativeSizeAxes = Axes.Both };
-
-            private class BackgroundSprite : UpdateableBeatmapBackgroundSprite
-            {
-                protected override double TransformDuration => 200;
-            }
-        }
     }
 }

osu.Game/Screens/Multi/Multiplayer.cs

@@ -4,14 +4,16 @@
 using System;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Logging;
 using osu.Framework.Screens;
 using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.Drawables;
 using osu.Game.Graphics;
-using osu.Game.Graphics.Backgrounds;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Input;
@@ -19,6 +21,7 @@ using osu.Game.Online.API;
 using osu.Game.Online.Multiplayer;
 using osu.Game.Overlays.BeatmapSet.Buttons;
 using osu.Game.Screens.Menu;
+using osu.Game.Screens.Multi.Components;
 using osu.Game.Screens.Multi.Lounge;
 using osu.Game.Screens.Multi.Lounge.Components;
 using osu.Game.Screens.Multi.Match;
@@ -62,6 +65,9 @@ namespace osu.Game.Screens.Multi
         [Resolved(CanBeNull = true)]
         private OsuLogo logo { get; set; }
 
+        private readonly Drawable header;
+        private readonly Drawable headerBackground;
+
         public Multiplayer()
         {
             Anchor = Anchor.Centre;
@@ -69,36 +75,58 @@ namespace osu.Game.Screens.Multi
             RelativeSizeAxes = Axes.Both;
             Padding = new MarginPadding { Horizontal = -HORIZONTAL_OVERFLOW_PADDING };
 
+            var backgroundColour = OsuColour.FromHex(@"3e3a44");
+
             InternalChild = waves = new MultiplayerWaveContainer
             {
                 RelativeSizeAxes = Axes.Both,
                 Children = new Drawable[]
                 {
-                    new Container
+                    new Box
                     {
                         RelativeSizeAxes = Axes.Both,
-                        Masking = true,
-                        Children = new Drawable[]
-                        {
-                            new Box
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                Colour = OsuColour.FromHex(@"3e3a44"),
-                            },
-                            new Triangles
-                            {
-                                RelativeSizeAxes = Axes.Both,
-                                ColourLight = OsuColour.FromHex(@"3c3842"),
-                                ColourDark = OsuColour.FromHex(@"393540"),
-                                TriangleScale = 5,
-                            },
-                        },
+                        Colour = backgroundColour,
                     },
                     new Container
                     {
                         RelativeSizeAxes = Axes.Both,
                         Padding = new MarginPadding { Top = Header.HEIGHT },
-                        Child = screenStack = new MultiplayerSubScreenStack { RelativeSizeAxes = Axes.Both }
+                        Children = new[]
+                        {
+                            header = new Container
+                            {
+                                RelativeSizeAxes = Axes.X,
+                                Height = 400,
+                                Children = new[]
+                                {
+                                    headerBackground = new Container
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Width = 1.25f,
+                                        Masking = true,
+                                        Children = new Drawable[]
+                                        {
+                                            new HeaderBackgroundSprite
+                                            {
+                                                RelativeSizeAxes = Axes.X,
+                                                Height = 400 // Keep a static height so the header doesn't change as it's resized between subscreens
+                                            },
+                                        }
+                                    },
+                                    new Container
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        Padding = new MarginPadding { Bottom = -1 }, // 1px padding to avoid a 1px gap due to masking
+                                        Child = new Box
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+                                            Colour = ColourInfo.GradientVertical(backgroundColour.Opacity(0.7f), backgroundColour)
+                                        },
+                                    }
+                                }
+                            },
+                            screenStack = new MultiplayerSubScreenStack { RelativeSizeAxes = Axes.Both }
+                        }
                     },
                     new Header(screenStack),
                     createButton = new HeaderButton
@@ -259,7 +287,10 @@ namespace osu.Game.Screens.Multi
             Beatmap.ValueChanged -= updateTrack;
         }
 
-        private void screenPushed(IScreen lastScreen, IScreen newScreen) => subScreenChanged(newScreen);
+        private void screenPushed(IScreen lastScreen, IScreen newScreen)
+        {
+            subScreenChanged(newScreen);
+        }
 
         private void screenExited(IScreen lastScreen, IScreen newScreen)
         {
@@ -271,6 +302,19 @@ namespace osu.Game.Screens.Multi
 
         private void subScreenChanged(IScreen newScreen)
         {
+            switch (newScreen)
+            {
+                case LoungeSubScreen _:
+                    header.Delay(MultiplayerSubScreen.RESUME_TRANSITION_DELAY).ResizeHeightTo(400, MultiplayerSubScreen.APPEAR_DURATION, Easing.OutQuint);
+                    headerBackground.MoveToX(0, MultiplayerSubScreen.X_MOVE_DURATION, Easing.OutQuint);
+                    break;
+
+                case MatchSubScreen _:
+                    header.ResizeHeightTo(135, MultiplayerSubScreen.APPEAR_DURATION, Easing.OutQuint);
+                    headerBackground.MoveToX(-MultiplayerSubScreen.X_SHIFT, MultiplayerSubScreen.X_MOVE_DURATION, Easing.OutQuint);
+                    break;
+            }
+
             updatePollingRate(isIdle.Value);
             createButton.FadeTo(newScreen is LoungeSubScreen ? 1 : 0, 200);
 
@@ -327,5 +371,15 @@ namespace osu.Game.Screens.Multi
                 FourthWaveColour = OsuColour.FromHex(@"392850");
             }
         }
+
+        private class HeaderBackgroundSprite : MultiplayerBackgroundSprite
+        {
+            protected override UpdateableBeatmapBackgroundSprite CreateBackgroundSprite() => new BackgroundSprite { RelativeSizeAxes = Axes.Both };
+
+            private class BackgroundSprite : UpdateableBeatmapBackgroundSprite
+            {
+                protected override double TransformDuration => 200;
+            }
+        }
     }
 }

osu.Game/Screens/Multi/MultiplayerSubScreen.cs

@@ -4,7 +4,6 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Screens;
-using osu.Game.Graphics.Containers;
 
 namespace osu.Game.Screens.Multi
 {
@@ -24,31 +23,41 @@ namespace osu.Game.Screens.Multi
             RelativeSizeAxes = Axes.Both;
         }
 
+        public const float X_SHIFT = 200;
+
+        public const double X_MOVE_DURATION = 800;
+
+        public const double RESUME_TRANSITION_DELAY = DISAPPEAR_DURATION / 2;
+
+        public const double APPEAR_DURATION = 800;
+
+        public const double DISAPPEAR_DURATION = 500;
+
         public override void OnEntering(IScreen last)
         {
-            this.FadeInFromZero(WaveContainer.APPEAR_DURATION, Easing.OutQuint);
-            this.FadeInFromZero(WaveContainer.APPEAR_DURATION, Easing.OutQuint);
-            this.MoveToX(200).MoveToX(0, WaveContainer.APPEAR_DURATION, Easing.OutQuint);
+            this.FadeInFromZero(APPEAR_DURATION, Easing.OutQuint);
+            this.FadeInFromZero(APPEAR_DURATION, Easing.OutQuint);
+            this.MoveToX(X_SHIFT).MoveToX(0, X_MOVE_DURATION, Easing.OutQuint);
         }
 
         public override bool OnExiting(IScreen next)
         {
-            this.FadeOut(WaveContainer.DISAPPEAR_DURATION, Easing.OutQuint);
-            this.MoveToX(200, WaveContainer.DISAPPEAR_DURATION, Easing.OutQuint);
+            this.FadeOut(DISAPPEAR_DURATION, Easing.OutQuint);
+            this.MoveToX(X_SHIFT, X_MOVE_DURATION, Easing.OutQuint);
 
             return false;
         }
 
         public override void OnResuming(IScreen last)
         {
-            this.FadeIn(WaveContainer.APPEAR_DURATION, Easing.OutQuint);
-            this.MoveToX(0, WaveContainer.APPEAR_DURATION, Easing.OutQuint);
+            this.Delay(RESUME_TRANSITION_DELAY).FadeIn(APPEAR_DURATION, Easing.OutQuint);
+            this.MoveToX(0, X_MOVE_DURATION, Easing.OutQuint);
         }
 
         public override void OnSuspending(IScreen next)
         {
-            this.FadeOut(WaveContainer.DISAPPEAR_DURATION, Easing.OutQuint);
-            this.MoveToX(-200, WaveContainer.DISAPPEAR_DURATION, Easing.OutQuint);
+            this.FadeOut(DISAPPEAR_DURATION, Easing.OutQuint);
+            this.MoveToX(-X_SHIFT, X_MOVE_DURATION, Easing.OutQuint);
         }
 
         public override string ToString() => Title;