Merge pull request #12393 from peppy/update-timeline-design-a-bit

Update timeline tick display to differentiate tick type using width

osu.Game.Tests/Visual/Editing/TimelineTestScene.cs

@@ -64,6 +64,13 @@ namespace osu.Game.Tests.Visual.Editing
             });
         }
 
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Clock.Seek(2500);
+        }
+
         public abstract Drawable CreateTestComponent();
 
         private class AudioVisualiser : CompositeDrawable

osu.Game/Screens/Edit/Components/Timelines/Summary/Visualisations/PointVisualisation.cs

@@ -3,7 +3,6 @@
 
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Shapes;
-using osuTK;
 
 namespace osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations
 {
@@ -12,7 +11,7 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations
     /// </summary>
     public class PointVisualisation : Box
     {
-        public const float WIDTH = 1;
+        public const float MAX_WIDTH = 4;
 
         public PointVisualisation(double startTime)
             : this()
@@ -27,8 +26,11 @@ namespace osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations
             RelativePositionAxes = Axes.X;
             RelativeSizeAxes = Axes.Y;
 
-            Width = WIDTH;
+            Anchor = Anchor.CentreLeft;
-            EdgeSmoothness = new Vector2(WIDTH, 0);
+            Origin = Anchor.Centre;
+
+            Width = MAX_WIDTH;
+            Height = 0.75f;
         }
     }
 }

osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineTickDisplay.cs

@@ -6,9 +6,7 @@ using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Caching;
-using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
-using osu.Framework.Graphics.Colour;
 using osu.Game.Beatmaps;
 using osu.Game.Graphics;
 using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts;
@@ -33,6 +31,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
         [Resolved]
         private OsuColour colours { get; set; }
 
+        private static readonly int highest_divisor = BindableBeatDivisor.VALID_DIVISORS.Last();
+
         public TimelineTickDisplay()
         {
             RelativeSizeAxes = Axes.Both;
@@ -80,8 +80,8 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
             if (timeline != null)
             {
                 var newRange = (
-                    (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopLeft).X - PointVisualisation.WIDTH * 2) / DrawWidth * Content.RelativeChildSize.X,
+                    (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopLeft).X - PointVisualisation.MAX_WIDTH * 2) / DrawWidth * Content.RelativeChildSize.X,
-                    (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopRight).X + PointVisualisation.WIDTH * 2) / DrawWidth * Content.RelativeChildSize.X);
+                    (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopRight).X + PointVisualisation.MAX_WIDTH * 2) / DrawWidth * Content.RelativeChildSize.X);
 
                 if (visibleRange != newRange)
                 {
@@ -100,7 +100,6 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
         private void createTicks()
         {
             int drawableIndex = 0;
-            int highestDivisor = BindableBeatDivisor.VALID_DIVISORS.Last();
 
             nextMinTick = null;
             nextMaxTick = null;
@@ -131,25 +130,13 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
                         var divisor = BindableBeatDivisor.GetDivisorForBeatIndex(beat, beatDivisor.Value);
                         var colour = BindableBeatDivisor.GetColourFor(divisor, colours);
 
-                        bool isMainBeat = indexInBar == 0;
-
                         // even though "bar lines" take up the full vertical space, we render them in two pieces because it allows for less anchor/origin churn.
-                        float height = isMainBeat ? 0.5f : 0.4f - (float)divisor / highestDivisor * 0.2f;
-                        float gradientOpacity = isMainBeat ? 1 : 0;
 
-                        var topPoint = getNextUsablePoint();
+                        var line = getNextUsableLine();
-                        topPoint.X = xPos;
+                        line.X = xPos;
-                        topPoint.Height = height;
+                        line.Width = PointVisualisation.MAX_WIDTH * getWidth(indexInBar, divisor);
-                        topPoint.Colour = ColourInfo.GradientVertical(colour, colour.Opacity(gradientOpacity));
+                        line.Height = 0.9f * getHeight(indexInBar, divisor);
-                        topPoint.Anchor = Anchor.TopLeft;
+                        line.Colour = colour;
-                        topPoint.Origin = Anchor.TopCentre;
-
-                        var bottomPoint = getNextUsablePoint();
-                        bottomPoint.X = xPos;
-                        bottomPoint.Anchor = Anchor.BottomLeft;
-                        bottomPoint.Colour = ColourInfo.GradientVertical(colour.Opacity(gradientOpacity), colour);
-                        bottomPoint.Origin = Anchor.BottomCentre;
-                        bottomPoint.Height = height;
                     }
 
                     beat++;
@@ -168,7 +155,7 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
 
             tickCache.Validate();
 
-            Drawable getNextUsablePoint()
+            Drawable getNextUsableLine()
             {
                 PointVisualisation point;
                 if (drawableIndex >= Count)
@@ -183,6 +170,54 @@ namespace osu.Game.Screens.Edit.Compose.Components.Timeline
             }
         }
 
+        private static float getWidth(int indexInBar, int divisor)
+        {
+            if (indexInBar == 0)
+                return 1;
+
+            switch (divisor)
+            {
+                case 1:
+                case 2:
+                    return 0.6f;
+
+                case 3:
+                case 4:
+                    return 0.5f;
+
+                case 6:
+                case 8:
+                    return 0.4f;
+
+                default:
+                    return 0.3f;
+            }
+        }
+
+        private static float getHeight(int indexInBar, int divisor)
+        {
+            if (indexInBar == 0)
+                return 1;
+
+            switch (divisor)
+            {
+                case 1:
+                case 2:
+                    return 0.9f;
+
+                case 3:
+                case 4:
+                    return 0.8f;
+
+                case 6:
+                case 8:
+                    return 0.7f;
+
+                default:
+                    return 0.6f;
+            }
+        }
+
         protected override void Dispose(bool isDisposing)
         {
             base.Dispose(isDisposing);