Working on design

osu.Game/Overlays/Pause/PauseButton.cs

@@ -1,45 +1,217 @@
 using OpenTK;
 using OpenTK.Graphics;
-using osu.Framework.Graphics.UserInterface;
+using osu.Framework.Allocation;
+using osu.Game.Graphics;
+using osu.Framework.Graphics;
 using osu.Framework.Graphics.Transformations;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
+using osu.Game.Graphics.Backgrounds;
 
 namespace osu.Game.Overlays.Pause
 {
-    public class PauseButton : Button
+    public class PauseButton : ClickableContainer
     {
-        private float height = 100;
+        private float height = 70;
-        private float width = 300;
+        private float colourWidth = 0.8f;
-        private float expandedWidth = 350;
+        private float colourExpandedWidth = 0.9f;
+        private float colourExpandTime = 500;
+        private float shear = 0.2f;
+        private float glowGradientEndAlpha = 0f;
 
-        public AudioSample sampleClick;
+        private Color4 buttonColour;
-        public AudioSample sampleHover;
+        private Color4 backgroundColour = OsuColour.Gray(34);
 
-        protected override bool OnMouseDown(Framework.Input.InputState state, Framework.Graphics.MouseDownEventArgs args)
+        private AudioSample sampleClick;
+        private AudioSample sampleHover;
+
+        public PauseButtonType Type;
+
+        public string Text
+        {
+            get
+            {
+                switch (Type)
+                {
+                    case PauseButtonType.Resume:
+                        return "Continue";
+
+                    case PauseButtonType.Retry:
+                        return "Retry";
+
+                    case PauseButtonType.Quit:
+                        return "Quit to Main Menu";
+
+                    default:
+                        return "Unknown";
+                }
+            }
+        }
+
+        private Container backgroundContainer;
+        private Container colourContainer;
+        private Container glowContainer;
+        private SpriteText spriteText;
+
+        public override bool Contains(Vector2 screenSpacePos) => backgroundContainer.Contains(screenSpacePos);
+
+        protected override bool OnMouseUp(Framework.Input.InputState state, MouseUpEventArgs args)
         {
             sampleClick?.Play();
-
             return true;
         }
 
         protected override bool OnHover(Framework.Input.InputState state)
         {
+            colourContainer.ResizeTo(new Vector2(colourExpandedWidth, 1f), colourExpandTime, EasingTypes.OutElastic);
+            glowContainer.FadeTo(1f, colourExpandTime, EasingTypes.Out);
             sampleHover?.Play();
-            ResizeTo(new Vector2(expandedWidth, height), 500, EasingTypes.OutElastic);
-
             return true;
         }
 
         protected override void OnHoverLost(Framework.Input.InputState state)
         {
-            ResizeTo(new Vector2(width, height), 500, EasingTypes.OutElastic);
+            colourContainer.ResizeTo(new Vector2(colourWidth, 1f), colourExpandTime, EasingTypes.OutElastic);
+            glowContainer.FadeTo(0f, colourExpandTime, EasingTypes.Out);
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(AudioManager audio, OsuColour colours)
+        {
+            switch (Type)
+            {
+                case PauseButtonType.Resume:
+                    buttonColour = colours.Green;
+                    sampleClick = audio.Sample.Get(@"Menu/menuback");
+                    break;
+
+                case PauseButtonType.Retry:
+                    buttonColour = colours.YellowDark;
+                    sampleClick = audio.Sample.Get(@"Menu/menu-play-click");
+                    break;
+
+                case PauseButtonType.Quit:
+                    // For whatever reason the red from the mockup is not in the osu! palette
+                    buttonColour = new Color4(170, 27, 39, 255);
+                    sampleClick = audio.Sample.Get(@"Menu/menuback");
+                    break;
+            }
+
+            sampleHover = audio.Sample.Get(@"Menu/menuclick");
+
+            Add(new Drawable[]
+            {
+                backgroundContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 1f,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = backgroundColour,
+                        },
+                    }
+                },
+                glowContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 1f,
+                    Alpha = 0f,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Origin = Anchor.TopLeft,
+                            Anchor = Anchor.TopLeft,
+                            Width = 0.125f,
+                            ColourInfo = ColourInfo.GradientHorizontal(new Color4(buttonColour.R, buttonColour.G, buttonColour.B, glowGradientEndAlpha), buttonColour),
+                        },
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Origin = Anchor.TopRight,
+                            Anchor = Anchor.TopRight,
+                            Width = 0.125f,
+                            ColourInfo = ColourInfo.GradientHorizontal(buttonColour, new Color4(buttonColour.R, buttonColour.G, buttonColour.B, glowGradientEndAlpha)),
+                        },
+                    }
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Height = height,
+                    Origin = Anchor.Centre,
+                    Anchor = Anchor.Centre,
+                    Masking = true,
+                    Children = new Drawable[]
+                    {
+                        colourContainer = new Container
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Origin = Anchor.Centre,
+                            Anchor = Anchor.Centre,
+                            Width = colourWidth,
+                            Masking = true,
+                            EdgeEffect = new EdgeEffect
+                            {
+                                Type = EdgeEffectType.Shadow,
+                                Colour = Color4.Black.Opacity(0.2f),
+                                Radius = 5,
+                                Offset = new Vector2(0, 5),
+                            },
+                            Colour = buttonColour,
+                            Shear = new Vector2(shear, 0),
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    EdgeSmoothness = new Vector2(2, 0),
+                                    RelativeSizeAxes = Axes.Both,
+                                },
+                                new Triangles
+                                {
+                                    Masking = true,
+                                    BlendingMode = BlendingMode.Additive,
+                                    RelativeSizeAxes = Axes.Both,
+                                    TriangleScale = 4,
+                                    Alpha = 0.05f,
+                                    Shear = new Vector2(-shear, 0),
+                                },
+                            }
+                        },
+                    }
+                },
+                spriteText = new SpriteText
+                {
+                    Text = Text,
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    TextSize = 25,
+                    Font = "Exo2.0-Bold",
+                    Shadow = true,
+                    ShadowColour = new Color4(0, 0, 0, 0.1f),
+                    Colour = Color4.White,
+                },
+            });
         }
 
         public PauseButton()
         {
-            Size = new Vector2(width, height);
+            Height = height;
-            Colour = Color4.Black;
+            RelativeSizeAxes = Axes.X;
-            Shear = new Vector2(0.1f, 0);
         }
     }
+
+    public enum PauseButtonType
+    {
+        Resume,
+        Retry,
+        Quit
+    }
 }

osu.Game/Overlays/Pause/PauseOverlay.cs

@@ -10,7 +10,8 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Transformations;
-
+using osu.Game.Graphics.Backgrounds;
+using osu.Game.Screens.Menu;
 
 namespace osu.Game.Overlays.Pause
 {
@@ -25,60 +26,96 @@ namespace osu.Game.Overlays.Pause
 
         private int fadeDuration = 100;
         private double pauseCooldown = 1000;
-        private double lastActionTime = -1000;
+        private double lastActionTime = 0;
-
-        private PauseButton resumeButton;
-        private PauseButton retryButton;
-        private PauseButton quitButton;
 
         [BackgroundDependencyLoader]
-        private void load(AudioManager audio, OsuColour colours)
+        private void load(OsuColour colours)
         {
-            var sampleHover = audio.Sample.Get(@"Menu/menuclick");
-            var sampleBack = audio.Sample.Get(@"Menu/menuback");
-            var samplePlayClick = audio.Sample.Get(@"Menu/menu-play-click");
-
             Children = new Drawable[]
             {
                 new Box
                 {
                     RelativeSizeAxes = Axes.Both,
                     Colour = Color4.Black,
-                    Alpha = 0.6f,
+                    Alpha = 0.75f,
                 },
-                resumeButton = new PauseButton
+                new SpriteText
                 {
-                    Text = @"Resume",
+                    Text = @"paused",
+                    Origin = Anchor.BottomCentre,
+                    Anchor = Anchor.Centre,
+                    Position = new Vector2(0, -175),
+                    Font = @"Exo2.0-Medium",
+                    Spacing = new Vector2(5, 0),
+                    TextSize = 30,
+                    Colour = colours.Yellow,
+                    Shadow = true,
+                    ShadowColour = new Color4(0, 0, 0, 0.25f),
+                },
+                new SpriteText
+                {
+                    Text = @"you're not going to do what i think you're going to do, ain't ya?",
+                    Origin = Anchor.BottomCentre,
+                    Anchor = Anchor.Centre,
+                    Width = 100,
+                    Position = new Vector2(0, -125),
+                    Shadow = true,
+                    ShadowColour = new Color4(0, 0, 0, 0.25f),
+                },
+                new SpriteText
+                {
+                    Text = @"You've retried 0 times in this session",
+                    Origin = Anchor.TopCentre,
+                    Anchor = Anchor.Centre,
+                    Width = 100,
+                    Position = new Vector2(0, 175),
+                    Shadow = true,
+                    ShadowColour = new Color4(0, 0, 0, 0.25f),
+                    TextSize = 18,
+                },
+                new FlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
                     Origin = Anchor.Centre,
                     Anchor = Anchor.Centre,
-                    Position = new Vector2(0, -200),
+                    Position = new Vector2(0, 25),
+                    Masking = true,
+                    EdgeEffect = new EdgeEffect
+                    {
+                        Type = EdgeEffectType.Shadow,
+                        Colour = new Color4(0, 0, 0, 150),
+                        Radius = 50,
+                        Offset = new Vector2(0, 0),
+                    },
+
+                    Children = new Drawable[]
+                    {
+                        new PauseButton
+                        {
+                            Type = PauseButtonType.Resume,
+                            Origin = Anchor.TopCentre,
+                            Anchor = Anchor.TopCentre,
                             Action = Resume,
                         },
-                retryButton = new PauseButton
+                        new PauseButton
                         {
-                    Text = @"Retry",
+                            Type = PauseButtonType.Retry,
-                    Origin = Anchor.Centre,
+                            Origin = Anchor.TopCentre,
-                    Anchor = Anchor.Centre,
+                            Anchor = Anchor.TopCentre,
                             Action = Retry,
                         },
-                quitButton = new PauseButton
+                        new PauseButton
                         {
-                    Text = @"Quit",
+                            Type = PauseButtonType.Quit,
-                    Origin = Anchor.Centre,
+                            Origin = Anchor.TopCentre,
-                    Anchor = Anchor.Centre,
+                            Anchor = Anchor.TopCentre,
-                    Position = new Vector2(0, 200),
                             Action = Quit,
                         },
+                        new Button(@"solo", @"freeplay", FontAwesome.fa_user, new Color4(102, 68, 204, 255), () => OnPause?.Invoke(), 300, Key.P),
+                    }
+                },
             };
-
-            resumeButton.sampleHover = sampleHover;
-            resumeButton.sampleClick = sampleBack;
-
-            retryButton.sampleHover = sampleHover;
-            retryButton.sampleClick = samplePlayClick;
-
-            quitButton.sampleHover = sampleHover;
-            quitButton.sampleClick = sampleBack;
         }
 
         protected override void PopIn()