Merge pull request #12636 from peppy/skin-components-list

Add initial implementation of skin editor component list

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditor.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using NUnit.Framework;
+using osu.Framework.Graphics;
 using osu.Framework.Testing;
 using osu.Game.Rulesets;
 using osu.Game.Rulesets.Osu;
@@ -21,6 +22,7 @@ namespace osu.Game.Tests.Visual.Gameplay
             AddStep("add editor overlay", () =>
             {
                 skinEditor?.Expire();
+                Player.ScaleTo(SkinEditorOverlay.VISIBLE_TARGET_SCALE);
                 LoadComponentAsync(skinEditor = new SkinEditor(Player), Add);
             });
         }

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditorComponentsList.cs

@@ -0,0 +1,26 @@
+// 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 NUnit.Framework;
+using osu.Framework.Graphics;
+using osu.Game.Rulesets;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Skinning.Editor;
+
+namespace osu.Game.Tests.Visual.Gameplay
+{
+    public class TestSceneSkinEditorComponentsList : SkinnableTestScene
+    {
+        [Test]
+        public void TestToggleEditor()
+        {
+            AddStep("show available components", () => SetContents(() => new SkinComponentToolbox(300)
+            {
+                Anchor = Anchor.TopCentre,
+                Origin = Anchor.TopCentre,
+            }));
+        }
+
+        protected override Ruleset CreateRulesetForSkinProvider() => new OsuRuleset();
+    }
+}

osu.Game/OsuGame.cs

@@ -82,6 +82,21 @@ namespace osu.Game
 
         private SkinEditorOverlay skinEditor;
 
+        private Container overlayContent;
+
+        private Container rightFloatingOverlayContent;
+
+        private Container leftFloatingOverlayContent;
+
+        private Container topMostOverlayContent;
+
+        private ScalingContainer screenContainer;
+
+        private Container screenOffsetContainer;
+
+        [Resolved]
+        private FrameworkConfigManager frameworkConfig { get; set; }
+
         [Cached]
         private readonly DifficultyRecommender difficultyRecommender = new DifficultyRecommender();
 
@@ -597,6 +612,11 @@ namespace osu.Game
                     ActionRequested = action => volume.Adjust(action),
                     ScrollActionRequested = (action, amount, isPrecise) => volume.Adjust(action, amount, isPrecise),
                 },
+                screenOffsetContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Children = new Drawable[]
+                    {
                         screenContainer = new ScalingContainer(ScalingMode.ExcludeOverlays)
                         {
                             RelativeSizeAxes = Axes.Both,
@@ -621,6 +641,8 @@ namespace osu.Game
                                 logoContainer = new Container { RelativeSizeAxes = Axes.Both },
                             }
                         },
+                    }
+                },
                 overlayContent = new Container { RelativeSizeAxes = Axes.Both },
                 rightFloatingOverlayContent = new Container { RelativeSizeAxes = Axes.Both },
                 leftFloatingOverlayContent = new Container { RelativeSizeAxes = Axes.Both },
@@ -768,7 +790,7 @@ namespace osu.Game
                 if (notifications.State.Value == Visibility.Visible)
                     offset -= Toolbar.HEIGHT / 2;
 
-                screenContainer.MoveToX(offset, SettingsPanel.TRANSITION_LENGTH, Easing.OutQuint);
+                screenOffsetContainer.MoveToX(offset, SettingsPanel.TRANSITION_LENGTH, Easing.OutQuint);
             }
 
             Settings.State.ValueChanged += _ => updateScreenOffset();
@@ -935,19 +957,6 @@ namespace osu.Game
         {
         }
 
-        private Container overlayContent;
-
-        private Container rightFloatingOverlayContent;
-
-        private Container leftFloatingOverlayContent;
-
-        private Container topMostOverlayContent;
-
-        [Resolved]
-        private FrameworkConfigManager frameworkConfig { get; set; }
-
-        private ScalingContainer screenContainer;
-
         protected override bool OnExiting()
         {
             if (ScreenStack.CurrentScreen is Loader)
@@ -966,7 +975,7 @@ namespace osu.Game
         {
             base.UpdateAfterChildren();
 
-            screenContainer.Padding = new MarginPadding { Top = ToolbarOffset };
+            screenOffsetContainer.Padding = new MarginPadding { Top = ToolbarOffset };
             overlayContent.Padding = new MarginPadding { Top = ToolbarOffset };
 
             MenuCursorContainer.CanShowCursor = (ScreenStack.CurrentScreen as IOsuScreen)?.CursorVisible ?? false;

osu.Game/Rulesets/Edit/ScrollingToolboxGroup.cs

@@ -0,0 +1,32 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Rulesets.Edit
+{
+    public class ScrollingToolboxGroup : ToolboxGroup
+    {
+        protected readonly OsuScrollContainer Scroll;
+
+        protected override Container<Drawable> Content { get; }
+
+        public ScrollingToolboxGroup(string title, float scrollAreaHeight)
+            : base(title)
+        {
+            base.Content.Add(Scroll = new OsuScrollContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                Height = scrollAreaHeight,
+                Child = Content = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                },
+            });
+        }
+    }
+}

osu.Game/Screens/Play/HUD/DefaultAccuracyCounter.cs

@@ -4,6 +4,7 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Game.Graphics;
+using osu.Game.Skinning;
 using osuTK;
 
 namespace osu.Game.Screens.Play.HUD

osu.Game/Screens/Play/HUD/DefaultComboCounter.cs

@@ -8,6 +8,7 @@ using osu.Game.Graphics;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets.Scoring;
+using osu.Game.Skinning;
 using osuTK;
 
 namespace osu.Game.Screens.Play.HUD

osu.Game/Screens/Play/HUD/DefaultHealthDisplay.cs

@@ -13,6 +13,7 @@ using osuTK;
 using osuTK.Graphics;
 using osu.Framework.Graphics.Shapes;
 using osu.Framework.Utils;
+using osu.Game.Skinning;
 
 namespace osu.Game.Screens.Play.HUD
 {

osu.Game/Screens/Play/HUD/DefaultScoreCounter.cs

@@ -4,6 +4,7 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Game.Graphics;
+using osu.Game.Skinning;
 
 namespace osu.Game.Screens.Play.HUD
 {

osu.Game/Screens/Play/HUD/HitErrorMeters/BarHitErrorMeter.cs

@@ -13,6 +13,7 @@ using osu.Framework.Graphics.Sprites;
 using osu.Game.Graphics;
 using osu.Game.Rulesets.Judgements;
 using osu.Game.Rulesets.Scoring;
+using osu.Game.Skinning;
 using osuTK;
 using osuTK.Graphics;
 

osu.Game/Screens/Play/HUDOverlay.cs

@@ -16,12 +16,13 @@ using osu.Game.Overlays.Notifications;
 using osu.Game.Rulesets.Mods;
 using osu.Game.Rulesets.UI;
 using osu.Game.Screens.Play.HUD;
+using osu.Game.Skinning;
 using osuTK;
 
 namespace osu.Game.Screens.Play
 {
     [Cached]
-    public class HUDOverlay : Container, IKeyBindingHandler<GlobalAction>
+    public class HUDOverlay : Container, IKeyBindingHandler<GlobalAction>, IDefaultSkinnableTarget
     {
         public const float FADE_DURATION = 300;
 

osu.Game/Screens/Play/SongProgress.cs

@@ -14,7 +14,7 @@ using osu.Framework.Timing;
 using osu.Game.Configuration;
 using osu.Game.Rulesets.Objects;
 using osu.Game.Rulesets.UI;
-using osu.Game.Screens.Play.HUD;
+using osu.Game.Skinning;
 
 namespace osu.Game.Screens.Play
 {
@@ -76,10 +76,6 @@ namespace osu.Game.Screens.Play
             {
                 new SongProgressDisplay
                 {
-                    Masking = true,
-                    RelativeSizeAxes = Axes.Both,
-                    Anchor = Anchor.BottomCentre,
-                    Origin = Anchor.BottomCentre,
                     Children = new Drawable[]
                     {
                         info = new SongProgressInfo
@@ -186,9 +182,17 @@ namespace osu.Game.Screens.Play
         }
 
         public class SongProgressDisplay : Container, ISkinnableComponent
+        {
+            public SongProgressDisplay()
             {
                 // TODO: move actual implementation into this.
                 // exists for skin customisation purposes.
+
+                Masking = true;
+                RelativeSizeAxes = Axes.Both;
+                Anchor = Anchor.BottomCentre;
+                Origin = Anchor.BottomCentre;
+            }
         }
     }
 }

osu.Game/Skinning/Editor/SkinBlueprint.cs

@@ -9,7 +9,6 @@ using osu.Framework.Graphics.Shapes;
 using osu.Game.Graphics;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets.Edit;
-using osu.Game.Screens.Play.HUD;
 using osuTK;
 
 namespace osu.Game.Skinning.Editor

osu.Game/Skinning/Editor/SkinBlueprintContainer.cs

@@ -6,7 +6,6 @@ using osu.Framework.Graphics;
 using osu.Framework.Testing;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Screens.Edit.Compose.Components;
-using osu.Game.Screens.Play.HUD;
 
 namespace osu.Game.Skinning.Editor
 {

osu.Game/Skinning/Editor/SkinComponentToolbox.cs

@@ -0,0 +1,162 @@
+// 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;
+using System.Diagnostics;
+using System.Linq;
+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.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Rulesets.Edit;
+using osu.Game.Rulesets.Scoring;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Skinning.Editor
+{
+    public class SkinComponentToolbox : ScrollingToolboxGroup
+    {
+        public Action<Type> RequestPlacement;
+
+        private const float component_display_scale = 0.8f;
+
+        [Cached]
+        private ScoreProcessor scoreProcessor = new ScoreProcessor
+        {
+            Combo = { Value = 727 },
+            TotalScore = { Value = 1337377 }
+        };
+
+        [Cached(typeof(HealthProcessor))]
+        private HealthProcessor healthProcessor = new DrainingHealthProcessor(0);
+
+        public SkinComponentToolbox(float height)
+            : base("Components", height)
+        {
+            RelativeSizeAxes = Axes.None;
+            Width = 200;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            FillFlowContainer fill;
+
+            Child = fill = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.X,
+                AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Vertical,
+                Spacing = new Vector2(20)
+            };
+
+            var skinnableTypes = typeof(OsuGame).Assembly.GetTypes().Where(t => typeof(ISkinnableComponent).IsAssignableFrom(t)).ToArray();
+
+            foreach (var type in skinnableTypes)
+            {
+                var component = attemptAddComponent(type);
+
+                if (component != null)
+                {
+                    component.RequestPlacement = t => RequestPlacement?.Invoke(t);
+                    fill.Add(component);
+                }
+            }
+        }
+
+        private static ToolboxComponentButton attemptAddComponent(Type type)
+        {
+            try
+            {
+                var instance = (Drawable)Activator.CreateInstance(type);
+
+                Debug.Assert(instance != null);
+
+                return new ToolboxComponentButton(instance);
+            }
+            catch
+            {
+                return null;
+            }
+        }
+
+        private class ToolboxComponentButton : OsuButton
+        {
+            private readonly Drawable component;
+
+            public Action<Type> RequestPlacement;
+
+            private Container innerContainer;
+
+            public ToolboxComponentButton(Drawable component)
+            {
+                this.component = component;
+
+                Enabled.Value = true;
+
+                RelativeSizeAxes = Axes.X;
+                Height = 70;
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                BackgroundColour = colours.Gray3;
+                Content.EdgeEffect = new EdgeEffectParameters
+                {
+                    Type = EdgeEffectType.Shadow,
+                    Radius = 2,
+                    Offset = new Vector2(0, 1),
+                    Colour = Color4.Black.Opacity(0.5f)
+                };
+
+                AddRange(new Drawable[]
+                {
+                    new OsuSpriteText
+                    {
+                        Text = component.GetType().Name,
+                        Anchor = Anchor.TopCentre,
+                        Origin = Anchor.TopCentre,
+                    },
+                    innerContainer = new Container
+                    {
+                        Y = 10,
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        RelativeSizeAxes = Axes.Both,
+                        Scale = new Vector2(component_display_scale),
+                        Masking = true,
+                        Child = component
+                    }
+                });
+
+                // adjust provided component to fit / display in a known state.
+                component.Anchor = Anchor.Centre;
+                component.Origin = Anchor.Centre;
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                if (component.RelativeSizeAxes != Axes.None)
+                {
+                    innerContainer.AutoSizeAxes = Axes.None;
+                    innerContainer.Height = 100;
+                }
+            }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                RequestPlacement?.Invoke(component.GetType());
+                return true;
+            }
+        }
+    }
+}

osu.Game/Skinning/Editor/SkinEditor.cs

@@ -1,10 +1,13 @@
 // 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;
+using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Input.Events;
+using osu.Framework.Testing;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Cursor;
@@ -45,6 +48,12 @@ namespace osu.Game.Skinning.Editor
                         RelativeSizeAxes = Axes.X
                     },
                     new SkinBlueprintContainer(target),
+                    new SkinComponentToolbox(600)
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        RequestPlacement = placeComponent
+                    }
                 }
             };
 
@@ -56,6 +65,15 @@ namespace osu.Game.Skinning.Editor
             });
         }
 
+        private void placeComponent(Type type)
+        {
+            var instance = (Drawable)Activator.CreateInstance(type);
+
+            var targetContainer = target.ChildrenOfType<IDefaultSkinnableTarget>().FirstOrDefault();
+
+            targetContainer?.Add(instance);
+        }
+
         protected override void LoadComplete()
         {
             base.LoadComplete();

osu.Game/Skinning/Editor/SkinEditorOverlay.cs

@@ -21,7 +21,7 @@ namespace osu.Game.Skinning.Editor
         private readonly ScalingContainer target;
         private SkinEditor skinEditor;
 
-        private const float visible_target_scale = 0.8f;
+        public const float VISIBLE_TARGET_SCALE = 0.8f;
 
         [Resolved]
         private OsuColour colours { get; set; }
@@ -64,12 +64,14 @@ namespace osu.Game.Skinning.Editor
         {
             if (visibility.NewValue == Visibility.Visible)
             {
-                target.ScaleTo(visible_target_scale, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
-
                 target.Masking = true;
                 target.BorderThickness = 5;
                 target.BorderColour = colours.Yellow;
                 target.AllowScaling = false;
+                target.RelativePositionAxes = Axes.Both;
+
+                target.ScaleTo(VISIBLE_TARGET_SCALE, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
+                target.MoveToX(0.1f, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
             }
             else
             {
@@ -77,6 +79,7 @@ namespace osu.Game.Skinning.Editor
                 target.AllowScaling = true;
 
                 target.ScaleTo(1, SkinEditor.TRANSITION_DURATION, Easing.OutQuint).OnComplete(_ => target.Masking = false);
+                target.MoveToX(0f, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
             }
         }
 

osu.Game/Skinning/Editor/SkinSelectionHandler.cs

@@ -10,7 +10,6 @@ using osu.Game.Extensions;
 using osu.Game.Graphics.UserInterface;
 using osu.Game.Rulesets.Edit;
 using osu.Game.Screens.Edit.Compose.Components;
-using osu.Game.Screens.Play.HUD;
 using osuTK;
 
 namespace osu.Game.Skinning.Editor

osu.Game/Skinning/IDefaultSkinnableTarget.cs

@@ -0,0 +1,12 @@
+// 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.
+
+namespace osu.Game.Skinning
+{
+    /// <summary>
+    /// The default placement location for new <see cref="ISkinnableComponent"/>s.
+    /// </summary>
+    public interface IDefaultSkinnableTarget : ISkinnableTarget
+    {
+    }
+}

osu.Game/Skinning/ISkinnableComponent.cs

@@ -3,7 +3,7 @@
 
 using osu.Framework.Graphics;
 
-namespace osu.Game.Screens.Play.HUD
+namespace osu.Game.Skinning
 {
     /// <summary>
     /// Denotes a drawable which, as a drawable, can be adjusted via skinning specifications.

osu.Game/Skinning/ISkinnableTarget.cs

@@ -0,0 +1,15 @@
+// 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.Graphics;
+using osu.Framework.Graphics.Containers;
+
+namespace osu.Game.Skinning
+{
+    /// <summary>
+    /// Denotes a container which can house <see cref="ISkinnableComponent"/>s.
+    /// </summary>
+    public interface ISkinnableTarget : IContainerCollection<Drawable>
+    {
+    }
+}