Restructure TaikoPlayfield for better skin support

osu.Game.Rulesets.Taiko.Tests/Skinning/TestSceneTaikoPlayfield.cs

@@ -5,7 +5,9 @@ using System;
 using System.Collections.Generic;
 using System.Linq;
 using osu.Framework.Allocation;
+using osu.Framework.Extensions.IEnumerableExtensions;
 using osu.Framework.Graphics;
+using osu.Framework.Testing;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Rulesets.Taiko.Skinning;
 using osu.Game.Rulesets.Taiko.UI;
@@ -20,6 +22,7 @@ namespace osu.Game.Rulesets.Taiko.Tests.Skinning
         {
             typeof(TaikoHitTarget),
             typeof(TaikoLegacyHitTarget),
+            typeof(PlayfieldBackground),
         }).ToList();
 
         [Cached(typeof(IScrollingInfo))]
@@ -33,10 +36,11 @@ namespace osu.Game.Rulesets.Taiko.Tests.Skinning
         {
             AddStep("Load playfield", () => SetContents(() => new TaikoPlayfield(new ControlPointInfo())
             {
-                Height = 0.4f,
                 Anchor = Anchor.CentreLeft,
                 Origin = Anchor.CentreLeft,
             }));
+
+            AddRepeatStep("change height", () => this.ChildrenOfType<TaikoPlayfield>().ForEach(p => p.Height = Math.Max(0.2f, (p.Height + 0.2f) % 1f)), 50);
         }
     }
 }

osu.Game.Rulesets.Taiko/Skinning/TaikoLegacySkinTransformer.cs

@@ -8,6 +8,7 @@ using osu.Framework.Graphics;
 using osu.Framework.Graphics.Textures;
 using osu.Game.Audio;
 using osu.Game.Skinning;
+using osuTK;
 
 namespace osu.Game.Rulesets.Taiko.Skinning
 {
@@ -55,6 +56,23 @@ namespace osu.Game.Rulesets.Taiko.Skinning
                         return new TaikoLegacyHitTarget();
 
                     return null;
+
+                case TaikoSkinComponents.PlayfieldBackgroundRight:
+                    if (GetTexture("taiko-bar-right") != null)
+                        return this.GetAnimation("taiko-bar-right", false, false).With(d =>
+                        {
+                            d.RelativeSizeAxes = Axes.Both;
+                            d.Size = Vector2.One;
+                        });
+
+                    return null;
+
+                case TaikoSkinComponents.PlayfieldBackgroundLeft:
+                    // This is displayed inside LegacyInputDrum. It is required to be there for layout purposes (can be seen on legacy skins).
+                    if (GetTexture("taiko-bar-right") != null)
+                        return Drawable.Empty();
+
+                    return null;
             }
 
             return source.GetDrawableComponent(component);

osu.Game.Rulesets.Taiko/TaikoSkinComponents.cs

@@ -11,6 +11,8 @@ namespace osu.Game.Rulesets.Taiko
         DrumRollBody,
         DrumRollTick,
         Swell,
-        HitTarget
+        HitTarget,
+        PlayfieldBackgroundLeft,
+        PlayfieldBackgroundRight
     }
 }

osu.Game.Rulesets.Taiko/UI/HitExplosion.cs

@@ -32,7 +32,7 @@ namespace osu.Game.Rulesets.Taiko.UI
 
             JudgedObject = judgedObject;
 
-            Anchor = Anchor.CentreLeft;
+            Anchor = Anchor.Centre;
             Origin = Anchor.Centre;
 
             RelativeSizeAxes = Axes.Both;

osu.Game.Rulesets.Taiko/UI/PlayfieldBackground.cs

@@ -0,0 +1,61 @@
+// 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.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Taiko.UI
+{
+    public class PlayfieldBackground : CompositeDrawable
+    {
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            Name = "Transparent playfield background";
+            RelativeSizeAxes = Axes.Both;
+            Masking = true;
+            BorderColour = colours.Gray1;
+
+            EdgeEffect = new EdgeEffectParameters
+            {
+                Type = EdgeEffectType.Shadow,
+                Colour = Color4.Black.Opacity(0.2f),
+                Radius = 5,
+            };
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colours.Gray0,
+                    Alpha = 0.6f
+                },
+                new Container
+                {
+                    Name = "Border",
+                    RelativeSizeAxes = Axes.Both,
+                    Masking = true,
+                    MaskingSmoothness = 0,
+                    BorderThickness = 2,
+                    AlwaysPresent = true,
+                    Children = new[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0,
+                            AlwaysPresent = true
+                        }
+                    }
+                }
+            };
+        }
+    }
+}

osu.Game.Rulesets.Taiko/UI/TaikoPlayfield.cs

@@ -6,7 +6,6 @@ using osu.Framework.Allocation;
 using osu.Framework.Extensions.Color4Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.Effects;
 using osu.Framework.Graphics.Shapes;
 using osu.Game.Beatmaps.ControlPoints;
 using osu.Game.Graphics;
@@ -25,162 +24,132 @@ namespace osu.Game.Rulesets.Taiko.UI
 {
     public class TaikoPlayfield : ScrollingPlayfield
     {
+        private readonly ControlPointInfo controlPoints;
+
         /// <summary>
         /// Default height of a <see cref="TaikoPlayfield"/> when inside a <see cref="DrawableTaikoRuleset"/>.
         /// </summary>
         public const float DEFAULT_HEIGHT = 178;
 
-        /// <summary>
-        /// The offset from <see cref="left_area_size"/> which the center of the hit target lies at.
-        /// </summary>
-        public const float HIT_TARGET_OFFSET = 100;
-
         /// <summary>
         /// The size of the left area of the playfield. This area contains the input drum.
         /// </summary>
-        private const float left_area_size = 240;
+        private const float left_area_size = 180;
 
-        private readonly Container<HitExplosion> hitExplosionContainer;
+        private Container<HitExplosion> hitExplosionContainer;
-        private readonly Container<KiaiHitExplosion> kiaiExplosionContainer;
+        private Container<KiaiHitExplosion> kiaiExplosionContainer;
-        private readonly JudgementContainer<DrawableTaikoJudgement> judgementContainer;
+        private JudgementContainer<DrawableTaikoJudgement> judgementContainer;
-        internal readonly Drawable HitTarget;
+        internal Drawable HitTarget;
 
-        private readonly ProxyContainer topLevelHitContainer;
+        private ProxyContainer topLevelHitContainer;
-        private readonly ProxyContainer barlineContainer;
+        private ProxyContainer barlineContainer;
+        private Container rightArea;
+        private Container leftArea;
 
-        private readonly Container overlayBackgroundContainer;
+        private Container hitTargetOffsetContent;
-        private readonly Container backgroundContainer;
-
-        private readonly Box overlayBackground;
-        private readonly Box background;
 
         public TaikoPlayfield(ControlPointInfo controlPoints)
+        {
+            this.controlPoints = controlPoints;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
         {
             InternalChildren = new Drawable[]
             {
-                backgroundContainer = new Container
+                new SkinnableDrawable(new TaikoSkinComponent(TaikoSkinComponents.PlayfieldBackgroundRight), _ => new PlayfieldBackground()),
-                {
+                rightArea = new Container
-                    Name = "Transparent playfield background",
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    EdgeEffect = new EdgeEffectParameters
-                    {
-                        Type = EdgeEffectType.Shadow,
-                        Colour = Color4.Black.Opacity(0.2f),
-                        Radius = 5,
-                    },
-                    Children = new Drawable[]
-                    {
-                        background = new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Alpha = 0.6f
-                        },
-                    }
-                },
-                new Container
                 {
                     Name = "Right area",
                     RelativeSizeAxes = Axes.Both,
-                    Padding = new MarginPadding { Left = left_area_size },
+                    RelativePositionAxes = Axes.Both,
+                    Masking = true,
                     Children = new Drawable[]
                     {
                         new Container
                         {
                             Name = "Masked elements before hit objects",
                             RelativeSizeAxes = Axes.Both,
-                            Padding = new MarginPadding { Left = HIT_TARGET_OFFSET },
+                            FillMode = FillMode.Fit,
-                            Masking = true,
                             Children = new[]
                             {
                                 hitExplosionContainer = new Container<HitExplosion>
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                                    FillMode = FillMode.Fit,
                                     Blending = BlendingParameters.Additive,
                                 },
                                 HitTarget = new SkinnableDrawable(new TaikoSkinComponent(TaikoSkinComponents.HitTarget), _ => new TaikoHitTarget())
                                 {
-                                    Anchor = Anchor.CentreLeft,
-                                    Origin = Anchor.Centre,
                                     RelativeSizeAxes = Axes.Both,
-                                    FillMode = FillMode.Fit
                                 }
                             }
                         },
-                        barlineContainer = new ProxyContainer
+                        hitTargetOffsetContent = new Container
                         {
                             RelativeSizeAxes = Axes.Both,
-                            Padding = new MarginPadding { Left = HIT_TARGET_OFFSET }
+                            Children = new Drawable[]
-                        },
+                            {
-                        new Container
+                                barlineContainer = new ProxyContainer
-                        {
+                                {
-                            Name = "Hit objects",
+                                    RelativeSizeAxes = Axes.Both,
-                            RelativeSizeAxes = Axes.Both,
+                                },
-                            Padding = new MarginPadding { Left = HIT_TARGET_OFFSET },
+                                new Container
-                            Masking = true,
+                                {
-                            Child = HitObjectContainer
+                                    Name = "Hit objects",
-                        },
+                                    RelativeSizeAxes = Axes.Both,
-                        kiaiExplosionContainer = new Container<KiaiHitExplosion>
+                                    Child = HitObjectContainer
-                        {
+                                },
-                            Name = "Kiai hit explosions",
+                                kiaiExplosionContainer = new Container<KiaiHitExplosion>
-                            RelativeSizeAxes = Axes.Both,
+                                {
-                            FillMode = FillMode.Fit,
+                                    Name = "Kiai hit explosions",
-                            Margin = new MarginPadding { Left = HIT_TARGET_OFFSET },
+                                    RelativeSizeAxes = Axes.Both,
-                            Blending = BlendingParameters.Additive
+                                    FillMode = FillMode.Fit,
-                        },
+                                    Blending = BlendingParameters.Additive
-                        judgementContainer = new JudgementContainer<DrawableTaikoJudgement>
+                                },
-                        {
+                                judgementContainer = new JudgementContainer<DrawableTaikoJudgement>
-                            Name = "Judgements",
+                                {
-                            RelativeSizeAxes = Axes.Y,
+                                    Name = "Judgements",
-                            Margin = new MarginPadding { Left = HIT_TARGET_OFFSET },
+                                    RelativeSizeAxes = Axes.Y,
-                            Blending = BlendingParameters.Additive
+                                    Blending = BlendingParameters.Additive
+                                },
+                            }
                         },
                     }
                 },
-                overlayBackgroundContainer = new Container
+                leftArea = new Container
                 {
                     Name = "Left overlay",
-                    RelativeSizeAxes = Axes.Y,
+                    RelativeSizeAxes = Axes.Both,
+                    FillMode = FillMode.Fit,
+                    BorderColour = colours.Gray0,
                     Size = new Vector2(left_area_size, 1),
                     Children = new Drawable[]
                     {
-                        overlayBackground = new Box
+                        new SkinnableDrawable(new TaikoSkinComponent(TaikoSkinComponents.PlayfieldBackgroundLeft), _ => new Container
                         {
                             RelativeSizeAxes = Axes.Both,
-                        },
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    Colour = colours.Gray1,
+                                    RelativeSizeAxes = Axes.Both,
+                                },
+                                new Box
+                                {
+                                    Anchor = Anchor.TopRight,
+                                    RelativeSizeAxes = Axes.Y,
+                                    Width = 10,
+                                    Colour = Framework.Graphics.Colour.ColourInfo.GradientHorizontal(Color4.Black.Opacity(0.6f), Color4.Black.Opacity(0)),
+                                },
+                            }
+                        }),
                         new InputDrum(controlPoints)
                         {
-                            Anchor = Anchor.CentreRight,
+                            Anchor = Anchor.CentreLeft,
-                            Origin = Anchor.CentreRight,
+                            Origin = Anchor.CentreLeft,
-                            Scale = new Vector2(0.9f),
-                            Margin = new MarginPadding { Right = 20 }
                         },
-                        new Box
-                        {
-                            Anchor = Anchor.TopRight,
-                            RelativeSizeAxes = Axes.Y,
-                            Width = 10,
-                            Colour = Framework.Graphics.Colour.ColourInfo.GradientHorizontal(Color4.Black.Opacity(0.6f), Color4.Black.Opacity(0)),
-                        },
-                    }
-                },
-                new Container
-                {
-                    Name = "Border",
-                    RelativeSizeAxes = Axes.Both,
-                    Masking = true,
-                    MaskingSmoothness = 0,
-                    BorderThickness = 2,
-                    AlwaysPresent = true,
-                    Children = new[]
-                    {
-                        new Box
-                        {
-                            RelativeSizeAxes = Axes.Both,
-                            Alpha = 0,
-                            AlwaysPresent = true
-                        }
                     }
                 },
                 topLevelHitContainer = new ProxyContainer
@@ -191,14 +160,12 @@ namespace osu.Game.Rulesets.Taiko.UI
             };
         }
 
-        [BackgroundDependencyLoader]
+        protected override void Update()
-        private void load(OsuColour colours)
         {
-            overlayBackgroundContainer.BorderColour = colours.Gray0;
+            base.Update();
-            overlayBackground.Colour = colours.Gray1;
 
-            backgroundContainer.BorderColour = colours.Gray1;
+            rightArea.Padding = new MarginPadding { Left = leftArea.DrawWidth };
-            background.Colour = colours.Gray0;
+            hitTargetOffsetContent.Padding = new MarginPadding { Left = HitTarget.DrawWidth / 2 };
         }
 
         public override void Add(DrawableHitObject h)