TwoLayerButton

osu.Desktop.VisualTests/Tests/TestCaseTwoLayerButton.cs

@@ -0,0 +1,27 @@
+//Copyright (c) 2007-2016 ppy Pty Ltd <contact@ppy.sh>.
+//Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using osu.Framework.GameModes.Testing;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Screens.Menu;
+using OpenTK.Graphics;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    class TestCaseTwoLayerButton : TestCase
+    {
+        public override string Name => @"TwoLayerButton";
+        public override string Description => @"Back and skip and what not";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            Add(new BackButton());
+            Add(new SkipButton());
+
+        }
+    }
+}

osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj

@@ -183,6 +183,7 @@
     <Compile Include="Tests\TestCaseScoreCounter.cs" />
     <Compile Include="Tests\TestCaseTextAwesome.cs" />
     <Compile Include="Tests\TestCasePlaySongSelect.cs" />
+    <Compile Include="Tests\TestCaseTwoLayerButton.cs" />
     <Compile Include="VisualTestGame.cs" />
     <Compile Include="Platform\TestStorage.cs" />
     <Compile Include="Tests\TestCaseOptions.cs" />

osu.Game/Graphics/UserInterface/BackButton.cs

@@ -9,34 +9,195 @@ using OpenTK.Graphics;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Primitives;
 using osu.Framework.Graphics.Transformations;
 using osu.Framework.Input;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    // Basic back button as it was on stable (kinda). No skinning possible for now
+    public class BackButton : TwoLayerButton
-    public class BackButton : ClickableContainer
+    {
+        public BackButton()
+        {
+            Text = @"Back";
+            Icon = FontAwesome.fa_osu_left_o;
+            Anchor = Anchor.BottomLeft;
+            Origin = Anchor.BottomLeft;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(AudioManager audio, OsuColour colours)
+        {
+            ActivationSound = audio.Sample.Get(@"Menu/menuback");
+            Colour = colours.Pink;
+            HoverColour = colours.PinkDark;
+        }
+    }
+
+    public class SkipButton : TwoLayerButton
+    {
+        public SkipButton()
+        {
+            Text = @"Skip";
+            Icon = FontAwesome.fa_osu_right_o;
+            Anchor = Anchor.BottomRight;
+            Origin = Anchor.BottomRight;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(AudioManager audio, OsuColour colours)
+        {
+            ActivationSound = audio.Sample.Get(@"Menu/menuhit");
+            Colour = colours.Yellow;
+            HoverColour = colours.YellowDark;
+        }
+    }
+
+    public class TwoLayerButton : ClickableContainer
     {
         private TextAwesome icon;
 
-        private Box leftBox;
+        public Box IconLayer;
-        private Box rightBox;
+        public Box TextLayer;
 
-        private const double transform_time = 600;
+        private const int transform_time = 600;
         private const int pulse_length = 250;
 
         private const float shear = 0.1f;
 
         public static readonly Vector2 SIZE_EXTENDED = new Vector2(140, 50);
-        public  static readonly Vector2 SIZE_RETRACTED = new Vector2(100, 50);
+        public static readonly Vector2 SIZE_RETRACTED = new Vector2(100, 50);
-        private AudioSample sampleClick;
+        public AudioSample ActivationSound;
+        private SpriteText text;
 
-        public BackButton()
+        public Color4 HoverColour;
+        private Container c1;
+        private Container c2;
+
+        public Color4 Colour
         {
-            Size = SIZE_RETRACTED;
+            set
+            {
+                TextLayer.Colour = value;
+                IconLayer.Colour = value;
+            }
         }
 
-        public override bool Contains(Vector2 screenSpacePos) => leftBox.Contains(screenSpacePos) || rightBox.Contains(screenSpacePos);
+        public override Anchor Origin
+        {
+            get
+            {
+                return base.Origin;
+            }
+
+            set
+            {
+                base.Origin = value;
+                c1.Origin = c1.Anchor = (value & Anchor.x2) > 0 ? Anchor.TopLeft : Anchor.TopRight;
+                c2.Origin = c2.Anchor = (value & Anchor.x2) > 0 ? Anchor.TopRight : Anchor.TopLeft;
+
+                Margin = new MarginPadding
+                {
+                    Right = (value & Anchor.x2) > 0 ? -SIZE_RETRACTED.X * shear * 0.5f : 0
+                };
+
+                c1.Depth = (value & Anchor.x2) > 0 ? 0 : 1;
+                c2.Depth = (value & Anchor.x2) > 0 ? 1 : 0;
+            }
+        }
+
+        public TwoLayerButton()
+        {
+            Size = SIZE_RETRACTED;
+
+            Children = new Drawable[]
+            {
+                c2 = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 0.4f,
+                    Children = new Drawable[]
+                    {
+                        new Container {
+                            RelativeSizeAxes = Axes.Both,
+                            Shear = new Vector2(shear, 0),
+                            Masking = true,
+                            EdgeEffect = new EdgeEffect {
+                                Type = EdgeEffectType.Shadow,
+                                Colour = Color4.Black.Opacity(0.2f),
+                                Offset = new Vector2(2, 0),
+                                Radius = 2,
+                            },
+                            Children = new [] {
+                                IconLayer = new Box
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    EdgeSmoothness = new Vector2(1.5f, 0),
+                                },
+                            }
+                        },
+                        icon = new TextAwesome
+                        {
+                            Anchor = Anchor.Centre,
+                            TextSize = 25,
+                        },
+                    }
+                },
+                c1 = new Container
+                {
+                    Origin = Anchor.TopRight,
+                    Anchor = Anchor.TopRight,
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 0.6f,
+                    Children = new Drawable[]
+                    {
+                        new Container {
+                            RelativeSizeAxes = Axes.Both,
+                            Shear = new Vector2(shear, 0),
+                            Masking = true,
+                            EdgeEffect = new EdgeEffect {
+                                Type = EdgeEffectType.Shadow,
+                                Colour = Color4.Black.Opacity(0.2f),
+                                Offset = new Vector2(2, 0),
+                                Radius = 2,
+                            },
+                            Children = new [] {
+                                TextLayer = new Box
+                                {
+                                    Origin = Anchor.TopLeft,
+                                    Anchor = Anchor.TopLeft,
+                                    RelativeSizeAxes = Axes.Both,
+                                    EdgeSmoothness = new Vector2(1.5f, 0),
+                                },
+                            }
+                        },
+                        text = new SpriteText
+                        {
+                            Origin = Anchor.Centre,
+                            Anchor = Anchor.Centre,
+                        }
+                    }
+                },
+            };
+        }
+
+        public FontAwesome Icon
+        {
+            set
+            {
+                icon.Icon = value;
+            }
+        }
+
+        public string Text
+        {
+            set
+            {
+                text.Text = value;
+            }
+        }
+
+        public override bool Contains(Vector2 screenSpacePos) => IconLayer.Contains(screenSpacePos) || TextLayer.Contains(screenSpacePos);
 
         protected override bool OnHover(InputState state)
         {
@@ -47,6 +208,8 @@ namespace osu.Game.Graphics.UserInterface
             int duration = 0; //(int)(Game.Audio.BeatLength / 2);
             if (duration == 0) duration = pulse_length;
 
+            IconLayer.FadeColour(HoverColour, transform_time, EasingTypes.OutElastic);
+
             double offset = 0; //(1 - Game.Audio.SyncBeatProgress) * duration;
             double startTime = Time.Current + offset;
 
@@ -71,6 +234,8 @@ namespace osu.Game.Graphics.UserInterface
 
             ResizeTo(SIZE_RETRACTED, transform_time, EasingTypes.OutElastic);
 
+            IconLayer.FadeColour(TextLayer.Colour, transform_time, EasingTypes.OutElastic);
+
             int duration = 0; //(int)(Game.Audio.BeatLength);
             if (duration == 0) duration = pulse_length * 2;
 
@@ -90,60 +255,6 @@ namespace osu.Game.Graphics.UserInterface
             });
         }
 
-        [BackgroundDependencyLoader]
-        private void load(AudioManager audio, OsuColour colours)
-        {
-            sampleClick = audio.Sample.Get(@"Menu/menuback");
-            Children = new Drawable[]
-            {
-                new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Width = 0.4f,
-                    Children = new Drawable[]
-                    {
-                        leftBox = new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Colour = colours.PinkDark,
-                            Shear = new Vector2(shear, 0),
-                        },
-                        icon = new TextAwesome
-                        {
-                            Anchor = Anchor.Centre,
-                            TextSize = 25,
-                            Icon = FontAwesome.fa_osu_left_o
-                        },
-                    }
-                },
-                new Container
-                {
-                    Origin = Anchor.TopRight,
-                    Anchor = Anchor.TopRight,
-                    RelativeSizeAxes = Axes.Both,
-                    Width = 0.6f,
-                    Children = new Drawable[]
-                    {
-                        rightBox = new Box
-                        {
-                            Colour = colours.Pink,
-                            Origin = Anchor.TopLeft,
-                            Anchor = Anchor.TopLeft,
-                            RelativeSizeAxes = Axes.Both,
-                            Shear = new Vector2(shear, 0),
-                            EdgeSmoothness = new Vector2(1.5f, 0),
-                        },
-                        new SpriteText
-                        {
-                            Origin = Anchor.Centre,
-                            Anchor = Anchor.Centre,
-                            Text = @"Back",
-                        }
-                    }
-                }
-            };
-        }
-
         protected override bool OnClick(InputState state)
         {
             var flash = new Box
@@ -157,7 +268,7 @@ namespace osu.Game.Graphics.UserInterface
             flash.FadeOutFromOne(200);
             flash.Expire();
 
-            sampleClick.Play();
+            ActivationSound.Play();
 
             return base.OnClick(state);
         }

osu.Game/Graphics/UserInterface/SkipButton.cs

@@ -1,53 +0,0 @@
-using System;
-using OpenTK.Graphics;
-using OpenTK.Input;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input;
-using osu.Framework.Timing;
-
-namespace osu.Game.Graphics.UserInterface
-{
-    class SkipButton : Button
-    {
-        private IAdjustableClock sourceClock;
-        private double time;
-        public SkipButton(IAdjustableClock clock, double time) 
-        {
-            Height = 60;
-            Width = 100;
-            Text = "skip";
-            Colour = new Color4(238, 51, 153, 255);
-            Action = skip;
-            sourceClock = clock;
-            this.time = time;
-        }
-
-        protected override void LoadComplete()
-        {
-            base.LoadComplete();
-
-            Delay(time - 3000, true);
-            Content.FadeOut(250);
-        }
-
-        private void skip()
-        {
-            sourceClock.Seek(time - 3000);
-            FadeOut(250);
-        }
-
-        protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
-        {
-            switch (args.Key)
-            {
-                case Key.Space:
-                    if(sourceClock.CurrentTime + 3000 < time)
-                        skip();
-                    return true;
-            }
-
-            return base.OnKeyDown(state, args);
-        }
-    }
-}

osu.Game/Screens/Play/Player.cs

@@ -119,7 +119,7 @@ namespace osu.Game.Screens.Play
                     }
                 },
                 scoreOverlay,
-                new SkipButton(sourceClock, beatmap.HitObjects.First().StartTime)
+                //new SkipButton(sourceClock, beatmap.HitObjects.First().StartTime)
             };
         }
 

osu.Game/osu.Game.csproj

@@ -67,7 +67,6 @@
     <Compile Include="Graphics\Backgrounds\Triangles.cs" />
     <Compile Include="Graphics\Cursor\CursorTrail.cs" />
     <Compile Include="Graphics\UserInterface\BackButton.cs" />
-    <Compile Include="Graphics\UserInterface\SkipButton.cs" />
     <Compile Include="Modes\Objects\HitObjectParser.cs" />
     <Compile Include="Modes\Score.cs" />
     <Compile Include="Modes\ScoreProcesssor.cs" />