Move TaikoPlayfield to separate file.

osu.Desktop.VisualTests/Tests/TestCaseTaikoPlayfield.cs

@@ -1 +1,23 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
 using osu.Framework.Screens.Testing;
+using osu.Game.Modes.Taiko.UI;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    internal class TestCaseTaikoPlayfield : TestCase
+    {
+        public override string Description => "Taiko playfield";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            Add(new TaikoPlayfield
+            {
+                Y = 200
+            });
+        }
+    }
+}

osu.Game.Modes.Taiko/UI/HitTarget.cs

@@ -0,0 +1,153 @@
+// 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.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+using osu.Framework.Graphics.Transforms;
+using osu.Game.Modes.Taiko.Objects;
+
+namespace osu.Game.Modes.Taiko.UI
+{
+    internal class HitTarget : Container
+    {
+        private Sprite outer;
+        private Sprite inner;
+
+        private Container innerFlash;
+        private Container outerFlash;
+
+        public HitTarget()
+        {
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+
+                    Size = new Vector2(5, TaikoPlayfield.PlayfieldHeight),
+
+                    Colour = Color4.Black
+                },
+                new Container
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+
+                    Size = new Vector2(TaikoHitObject.CIRCLE_RADIUS * 2 * 1.5f),
+                    Scale = new Vector2(TaikoPlayfield.PLAYFIELD_SCALE),
+
+                    Children = new Drawable[]
+                    {
+                        outer = new Sprite
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        inner = new Sprite
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+
+                            RelativeSizeAxes = Axes.Both,
+                            Size = new Vector2(1 / 1.5f)
+                        },
+                        new Container
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+
+                            RelativeSizeAxes = Axes.Both,
+
+                            Children = new Drawable[]
+                            {
+                                outerFlash = new Container
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+
+                                    Size = new Vector2(TaikoHitObject.CIRCLE_RADIUS * 2 * 1.5f, 680),
+
+                                    Masking = true,
+                                    CornerRadius = TaikoHitObject.CIRCLE_RADIUS * 2 * 1.5f,
+
+                                    Alpha = 0,
+
+                                    Children = new Drawable[]
+                                    {
+                                        new Box
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+
+                                            Alpha = 0,
+                                            AlwaysPresent = true
+                                        }
+                                    }
+                                },
+                                innerFlash = new CircularContainer
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+
+                                    RelativeSizeAxes = Axes.Both,
+
+                                    Masking = true,
+
+                                    Alpha = 0,
+
+                                    Children = new[]
+                                    {
+                                        new Box
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+
+                                            Colour = Color4.White.Opacity(0.85f),
+                                        }
+                                    },
+                                }
+                            }
+                        }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(TextureStore textures)
+        {
+            outer.Texture = textures.Get(@"Play/Taiko/taiko-drum-outer");
+            inner.Texture = textures.Get(@"Play/Taiko/taiko-drum-inner");
+        }
+
+        public void Flash(Color4 colour)
+        {
+            innerFlash.EdgeEffect = new EdgeEffect
+            {
+                Type = EdgeEffectType.Glow,
+                Colour = colour,
+                Radius = 20
+            };
+
+            outerFlash.EdgeEffect = new EdgeEffect
+            {
+                Type = EdgeEffectType.Glow,
+                Colour = colour,
+                Radius = 250
+            };
+
+            outerFlash.FadeTo(0.3f, 125, EasingTypes.OutQuint);
+            outerFlash.Delay(125).FadeOut(125);
+
+            innerFlash.FadeIn();
+            innerFlash.FadeOut(250, EasingTypes.OutQuint);
+        }
+    }
+}

osu.Game.Modes.Taiko/UI/InputDrum.cs

@@ -0,0 +1,142 @@
+// 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.Input;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Graphics.Textures;
+using osu.Framework.Graphics.Transforms;
+using osu.Framework.Input;
+using osu.Game.Graphics;
+using System.Collections.Generic;
+
+namespace osu.Game.Modes.Taiko.UI
+{
+    internal class InputDrum : Container
+    {
+        public InputDrum()
+        {
+            Size = new Vector2(TaikoPlayfield.PlayfieldHeight);
+
+            Children = new Drawable[]
+            {
+                new TaikoHalfDrum(false)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.CentreRight,
+
+                    RelativeSizeAxes = Axes.Both,
+
+                    Keys = new List<Key>(new[] { Key.F, Key.D })
+                },
+                new TaikoHalfDrum(true)
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.CentreLeft,
+
+                    RelativeSizeAxes = Axes.Both,
+
+                    Position = new Vector2(-1f, 0),
+
+                    Keys = new List<Key>(new[] { Key.J, Key.K })
+                }
+            };
+        }
+
+        private class TaikoHalfDrum : Container
+        {
+            /// <summary>
+            /// Keys[0] -> Inner key
+            /// Keys[0] -> Outer key
+            /// </summary>
+            public List<Key> Keys = new List<Key>();
+
+            private Sprite outer;
+            private Sprite outerHit;
+            private Sprite inner;
+            private Sprite innerHit;
+
+            public TaikoHalfDrum(bool flipped)
+            {
+                Masking = true;
+
+                Children = new Drawable[]
+                {
+                    outer = new Sprite
+                    {
+                        Anchor = flipped ? Anchor.CentreLeft : Anchor.CentreRight,
+                        Origin = Anchor.Centre,
+
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    outerHit = new Sprite
+                    {
+                        Anchor = flipped ? Anchor.CentreLeft : Anchor.CentreRight,
+                        Origin = Anchor.Centre,
+
+                        RelativeSizeAxes = Axes.Both,
+
+                        Alpha = 0,
+
+                        BlendingMode = BlendingMode.Additive
+                    },
+                    inner = new Sprite
+                    {
+                        Anchor = flipped ? Anchor.CentreLeft : Anchor.CentreRight,
+                        Origin = Anchor.Centre,
+
+                        RelativeSizeAxes = Axes.Both,
+                        Size = new Vector2(0.7f)
+                    },
+                    innerHit = new Sprite
+                    {
+                        Anchor = flipped ? Anchor.CentreLeft : Anchor.CentreRight,
+                        Origin = Anchor.Centre,
+
+                        RelativeSizeAxes = Axes.Both,
+                        Size = new Vector2(0.7f),
+
+                        Alpha = 0,
+
+                        BlendingMode = BlendingMode.Additive
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(TextureStore textures, OsuColour colours)
+            {
+                outer.Texture = textures.Get(@"Play/Taiko/taiko-drum-outer");
+                outerHit.Texture = textures.Get(@"Play/Taiko/taiko-drum-outer-hit");
+                inner.Texture = textures.Get(@"Play/Taiko/taiko-drum-inner");
+                innerHit.Texture = textures.Get(@"Play/Taiko/taiko-drum-inner-hit");
+
+                outerHit.Colour = colours.Blue;
+                innerHit.Colour = colours.Pink;
+            }
+
+            protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
+            {
+                if (args.Repeat)
+                    return false;
+
+                if (args.Key == Keys[0])
+                {
+                    innerHit.FadeIn();
+                    innerHit.FadeOut(500, EasingTypes.OutQuint);
+                }
+
+                if (args.Key == Keys[1])
+                {
+                    outerHit.FadeIn();
+                    outerHit.FadeOut(500, EasingTypes.OutQuint);
+                }
+
+                return false;
+            }
+        }
+    }
+}

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

@@ -4,39 +4,198 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Sprites;
-using osu.Framework.Graphics.Textures;
 using osu.Game.Modes.Taiko.Objects;
 using osu.Game.Modes.UI;
 using OpenTK;
 using OpenTK.Graphics;
 using osu.Game.Modes.Taiko.Judgements;
+using osu.Game.Modes.Objects.Drawables;
+using osu.Game.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics.Primitives;
 
 namespace osu.Game.Modes.Taiko.UI
 {
     public class TaikoPlayfield : Playfield<TaikoHitObject, TaikoJudgementInfo>
     {
+        /// <summary>
+        /// The default play field height.
+        /// </summary>
+        public const float PLAYFIELD_BASE_HEIGHT = 242;
+
+        /// <summary>
+        /// The play field height scale.
+        /// </summary>
+        public const float PLAYFIELD_SCALE = 0.65f;
+
+        /// <summary>
+        /// The play field height after scaling.
+        /// </summary>
+        public static float PlayfieldHeight => PLAYFIELD_BASE_HEIGHT * PLAYFIELD_SCALE;
+
+        /// <summary>
+        /// The offset from <see cref="left_area_size"/> which the center of the hit target lies at.
+        /// </summary>
+        private const float hit_target_offset = 80;
+
+        /// <summary>
+        /// The size of the left area of the playfield. This area contains the input drum.
+        /// </summary>
+        private const float left_area_size = 240;
+
+        protected override Container<Drawable> Content => hitObjectContainer;
+
+        private HitTarget hitTarget;
+        //private Container<ExplodingRing> explosionRingContainer;
+        //private Container<DrawableBarLine> barLineContainer;
+        //private Container<JudgementText> judgementContainer;
+
+        private Container hitObjectContainer;
+        private Container topLevelHitContainer;
+        private Container leftBackgroundContainer;
+        private Container rightBackgroundContainer;
+        private Box leftBackground;
+        private Box rightBackground;
+
         public TaikoPlayfield()
         {
             RelativeSizeAxes = Axes.X;
-            Size = new Vector2(1, 100);
+            Height = PlayfieldHeight;
-            Anchor = Anchor.Centre;
+
-            Origin = Anchor.Centre;
+            AddInternal(new Drawable[]
+            {
+                rightBackgroundContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    BorderThickness = 2,
+                    Masking = true,
+                    EdgeEffect = new EdgeEffect
+                    {
+                        Type = EdgeEffectType.Shadow,
+                        Colour = Color4.Black.Opacity(0.2f),
+                        Radius = 5,
+                    },
+                    Children = new Drawable[]
+                    {
+                        rightBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Alpha = 0.6f
+                        },
+                    }
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding { Left = left_area_size },
+                    Children = new Drawable[]
+                    {
+                        new Container
+                        {
+                            Padding = new MarginPadding { Left = hit_target_offset },
+                            RelativeSizeAxes = Axes.Both,
+                            Children = new Drawable[]
+                            {
+                                new Container
+                                {
+                                    Name = @"Hit target",
+                                    RelativeSizeAxes = Axes.Both,
+                                    Children = new Drawable[]
+                                    {
+                                        //explosionRingContainer = new Container<ExplodingRing>
+                                        //{
+                                        //    Anchor = Anchor.CentreLeft,
+                                        //    Origin = Anchor.Centre,
+                                        //    Size = new Vector2(TaikoHitObject.CIRCLE_RADIUS * 2),
+                                        //    Scale = new Vector2(PLAYFIELD_SCALE),
+                                        //    BlendingMode = BlendingMode.Additive
+                                        //},
+                                    }
+                                },
+                                //barLineContainer = new Container<DrawableBarLine>
+                                //{
+                                //    RelativeSizeAxes = Axes.Both,
+                                //},
+                                hitTarget = new HitTarget
+                                {
+                                    Anchor = Anchor.CentreLeft,
+                                    Origin = Anchor.Centre,
+                                },
+                                hitObjectContainer = new Container
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                },
+                                //judgementContainer = new Container<JudgementText>
+                                //{
+                                //    RelativeSizeAxes = Axes.Both,
+                                //    BlendingMode = BlendingMode.Additive
+                                //},
+                            },
+                        },
+                    }
+                },
+                leftBackgroundContainer = new Container
+                {
+                    Size = new Vector2(left_area_size, PlayfieldHeight),
+                    BorderThickness = 1,
+                    Children = new Drawable[]
+                    {
+                        leftBackground = new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        new Container
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            RelativePositionAxes = Axes.X,
+                            Position = new Vector2(0.10f, 0),
+                            Children = new Drawable[]
+                            {
+                                new InputDrum
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Scale = new Vector2(0.9f)
+                                },
+                            }
+                        },
+                        new Box
+                        {
+                            Anchor = Anchor.TopRight,
+                            RelativeSizeAxes = Axes.Y,
+                            Width = 10,
+                            ColourInfo = Framework.Graphics.Colour.ColourInfo.GradientHorizontal(Color4.Black.Opacity(0.6f), Color4.Black.Opacity(0)),
+                        },
+                    }
+                },
+                topLevelHitContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                }
+            });
         }
 
         [BackgroundDependencyLoader]
-        private void load(TextureStore textures)
+        private void load(OsuColour colours)
         {
-            Add(new Box { RelativeSizeAxes = Axes.Both, Alpha = 0.5f });
+            leftBackgroundContainer.BorderColour = colours.Gray0;
+            leftBackground.Colour = colours.Gray1;
 
-            Add(new Sprite
+            rightBackgroundContainer.BorderColour = colours.Gray1;
+            rightBackground.Colour = colours.Gray0;
+        }
+
+        public override void Add(DrawableHitObject<TaikoHitObject, TaikoJudgementInfo> h)
+        {
+            h.Depth = (float)h.HitObject.StartTime;
+
+            base.Add(h);
+        }
+
+        public override void OnJudgement(DrawableHitObject<TaikoHitObject, TaikoJudgementInfo> judgedObject)
         {
-                Texture = textures.Get(@"Menu/logo"),
-                Origin = Anchor.Centre,
-                Scale = new Vector2(0.2f),
-                RelativePositionAxes = Axes.Both,
-                Position = new Vector2(0.1f, 0.5f),
-                Colour = Color4.Gray
-            });
         }
     }
 }

osu.Game.Modes.Taiko/osu.Game.Modes.Taiko.csproj

@@ -55,6 +55,8 @@
     <Compile Include="Objects\TaikoHitObject.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="TaikoScoreProcessor.cs" />
+    <Compile Include="UI\HitTarget.cs" />
+    <Compile Include="UI\InputDrum.cs" />
     <Compile Include="UI\TaikoHitRenderer.cs" />
     <Compile Include="UI\TaikoPlayfield.cs" />
     <Compile Include="TaikoRuleset.cs" />