Add arrows

osu.Game/Screens/Play/BreaksOverlay/BlurredIcon.cs

@@ -0,0 +1,40 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics;
+using osu.Game.Graphics;
+
+namespace osu.Game.Screens.Play.BreaksOverlay
+{
+    public class BlurredIcon : BufferedContainer
+    {
+        private const int icon_size = 130;
+
+        private readonly GlowingIcon icon;
+
+        public FontAwesome Icon
+        {
+            set { icon.Icon = value; }
+            get { return icon.Icon; }
+        }
+
+        public BlurredIcon()
+        {
+            Anchor = Anchor.CentreLeft;
+            RelativePositionAxes = Axes.X;
+            Size = new Vector2(icon_size * 1.7f);
+            Masking = true;
+            BlurSigma = new Vector2(20);
+            Alpha = 0.6f;
+            CacheDrawnFrameBuffer = true;
+            Child = icon = new GlowingIcon
+            {
+                Origin = Anchor.Centre,
+                Anchor = Anchor.Centre,
+                Size = new Vector2(icon_size),
+            };
+        }
+    }
+}

osu.Game/Screens/Play/BreaksOverlay/BreakOverlay.cs

@@ -14,8 +14,11 @@ namespace osu.Game.Screens.Play.BreaksOverlay
     public class BreakOverlay : Container
     {
         private const double fade_duration = BreakPeriod.MIN_BREAK_DURATION / 2;
-        private const int remaining_time_container_max_size = 450;
+        private const float remaining_time_container_max_size = 0.35f;
-        private const int element_margin = 25;
+        private const int vertical_margin = 25;
+        private const float glowing_x_offset = 0.13f;
+        private const float glowing_x_final = 0.22f;
+        private const float blurred_x_offset = 0.2f;
 
         public List<BreakPeriod> Breaks;
 
@@ -34,6 +37,12 @@ namespace osu.Game.Screens.Play.BreaksOverlay
         private readonly RemainingTimeCounter remainingTimeCounter;
         private readonly InfoContainer info;
 
+        private readonly GlowingIcon leftGlowingIcon;
+        private readonly GlowingIcon rightGlowingIcon;
+
+        private readonly BlurredIcon leftBlurredIcon;
+        private readonly BlurredIcon rightBlurredIcon;
+
         public BreakOverlay(bool letterboxing)
         {
             this.letterboxing = letterboxing;
@@ -41,11 +50,16 @@ namespace osu.Game.Screens.Play.BreaksOverlay
             RelativeSizeAxes = Axes.Both;
             Children = new Drawable[]
             {
-                letterboxOverlay = new LetterboxOverlay(),
+                letterboxOverlay = new LetterboxOverlay
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                },
                 remainingTimeBox = new Container
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.X,
                     Size = new Vector2(0, 8),
                     CornerRadius = 4,
                     Masking = true,
@@ -55,13 +69,35 @@ namespace osu.Game.Screens.Play.BreaksOverlay
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.BottomCentre,
-                    Margin = new MarginPadding { Bottom = element_margin },
+                    Margin = new MarginPadding { Bottom = vertical_margin },
                 },
                 info = new InfoContainer
                 {
                     Anchor = Anchor.Centre,
                     Origin = Anchor.TopCentre,
-                    Margin = new MarginPadding { Top = element_margin },
+                    Margin = new MarginPadding { Top = vertical_margin },
+                },
+                leftGlowingIcon = new GlowingIcon
+                {
+                    Origin = Anchor.CentreRight,
+                    Icon = Graphics.FontAwesome.fa_chevron_left,
+                    Size = new Vector2(60),
+                },
+                rightGlowingIcon = new GlowingIcon
+                {
+                    Origin = Anchor.CentreLeft,
+                    Icon = Graphics.FontAwesome.fa_chevron_right,
+                    Size = new Vector2(60),
+                },
+                leftBlurredIcon = new BlurredIcon
+                {
+                    Origin = Anchor.CentreRight,
+                    Icon = Graphics.FontAwesome.fa_chevron_left,
+                },
+                rightBlurredIcon = new BlurredIcon
+                {
+                    Origin = Anchor.CentreLeft,
+                    Icon = Graphics.FontAwesome.fa_chevron_right,
                 }
             };
         }
@@ -102,10 +138,16 @@ namespace osu.Game.Screens.Play.BreaksOverlay
                 .Then()
                 .ResizeWidthTo(0, b.Duration);
 
-            Scheduler.AddDelayed(() => remainingTimeCounter.StartCounting(b.EndTime), b.StartTime - Clock.CurrentTime);
+            Scheduler.AddDelayed(() => remainingTimeCounter.StartCounting(b.EndTime), b.StartTime);
             remainingTimeCounter.FadeIn(fade_duration);
 
             info.FadeIn(fade_duration);
+
+            leftGlowingIcon.MoveToX(1 - glowing_x_final, fade_duration, Easing.OutQuint);
+            rightGlowingIcon.MoveToX(glowing_x_final, fade_duration, Easing.OutQuint);
+
+            leftBlurredIcon.MoveToX(1, fade_duration, Easing.OutQuint);
+            rightBlurredIcon.MoveToX(0, fade_duration, Easing.OutQuint);
         }
 
         private void onBreakOut()
@@ -115,6 +157,12 @@ namespace osu.Game.Screens.Play.BreaksOverlay
 
             remainingTimeCounter.FadeOut(fade_duration);
             info.FadeOut(fade_duration);
+
+            leftGlowingIcon.MoveToX(1 + glowing_x_offset, fade_duration, Easing.OutQuint);
+            rightGlowingIcon.MoveToX(-glowing_x_offset, fade_duration, Easing.OutQuint);
+
+            leftBlurredIcon.MoveToX(1 + blurred_x_offset, fade_duration, Easing.OutQuint);
+            rightBlurredIcon.MoveToX(-blurred_x_offset, fade_duration, Easing.OutQuint);
         }
     }
 }

osu.Game/Screens/Play/BreaksOverlay/GlowingIcon.cs

@@ -0,0 +1,74 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using OpenTK;
+using OpenTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics;
+
+namespace osu.Game.Screens.Play.BreaksOverlay
+{
+    public class GlowingIcon : Container
+    {
+        private readonly SpriteIcon icon;
+        private readonly SpriteIcon glow;
+        private readonly BufferedContainer glowContainer;
+
+        public FontAwesome Icon
+        {
+            set { icon.Icon = glow.Icon = value; }
+            get { return icon.Icon; }
+        }
+
+        public override Vector2 Size
+        {
+            set
+            {
+                glow.Size = icon.Size = value;
+                glowContainer.Size = value * 1.5f;
+            }
+            get
+            {
+                return glow.Size;
+            }
+        }
+
+        public GlowingIcon()
+        {
+            Anchor = Anchor.CentreLeft;
+            RelativePositionAxes = Axes.X;
+            AutoSizeAxes = Axes.Both;
+            Children = new Drawable[]
+            {
+                glowContainer = new BufferedContainer
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Masking = true,
+                    BlurSigma = new Vector2(10),
+                    CacheDrawnFrameBuffer = true,
+                    Child = glow = new SpriteIcon
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Shadow = false,
+                    },
+                },
+                icon = new SpriteIcon
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Shadow = false,
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            glow.Colour = colours.Blue;
+        }
+    }
+}

osu.Game/Screens/Play/BreaksOverlay/LetterboxOverlay.cs

@@ -7,7 +7,7 @@ using osu.Framework.Graphics.Colour;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
 
-namespace osu.Game.Screens.Play
+namespace osu.Game.Screens.Play.BreaksOverlay
 {
     public class LetterboxOverlay : Container
     {
@@ -60,4 +60,4 @@ namespace osu.Game.Screens.Play
             };
         }
     }
-}
+}

osu.Game/osu.Game.csproj

@@ -275,10 +275,12 @@
     <Compile Include="Beatmaps\Formats\OsuLegacyDecoder.cs" />
     <Compile Include="Beatmaps\IO\ArchiveReader.cs" />
     <Compile Include="Beatmaps\IO\LegacyFilesystemReader.cs" />
+    <Compile Include="Screens\Play\BreaksOverlay\BlurredIcon.cs" />
     <Compile Include="Screens\Play\BreaksOverlay\BreakOverlay.cs" />
+    <Compile Include="Screens\Play\BreaksOverlay\GlowingIcon.cs" />
     <Compile Include="Screens\Play\BreaksOverlay\InfoContainer.cs" />
+    <Compile Include="Screens\Play\BreaksOverlay\LetterboxOverlay.cs" />
     <Compile Include="Screens\Play\BreaksOverlay\RemainingTimeCounter.cs" />
-    <Compile Include="Screens\Play\LetterboxOverlay.cs" />
     <Compile Include="Beatmaps\IO\OszArchiveReader.cs" />
     <Compile Include="Beatmaps\Legacy\LegacyBeatmap.cs" />
     <Compile Include="Beatmaps\RankStatus.cs" />