Merge pull request #3163 from peppy/improve-visual-settings-preview

Improve UX when adjusting visual settings at loading screen

osu.Game/Screens/Play/PlayerLoader.cs

@@ -1,11 +1,13 @@
 // Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
 // Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
 
+using System.Linq;
 using System.Threading.Tasks;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.States;
 using osu.Framework.Localisation;
 using osu.Framework.Screens;
 using osu.Framework.Threading;
@@ -20,6 +22,8 @@ namespace osu.Game.Screens.Play
 {
     public class PlayerLoader : ScreenWithBeatmapBackground
     {
+        private static readonly Vector2 background_blur = new Vector2(15);
+
         private Player player;
 
         private BeatmapMetadataDisplay info;
@@ -60,7 +64,7 @@ namespace osu.Game.Screens.Play
                 Margin = new MarginPadding(25),
                 Children = new PlayerSettingsGroup[]
                 {
-                    new VisualSettings(),
+                    visualSettings = new VisualSettings(),
                     new InputSettings()
                 }
             });
@@ -122,9 +126,33 @@ namespace osu.Game.Screens.Play
         }
 
         private ScheduledDelegate pushDebounce;
+        private VisualSettings visualSettings;
 
         private bool readyForPush => player.LoadState == LoadState.Ready && IsHovered && GetContainingInputManager()?.DraggedDrawable == null;
 
+        protected override bool OnHover(InputState state)
+        {
+            // restore our screen defaults
+            InitializeBackgroundElements();
+            return base.OnHover(state);
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            if (GetContainingInputManager().HoveredDrawables.Contains(visualSettings))
+            {
+                // show user setting preview
+                UpdateBackgroundElements();
+            }
+            base.OnHoverLost(state);
+        }
+
+        protected override void InitializeBackgroundElements()
+        {
+            Background?.FadeTo(1, BACKGROUND_FADE_DURATION, Easing.OutQuint);
+            Background?.BlurTo(background_blur, BACKGROUND_FADE_DURATION, Easing.OutQuint);
+        }
+
         private void pushWhenLoaded()
         {
             if (!IsCurrentScreen) return;
@@ -215,7 +243,7 @@ namespace osu.Game.Screens.Play
                             Anchor = Anchor.TopCentre,
                             Origin = Anchor.TopRight,
                             Margin = new MarginPadding { Right = 5 },
-                            Colour = OsuColour.Gray(0.5f),
+                            Colour = OsuColour.Gray(0.8f),
                             Text = left,
                         },
                         new OsuSpriteText

osu.Game/Screens/Play/PlayerSettings/PlayerSettingsGroup.cs

@@ -128,6 +128,27 @@ namespace osu.Game.Screens.Play.PlayerSettings
             };
         }
 
+        private const float fade_duration = 800;
+        private const float inactive_alpha = 0.5f;
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+            this.Delay(600).FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
+        }
+
+        protected override bool OnHover(InputState state)
+        {
+            this.FadeIn(fade_duration, Easing.OutQuint);
+            return true;
+        }
+
+        protected override void OnHoverLost(InputState state)
+        {
+            this.FadeTo(inactive_alpha, fade_duration, Easing.OutQuint);
+            base.OnHoverLost(state);
+        }
+
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
@@ -140,7 +161,6 @@ namespace osu.Game.Screens.Play.PlayerSettings
 
         protected override Container<Drawable> Content => content;
 
-        protected override bool OnHover(InputState state) => true;
         protected override bool OnMouseDown(InputState state, MouseDownEventArgs args) => true;
     }
 }

osu.Game/Screens/Play/ScreenWithBeatmapBackground.cs

@@ -15,6 +15,8 @@ namespace osu.Game.Screens.Play
     {
         protected override BackgroundScreen CreateBackground() => new BackgroundScreenBeatmap(Beatmap.Value);
 
+        protected new BackgroundScreenBeatmap Background => (BackgroundScreenBeatmap)base.Background;
+
         public override bool AllowBeatmapRulesetChange => false;
 
         protected const float BACKGROUND_FADE_DURATION = 800;
@@ -43,21 +45,30 @@ namespace osu.Game.Screens.Play
             DimLevel.ValueChanged += _ => UpdateBackgroundElements();
             BlurLevel.ValueChanged += _ => UpdateBackgroundElements();
             ShowStoryboard.ValueChanged += _ => UpdateBackgroundElements();
-            UpdateBackgroundElements();
+            InitializeBackgroundElements();
         }
 
         protected override void OnResuming(Screen last)
         {
             base.OnResuming(last);
-            UpdateBackgroundElements();
+            InitializeBackgroundElements();
         }
 
+        /// <summary>
+        /// Called once on entering screen. By Default, performs a full <see cref="UpdateBackgroundElements"/> call.
+        /// </summary>
+        protected virtual void InitializeBackgroundElements() => UpdateBackgroundElements();
+
+        /// <summary>
+        /// Called wen background elements require updates, usually due to a user changing a setting.
+        /// </summary>
+        /// <param name="userChange"></param>
         protected virtual void UpdateBackgroundElements()
         {
             if (!IsCurrentScreen) return;
 
             Background?.FadeTo(BackgroundOpacity, BACKGROUND_FADE_DURATION, Easing.OutQuint);
-            (Background as BackgroundScreenBeatmap)?.BlurTo(new Vector2((float)BlurLevel.Value * 25), BACKGROUND_FADE_DURATION, Easing.OutQuint);
+            Background?.BlurTo(new Vector2((float)BlurLevel.Value * 25), BACKGROUND_FADE_DURATION, Easing.OutQuint);
         }
     }
 }