Merge pull request #9971 from smoogipoo/fix-hittarget-layering

osu.Game.Rulesets.Mania.Tests/Skinning/TestSceneStageBackground.cs

@@ -3,6 +3,7 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Rulesets.Mania.UI.Components;
 using osu.Game.Skinning;
 
@@ -13,7 +14,8 @@ namespace osu.Game.Rulesets.Mania.Tests.Skinning
         [BackgroundDependencyLoader]
         private void load()
         {
-            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground), _ => new DefaultStageBackground())
+            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground, stageDefinition: new StageDefinition { Columns = 4 }),
+                _ => new DefaultStageBackground())
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,

osu.Game.Rulesets.Mania.Tests/Skinning/TestSceneStageForeground.cs

@@ -3,6 +3,7 @@
 
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
+using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Skinning;
 
 namespace osu.Game.Rulesets.Mania.Tests.Skinning
@@ -12,7 +13,7 @@ namespace osu.Game.Rulesets.Mania.Tests.Skinning
         [BackgroundDependencyLoader]
         private void load()
         {
-            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground), _ => null)
+            SetContents(() => new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground, stageDefinition: new StageDefinition { Columns = 4 }), _ => null)
             {
                 Anchor = Anchor.Centre,
                 Origin = Anchor.Centre,

osu.Game.Rulesets.Mania/Beatmaps/StageDefinition.cs

@@ -21,14 +21,14 @@ namespace osu.Game.Rulesets.Mania.Beatmaps
         /// </summary>
         /// <param name="column">The 0-based column index.</param>
         /// <returns>Whether the column is a special column.</returns>
-        public bool IsSpecialColumn(int column) => Columns % 2 == 1 && column == Columns / 2;
+        public readonly bool IsSpecialColumn(int column) => Columns % 2 == 1 && column == Columns / 2;
 
         /// <summary>
         /// Get the type of column given a column index.
         /// </summary>
         /// <param name="column">The 0-based column index.</param>
         /// <returns>The type of the column.</returns>
-        public ColumnType GetTypeOfColumn(int column)
+        public readonly ColumnType GetTypeOfColumn(int column)
         {
             if (IsSpecialColumn(column))
                 return ColumnType.Special;

osu.Game.Rulesets.Mania/ManiaSkinComponent.cs

@@ -1,6 +1,7 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Rulesets.Mania.UI;
 using osu.Game.Skinning;
 
@@ -14,15 +15,23 @@ namespace osu.Game.Rulesets.Mania
         /// </summary>
         public readonly int? TargetColumn;
 
+        /// <summary>
+        /// The intended <see cref="StageDefinition"/> for this component.
+        /// May be null if the component is not a direct member of a <see cref="Stage"/>.
+        /// </summary>
+        public readonly StageDefinition? StageDefinition;
+
         /// <summary>
         /// Creates a new <see cref="ManiaSkinComponent"/>.
         /// </summary>
         /// <param name="component">The component.</param>
         /// <param name="targetColumn">The intended <see cref="Column"/> index for this component. May be null if the component does not exist in a <see cref="Column"/>.</param>
-        public ManiaSkinComponent(ManiaSkinComponents component, int? targetColumn = null)
+        /// <param name="stageDefinition">The intended <see cref="StageDefinition"/> for this component. May be null if the component is not a direct member of a <see cref="Stage"/>.</param>
+        public ManiaSkinComponent(ManiaSkinComponents component, int? targetColumn = null, StageDefinition? stageDefinition = null)
             : base(component)
         {
             TargetColumn = targetColumn;
+            StageDefinition = stageDefinition;
         }
 
         protected override string RulesetPrefix => ManiaRuleset.SHORT_NAME;

osu.Game.Rulesets.Mania/Skinning/LegacyColumnBackground.cs

@@ -5,10 +5,8 @@ using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Input.Bindings;
-using osu.Game.Rulesets.Mania.UI;
 using osu.Game.Rulesets.UI.Scrolling;
 using osu.Game.Skinning;
 using osuTK;
@@ -19,17 +17,12 @@ namespace osu.Game.Rulesets.Mania.Skinning
     public class LegacyColumnBackground : LegacyManiaColumnElement, IKeyBindingHandler<ManiaAction>
     {
         private readonly IBindable<ScrollingDirection> direction = new Bindable<ScrollingDirection>();
-        private readonly bool isLastColumn;
 
-        private Container borderLineContainer;
         private Container lightContainer;
         private Sprite light;
 
-        private float hitPosition;
+        public LegacyColumnBackground()
-
-        public LegacyColumnBackground(bool isLastColumn)
         {
-            this.isLastColumn = isLastColumn;
             RelativeSizeAxes = Axes.Both;
         }
 
@@ -39,62 +32,14 @@ namespace osu.Game.Rulesets.Mania.Skinning
             string lightImage = skin.GetManiaSkinConfig<string>(LegacyManiaSkinConfigurationLookups.LightImage)?.Value
                                 ?? "mania-stage-light";
 
-            float leftLineWidth = GetColumnSkinConfig<float>(skin, LegacyManiaSkinConfigurationLookups.LeftLineWidth)
-                ?.Value ?? 1;
-            float rightLineWidth = GetColumnSkinConfig<float>(skin, LegacyManiaSkinConfigurationLookups.RightLineWidth)
-                ?.Value ?? 1;
-
-            bool hasLeftLine = leftLineWidth > 0;
-            bool hasRightLine = rightLineWidth > 0 && skin.GetConfig<LegacySkinConfiguration.LegacySetting, decimal>(LegacySkinConfiguration.LegacySetting.Version)?.Value >= 2.4m
-                                || isLastColumn;
-
-            hitPosition = GetColumnSkinConfig<float>(skin, LegacyManiaSkinConfigurationLookups.HitPosition)?.Value
-                          ?? Stage.HIT_TARGET_POSITION;
-
             float lightPosition = GetColumnSkinConfig<float>(skin, LegacyManiaSkinConfigurationLookups.LightPosition)?.Value
                                   ?? 0;
 
-            Color4 lineColour = GetColumnSkinConfig<Color4>(skin, LegacyManiaSkinConfigurationLookups.ColumnLineColour)?.Value
-                                ?? Color4.White;
-
-            Color4 backgroundColour = GetColumnSkinConfig<Color4>(skin, LegacyManiaSkinConfigurationLookups.ColumnBackgroundColour)?.Value
-                                      ?? Color4.Black;
-
             Color4 lightColour = GetColumnSkinConfig<Color4>(skin, LegacyManiaSkinConfigurationLookups.ColumnLightColour)?.Value
                                  ?? Color4.White;
 
-            InternalChildren = new Drawable[]
+            InternalChildren = new[]
             {
-                new Box
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Colour = backgroundColour
-                },
-                borderLineContainer = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Children = new[]
-                    {
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Y,
-                            Width = leftLineWidth,
-                            Scale = new Vector2(0.740f, 1),
-                            Colour = lineColour,
-                            Alpha = hasLeftLine ? 1 : 0
-                        },
-                        new Box
-                        {
-                            Anchor = Anchor.TopRight,
-                            Origin = Anchor.TopRight,
-                            RelativeSizeAxes = Axes.Y,
-                            Width = rightLineWidth,
-                            Scale = new Vector2(0.740f, 1),
-                            Colour = lineColour,
-                            Alpha = hasRightLine ? 1 : 0
-                        }
-                    }
-                },
                 lightContainer = new Container
                 {
                     Origin = Anchor.BottomCentre,
@@ -123,15 +68,11 @@ namespace osu.Game.Rulesets.Mania.Skinning
             {
                 lightContainer.Anchor = Anchor.TopCentre;
                 lightContainer.Scale = new Vector2(1, -1);
-
-                borderLineContainer.Padding = new MarginPadding { Top = hitPosition };
             }
             else
             {
                 lightContainer.Anchor = Anchor.BottomCentre;
                 lightContainer.Scale = Vector2.One;
-
-                borderLineContainer.Padding = new MarginPadding { Bottom = hitPosition };
             }
         }
 

osu.Game.Rulesets.Mania/Skinning/LegacyHitTarget.cs

@@ -20,11 +20,6 @@ namespace osu.Game.Rulesets.Mania.Skinning
 
         private Container directionContainer;
 
-        public LegacyHitTarget()
-        {
-            RelativeSizeAxes = Axes.Both;
-        }
-
         [BackgroundDependencyLoader]
         private void load(ISkinSource skin, IScrollingInfo scrollingInfo)
         {

osu.Game.Rulesets.Mania/Skinning/LegacyStageBackground.cs

@@ -2,21 +2,31 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Rulesets.Mania.Beatmaps;
+using osu.Game.Rulesets.Mania.UI;
+using osu.Game.Rulesets.UI.Scrolling;
 using osu.Game.Skinning;
 using osuTK;
+using osuTK.Graphics;
 
 namespace osu.Game.Rulesets.Mania.Skinning
 {
     public class LegacyStageBackground : CompositeDrawable
     {
+        private readonly StageDefinition stageDefinition;
+
         private Drawable leftSprite;
         private Drawable rightSprite;
+        private ColumnFlow<Drawable> columnBackgrounds;
 
-        public LegacyStageBackground()
+        public LegacyStageBackground(StageDefinition stageDefinition)
         {
+            this.stageDefinition = stageDefinition;
             RelativeSizeAxes = Axes.Both;
         }
 
@@ -44,8 +54,19 @@ namespace osu.Game.Rulesets.Mania.Skinning
                     Origin = Anchor.TopLeft,
                     X = -0.05f,
                     Texture = skin.GetTexture(rightImage)
+                },
+                columnBackgrounds = new ColumnFlow<Drawable>(stageDefinition)
+                {
+                    RelativeSizeAxes = Axes.Y
+                },
+                new HitTargetInsetContainer
+                {
+                    Child = new LegacyHitTarget { RelativeSizeAxes = Axes.Both }
                 }
             };
+
+            for (int i = 0; i < stageDefinition.Columns; i++)
+                columnBackgrounds.SetContentForColumn(i, new ColumnBackground(i, i == stageDefinition.Columns - 1));
         }
 
         protected override void Update()
@@ -58,5 +79,104 @@ namespace osu.Game.Rulesets.Mania.Skinning
             if (rightSprite?.Height > 0)
                 rightSprite.Scale = new Vector2(1, DrawHeight / rightSprite.Height);
         }
+
+        private class ColumnBackground : CompositeDrawable
+        {
+            private readonly int columnIndex;
+            private readonly bool isLastColumn;
+
+            public ColumnBackground(int columnIndex, bool isLastColumn)
+            {
+                this.columnIndex = columnIndex;
+                this.isLastColumn = isLastColumn;
+
+                RelativeSizeAxes = Axes.Both;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(ISkinSource skin)
+            {
+                float leftLineWidth = skin.GetManiaSkinConfig<float>(LegacyManiaSkinConfigurationLookups.LeftLineWidth, columnIndex)?.Value ?? 1;
+                float rightLineWidth = skin.GetManiaSkinConfig<float>(LegacyManiaSkinConfigurationLookups.RightLineWidth, columnIndex)?.Value ?? 1;
+
+                bool hasLeftLine = leftLineWidth > 0;
+                bool hasRightLine = rightLineWidth > 0 && skin.GetConfig<LegacySkinConfiguration.LegacySetting, decimal>(LegacySkinConfiguration.LegacySetting.Version)?.Value >= 2.4m
+                                    || isLastColumn;
+
+                Color4 lineColour = skin.GetManiaSkinConfig<Color4>(LegacyManiaSkinConfigurationLookups.ColumnLineColour, columnIndex)?.Value ?? Color4.White;
+                Color4 backgroundColour = skin.GetManiaSkinConfig<Color4>(LegacyManiaSkinConfigurationLookups.ColumnBackgroundColour, columnIndex)?.Value ?? Color4.Black;
+
+                InternalChildren = new Drawable[]
+                {
+                    new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Child = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = backgroundColour
+                        },
+                    },
+                    new HitTargetInsetContainer
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Children = new[]
+                        {
+                            new Box
+                            {
+                                RelativeSizeAxes = Axes.Y,
+                                Width = leftLineWidth,
+                                Scale = new Vector2(0.740f, 1),
+                                Colour = lineColour,
+                                Alpha = hasLeftLine ? 1 : 0
+                            },
+                            new Box
+                            {
+                                Anchor = Anchor.TopRight,
+                                Origin = Anchor.TopRight,
+                                RelativeSizeAxes = Axes.Y,
+                                Width = rightLineWidth,
+                                Scale = new Vector2(0.740f, 1),
+                                Colour = lineColour,
+                                Alpha = hasRightLine ? 1 : 0
+                            },
+                        }
+                    }
+                };
+            }
+        }
+
+        private class HitTargetInsetContainer : Container
+        {
+            private readonly IBindable<ScrollingDirection> direction = new Bindable<ScrollingDirection>();
+
+            protected override Container<Drawable> Content => content;
+            private readonly Container content;
+
+            private float hitPosition;
+
+            public HitTargetInsetContainer()
+            {
+                RelativeSizeAxes = Axes.Both;
+
+                InternalChild = content = new Container { RelativeSizeAxes = Axes.Both };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(ISkinSource skin, IScrollingInfo scrollingInfo)
+            {
+                hitPosition = skin.GetManiaSkinConfig<float>(LegacyManiaSkinConfigurationLookups.HitPosition)?.Value ?? Stage.HIT_TARGET_POSITION;
+
+                direction.BindTo(scrollingInfo.Direction);
+                direction.BindValueChanged(onDirectionChanged, true);
+            }
+
+            private void onDirectionChanged(ValueChangedEvent<ScrollingDirection> direction)
+            {
+                content.Padding = direction.NewValue == ScrollingDirection.Up
+                    ? new MarginPadding { Top = hitPosition }
+                    : new MarginPadding { Bottom = hitPosition };
+            }
+        }
     }
 }

osu.Game.Rulesets.Mania/Skinning/ManiaLegacySkinTransformer.cs

@@ -9,6 +9,7 @@ using osu.Game.Beatmaps;
 using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Skinning;
 using System.Collections.Generic;
+using System.Diagnostics;
 using osu.Framework.Audio.Sample;
 using osu.Game.Audio;
 using osu.Game.Rulesets.Objects.Legacy;
@@ -88,10 +89,12 @@ namespace osu.Game.Rulesets.Mania.Skinning
                     switch (maniaComponent.Component)
                     {
                         case ManiaSkinComponents.ColumnBackground:
-                            return new LegacyColumnBackground(maniaComponent.TargetColumn == beatmap.TotalColumns - 1);
+                            return new LegacyColumnBackground();
 
                         case ManiaSkinComponents.HitTarget:
-                            return new LegacyHitTarget();
+                            // Legacy skins sandwich the hit target between the column background and the column light.
+                            // To preserve this ordering, it's created manually inside LegacyStageBackground.
+                            return Drawable.Empty();
 
                         case ManiaSkinComponents.KeyArea:
                             return new LegacyKeyArea();
@@ -112,7 +115,8 @@ namespace osu.Game.Rulesets.Mania.Skinning
                             return new LegacyHitExplosion();
 
                         case ManiaSkinComponents.StageBackground:
-                            return new LegacyStageBackground();
+                            Debug.Assert(maniaComponent.StageDefinition != null);
+                            return new LegacyStageBackground(maniaComponent.StageDefinition.Value);
 
                         case ManiaSkinComponents.StageForeground:
                             return new LegacyStageForeground();

osu.Game.Rulesets.Mania/UI/Column.cs

@@ -68,8 +68,6 @@ namespace osu.Game.Rulesets.Mania.UI
             TopLevelContainer.Add(HitObjectArea.Explosions.CreateProxy());
         }
 
-        public override Axes RelativeSizeAxes => Axes.Y;
-
         public ColumnType ColumnType { get; set; }
 
         public bool IsSpecial => ColumnType == ColumnType.Special;

osu.Game.Rulesets.Mania/UI/ColumnFlow.cs

@@ -0,0 +1,105 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Rulesets.Mania.Beatmaps;
+using osu.Game.Rulesets.Mania.Skinning;
+using osu.Game.Skinning;
+
+namespace osu.Game.Rulesets.Mania.UI
+{
+    /// <summary>
+    /// A <see cref="Drawable"/> which flows its contents according to the <see cref="Column"/>s in a <see cref="Stage"/>.
+    /// Content can be added to individual columns via <see cref="SetContentForColumn"/>.
+    /// </summary>
+    /// <typeparam name="TContent">The type of content in each column.</typeparam>
+    public class ColumnFlow<TContent> : CompositeDrawable
+        where TContent : Drawable
+    {
+        /// <summary>
+        /// All contents added to this <see cref="ColumnFlow{TContent}"/>.
+        /// </summary>
+        public IReadOnlyList<TContent> Content => columns.Children.Select(c => c.Count == 0 ? null : (TContent)c.Child).ToList();
+
+        private readonly FillFlowContainer<Container> columns;
+        private readonly StageDefinition stageDefinition;
+
+        public ColumnFlow(StageDefinition stageDefinition)
+        {
+            this.stageDefinition = stageDefinition;
+
+            AutoSizeAxes = Axes.X;
+
+            InternalChild = columns = new FillFlowContainer<Container>
+            {
+                RelativeSizeAxes = Axes.Y,
+                AutoSizeAxes = Axes.X,
+                Direction = FillDirection.Horizontal,
+            };
+
+            for (int i = 0; i < stageDefinition.Columns; i++)
+                columns.Add(new Container { RelativeSizeAxes = Axes.Y });
+        }
+
+        private ISkinSource currentSkin;
+
+        [BackgroundDependencyLoader]
+        private void load(ISkinSource skin)
+        {
+            currentSkin = skin;
+
+            skin.SourceChanged += onSkinChanged;
+            onSkinChanged();
+        }
+
+        private void onSkinChanged()
+        {
+            for (int i = 0; i < stageDefinition.Columns; i++)
+            {
+                if (i > 0)
+                {
+                    float spacing = currentSkin.GetConfig<ManiaSkinConfigurationLookup, float>(
+                                                   new ManiaSkinConfigurationLookup(LegacyManiaSkinConfigurationLookups.ColumnSpacing, i - 1))
+                                               ?.Value ?? Stage.COLUMN_SPACING;
+
+                    columns[i].Margin = new MarginPadding { Left = spacing };
+                }
+
+                float? width = currentSkin.GetConfig<ManiaSkinConfigurationLookup, float>(
+                                              new ManiaSkinConfigurationLookup(LegacyManiaSkinConfigurationLookups.ColumnWidth, i))
+                                          ?.Value;
+
+                if (width == null)
+                    // only used by default skin (legacy skins get defaults set in LegacyManiaSkinConfiguration)
+                    columns[i].Width = stageDefinition.IsSpecialColumn(i) ? Column.SPECIAL_COLUMN_WIDTH : Column.COLUMN_WIDTH;
+                else
+                    columns[i].Width = width.Value;
+            }
+        }
+
+        /// <summary>
+        /// Sets the content of one of the columns of this <see cref="ColumnFlow{TContent}"/>.
+        /// </summary>
+        /// <param name="column">The index of the column to set the content of.</param>
+        /// <param name="content">The content.</param>
+        public void SetContentForColumn(int column, TContent content) => columns[column].Child = content;
+
+        public new MarginPadding Padding
+        {
+            get => base.Padding;
+            set => base.Padding = value;
+        }
+
+        protected override void Dispose(bool isDisposing)
+        {
+            base.Dispose(isDisposing);
+
+            if (currentSkin != null)
+                currentSkin.SourceChanged -= onSkinChanged;
+        }
+    }
+}

osu.Game.Rulesets.Mania/UI/Stage.cs

@@ -3,7 +3,6 @@
 
 using System.Collections.Generic;
 using System.Linq;
-using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Pooling;
@@ -11,7 +10,6 @@ using osu.Game.Rulesets.Judgements;
 using osu.Game.Rulesets.Mania.Beatmaps;
 using osu.Game.Rulesets.Mania.Objects;
 using osu.Game.Rulesets.Mania.Objects.Drawables;
-using osu.Game.Rulesets.Mania.Skinning;
 using osu.Game.Rulesets.Mania.UI.Components;
 using osu.Game.Rulesets.Objects.Drawables;
 using osu.Game.Rulesets.UI;
@@ -31,14 +29,13 @@ namespace osu.Game.Rulesets.Mania.UI
 
         public const float HIT_TARGET_POSITION = 110;
 
-        public IReadOnlyList<Column> Columns => columnFlow.Children;
+        public IReadOnlyList<Column> Columns => columnFlow.Content;
-        private readonly FillFlowContainer<Column> columnFlow;
+        private readonly ColumnFlow<Column> columnFlow;
 
         private readonly JudgementContainer<DrawableManiaJudgement> judgements;
         private readonly DrawablePool<DrawableManiaJudgement> judgementPool;
 
         private readonly Drawable barLineContainer;
-        private readonly Container topLevelContainer;
 
         private readonly Dictionary<ColumnType, Color4> columnColours = new Dictionary<ColumnType, Color4>
         {
@@ -62,6 +59,8 @@ namespace osu.Game.Rulesets.Mania.UI
             RelativeSizeAxes = Axes.Y;
             AutoSizeAxes = Axes.X;
 
+            Container topLevelContainer;
+
             InternalChildren = new Drawable[]
             {
                 judgementPool = new DrawablePool<DrawableManiaJudgement>(2),
@@ -73,16 +72,13 @@ namespace osu.Game.Rulesets.Mania.UI
                     AutoSizeAxes = Axes.X,
                     Children = new Drawable[]
                     {
-                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground), _ => new DefaultStageBackground())
+                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageBackground, stageDefinition: definition), _ => new DefaultStageBackground())
                         {
                             RelativeSizeAxes = Axes.Both
                         },
-                        columnFlow = new FillFlowContainer<Column>
+                        columnFlow = new ColumnFlow<Column>(definition)
                         {
-                            Name = "Columns",
                             RelativeSizeAxes = Axes.Y,
-                            AutoSizeAxes = Axes.X,
-                            Direction = FillDirection.Horizontal,
                             Padding = new MarginPadding { Left = COLUMN_SPACING, Right = COLUMN_SPACING },
                         },
                         new Container
@@ -102,7 +98,7 @@ namespace osu.Game.Rulesets.Mania.UI
                                 RelativeSizeAxes = Axes.Y,
                             }
                         },
-                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground), _ => null)
+                        new SkinnableDrawable(new ManiaSkinComponent(ManiaSkinComponents.StageForeground, stageDefinition: definition), _ => null)
                         {
                             RelativeSizeAxes = Axes.Both
                         },
@@ -121,60 +117,22 @@ namespace osu.Game.Rulesets.Mania.UI
             for (int i = 0; i < definition.Columns; i++)
             {
                 var columnType = definition.GetTypeOfColumn(i);
+
                 var column = new Column(firstColumnIndex + i)
                 {
+                    RelativeSizeAxes = Axes.Both,
+                    Width = 1,
                     ColumnType = columnType,
                     AccentColour = columnColours[columnType],
                     Action = { Value = columnType == ColumnType.Special ? specialColumnStartAction++ : normalColumnStartAction++ }
                 };
 
-                AddColumn(column);
+                topLevelContainer.Add(column.TopLevelContainer.CreateProxy());
+                columnFlow.SetContentForColumn(i, column);
+                AddNested(column);
             }
         }
 
-        private ISkin currentSkin;
-
-        [BackgroundDependencyLoader]
-        private void load(ISkinSource skin)
-        {
-            currentSkin = skin;
-            skin.SourceChanged += onSkinChanged;
-
-            onSkinChanged();
-        }
-
-        private void onSkinChanged()
-        {
-            foreach (var col in columnFlow)
-            {
-                if (col.Index > 0)
-                {
-                    float spacing = currentSkin.GetConfig<ManiaSkinConfigurationLookup, float>(
-                                                   new ManiaSkinConfigurationLookup(LegacyManiaSkinConfigurationLookups.ColumnSpacing, col.Index - 1))
-                                               ?.Value ?? COLUMN_SPACING;
-
-                    col.Margin = new MarginPadding { Left = spacing };
-                }
-
-                float? width = currentSkin.GetConfig<ManiaSkinConfigurationLookup, float>(
-                                              new ManiaSkinConfigurationLookup(LegacyManiaSkinConfigurationLookups.ColumnWidth, col.Index))
-                                          ?.Value;
-
-                if (width == null)
-                    // only used by default skin (legacy skins get defaults set in LegacyManiaSkinConfiguration)
-                    col.Width = col.IsSpecial ? Column.SPECIAL_COLUMN_WIDTH : Column.COLUMN_WIDTH;
-                else
-                    col.Width = width.Value;
-            }
-        }
-
-        public void AddColumn(Column c)
-        {
-            topLevelContainer.Add(c.TopLevelContainer.CreateProxy());
-            columnFlow.Add(c);
-            AddNested(c);
-        }
-
         public override void Add(DrawableHitObject h)
         {
             var maniaObject = (ManiaHitObject)h.HitObject;