Initial layout and animation

osu-resources

@@ -1 +1 @@
-Subproject commit 9f46a456dc3a56dcbff09671a3f588b16a464106
+Subproject commit 37e9e96d011ba7faeb4a302e65fb7bdb4dc16690

osu.Desktop.VisualTests/Tests/TestCaseMedalOverlay.cs

@@ -0,0 +1,28 @@
+// 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.Testing;
+using osu.Game.Overlays;
+using osu.Game.Users;
+
+namespace osu.Desktop.VisualTests.Tests
+{
+    internal class TestCaseMedalOverlay : TestCase
+    {
+        public override string Description => @"medal get!";
+
+        public override void Reset()
+        {
+            base.Reset();
+
+            MedalOverlay overlay;
+            Add(overlay = new MedalOverlay(new Medal
+            {
+                Name = @"Animations",
+                Description = @"More complex than you think.",
+            }));
+
+            AddStep(@"show", overlay.Show);
+        }
+    }
+}

osu.Desktop.VisualTests/osu.Desktop.VisualTests.csproj

@@ -224,6 +224,7 @@
     <Compile Include="Tests\TestCaseUserPanel.cs" />
     <Compile Include="Tests\TestCaseDirect.cs" />
     <Compile Include="Tests\TestCaseBreadcrumbs.cs" />
+    <Compile Include="Tests\TestCaseMedalOverlay.cs" />
   </ItemGroup>
   <ItemGroup />
   <ItemGroup />

osu.Game/Overlays/MedalOverlay.cs

@@ -0,0 +1,212 @@
+// 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.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Users;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Backgrounds;
+using osu.Game.Overlays.MedalSplash;
+using osu.Framework.Allocation;
+using osu.Framework.Audio.Sample;
+using osu.Framework.Audio;
+using osu.Framework.Graphics.Textures;
+using osu.Framework.Graphics.Transforms;
+using osu.Framework.Input;
+using OpenTK.Input;
+
+namespace osu.Game.Overlays
+{
+    public class MedalOverlay : FocusedOverlayContainer
+    {
+        public const float DISC_SIZE = 400;
+
+        private const float border_width = 5;
+
+        private readonly Box background;
+        private readonly FillFlowContainer backgroundStrip;
+        private readonly BackgroundStrip leftStrip, rightStrip;
+        private readonly CircularContainer disc;
+        private readonly Sprite innerSpin, outterSpin;
+        private readonly DrawableMedal drawableMedal;
+
+        private SampleChannel getSample;
+
+        protected override bool BlockPassThroughKeyboard => true;
+
+        public MedalOverlay(Medal medal)
+        {
+            RelativeSizeAxes = Axes.Both;
+            Alpha = 0f;
+
+            Children = new Drawable[]
+            {
+                background = new Box
+                {
+                    Name = @"dim",
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = Color4.Black.Opacity(60),
+                },
+                outterSpin = new Sprite
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Size = new Vector2(DISC_SIZE + 500),
+                    Alpha = 0f,
+                },
+                backgroundStrip = new FillFlowContainer
+                {
+                    Name = @"background strip",
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.X,
+                    Width = 0f,
+                    Height = border_width,
+                    Alpha = 0f,
+                    Direction = FillDirection.Horizontal,
+                    Children = new[]
+                    {
+                        leftStrip = new BackgroundStrip(0f, 1f),
+                        rightStrip = new BackgroundStrip(1f, 0f),
+                    },
+                },
+                disc = new CircularContainer
+                {
+                    Name = @"content",
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Alpha = 0f,
+                    Masking = true,
+                    BorderColour = Color4.White,
+                    BorderThickness = border_width,
+                    Size = new Vector2(DISC_SIZE),
+                    Scale = new Vector2(0.8f),
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = OsuColour.FromHex(@"05262f"),
+                        },
+                        new Triangles
+                        {
+                            RelativeSizeAxes = Axes.Both,
+                            TriangleScale = 2,
+                            ColourDark = OsuColour.FromHex(@"04222b"),
+                            ColourLight = OsuColour.FromHex(@"052933"),
+                        },
+                        innerSpin = new Sprite
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            RelativeSizeAxes = Axes.Both,
+                            Size = new Vector2(1.05f),
+                            Alpha = 0.25f,
+                        },
+                        drawableMedal = new DrawableMedal(medal)
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                        },
+                    },
+                },
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, TextureStore textures, AudioManager audio)
+        {
+            getSample = audio.Sample.Get(@"MedalSplash/medal-get");
+            innerSpin.Texture = outterSpin.Texture = textures.Get(@"MedalSplash/disc-spin");
+
+            disc.EdgeEffect = leftStrip.EdgeEffect = rightStrip.EdgeEffect = new EdgeEffect
+            {
+                Type = EdgeEffectType.Glow,
+                Colour = colours.Blue.Opacity(0.5f),
+                Radius = 50,
+            };
+        }
+
+        protected override void PopIn()
+        {
+            base.PopIn();
+
+            FadeIn(200);
+            background.FlashColour(Color4.White.Opacity(0.25f), 400);
+
+            double duration1 = 400;
+            double duration2 = 900;
+            double duration3 = 900;
+            double duration4 = 1000;
+
+            getSample.Play();
+            Delay(200, true);
+
+            innerSpin.Transforms.Add(new TransformRotation
+            {
+                StartValue = 0,
+                EndValue = 359,
+                StartTime = Clock.TimeInfo.Current,
+                EndTime = Clock.TimeInfo.Current + 20000,
+                LoopCount = -1,
+            });
+
+            outterSpin.Transforms.Add(new TransformRotation
+            {
+                StartValue = 0,
+                EndValue = 359,
+                StartTime = Clock.TimeInfo.Current,
+                EndTime = Clock.TimeInfo.Current + 40000,
+                LoopCount = -1,
+            });
+
+            disc.FadeIn(duration1);
+            backgroundStrip.FadeIn(duration1);
+            backgroundStrip.ResizeWidthTo(1f, duration1 * 2, EasingTypes.OutQuint);
+            outterSpin.FadeTo(0.1f, duration1 * 2);
+            disc.ScaleTo(1f, duration1 * 2, EasingTypes.OutElastic);
+
+            Delay(duration1 + 200, true);
+            drawableMedal.ChangeState(DrawableMedal.DisplayState.Icon, duration2);
+
+            Delay(duration2, true);
+            drawableMedal.ChangeState(DrawableMedal.DisplayState.MedalUnlocked, duration3);
+
+            Delay(duration3, true);
+            drawableMedal.ChangeState(DrawableMedal.DisplayState.Full, duration4);
+        }
+
+        protected override void PopOut()
+        {
+            base.PopOut();
+
+            FadeOut(200);
+        }
+
+        private class BackgroundStrip : Container
+        {
+            public BackgroundStrip(float start, float end)
+            {
+                RelativeSizeAxes = Axes.Both;
+                Width = 0.5f;
+                ColourInfo = ColourInfo.GradientHorizontal(Color4.White.Opacity(start), Color4.White.Opacity(end));
+                Masking = true;
+
+                Children = new[]
+                {
+                    new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Color4.White,
+                    }
+                };
+            }
+        }
+    }
+}

osu.Game/Overlays/MedalSplash/DrawableMedal.cs

@@ -0,0 +1,147 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+using System.Collections.Generic;
+using OpenTK;
+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.Game.Graphics;
+using osu.Game.Graphics.Backgrounds;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Users;
+
+namespace osu.Game.Overlays.MedalSplash
+{
+    public class DrawableMedal : Container
+    {
+        private const float scale_when_unlocked = 0.76f;
+        private const float scale_when_full = 0.6f;
+
+        private readonly Container medal;
+        private readonly Sprite medalGlow;
+        private readonly OsuSpriteText unlocked, name;
+        private readonly Paragraph description;
+        private readonly FillFlowContainer infoFlow;
+        private readonly IEnumerable<SpriteText> descriptionSprites;
+
+        public DrawableMedal(Medal medal)
+        {
+            Position = new Vector2(0f, MedalOverlay.DISC_SIZE / 2);
+
+            Children = new Drawable[]
+            {
+                this.medal = new Container
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.Centre,
+                    AutoSizeAxes = Axes.Both,
+                    Alpha = 0f,
+                    Children = new[]
+                    {
+                        medalGlow = new Sprite
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                        },
+                    },
+                },
+                unlocked = new OsuSpriteText
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.TopCentre,
+                    Text = "Medal Unlocked".ToUpper(),
+                    TextSize = 24,
+                    Font = @"Exo2.0-Light",
+                    Alpha = 0f,
+                    Scale = new Vector2(1 / scale_when_unlocked),
+                },
+                infoFlow = new FillFlowContainer
+                {
+                    Anchor = Anchor.TopCentre,
+                    Origin = Anchor.Centre,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Width = 0.6f,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0f, 5f),
+                    Children = new Drawable[]
+                    {
+                        name = new OsuSpriteText
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Text = medal.Name,
+                            TextSize = 20,
+                            Font = @"Exo2.0-Bold",
+                            Alpha = 0f,
+                            Scale = new Vector2(1 / scale_when_full),
+                        },
+                        description = new Paragraph
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Alpha = 0f,
+                            Scale = new Vector2(1 / scale_when_full),
+                        },
+                    },
+                },
+            };
+
+            descriptionSprites = description.AddText(medal.Description, s =>
+            {
+                s.Anchor = Anchor.TopCentre;
+                s.Origin = Anchor.TopCentre;
+                s.TextSize = 16;
+            });
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours, TextureStore textures)
+        {
+            medalGlow.Texture = textures.Get(@"MedalSplash/medal-glow");
+
+            foreach (var s in descriptionSprites)
+                s.Colour = colours.BlueLight;
+
+            var pos = new Vector2(0f, medal.Size.Y / 2 + 10);
+            unlocked.Position = pos;
+            pos.Y += 90;
+            infoFlow.Position = pos;
+        }
+
+        public void ChangeState(DisplayState newState, double duration)
+        {
+            switch (newState)
+            {
+                case DisplayState.Icon:
+                    medal.Scale = Vector2.Zero;
+                    medal.ScaleTo(1, duration, EasingTypes.OutElastic);
+                    medal.FadeInFromZero(duration);
+                    break;
+                case DisplayState.MedalUnlocked:
+                    ScaleTo(scale_when_unlocked, duration, EasingTypes.OutExpo);
+                    MoveToY(MedalOverlay.DISC_SIZE / 2 - 30, duration, EasingTypes.OutExpo);
+                    unlocked.FadeInFromZero(duration);
+                    break;
+                case DisplayState.Full:
+                    ScaleTo(scale_when_full, duration, EasingTypes.OutExpo);
+                    MoveToY(MedalOverlay.DISC_SIZE / 2 - 60, duration, EasingTypes.OutExpo);
+                    name.FadeInFromZero(duration);
+                    description.FadeInFromZero(duration * 2);
+                    break;
+            }
+        }
+
+        public enum DisplayState
+        {
+            Icon,
+            MedalUnlocked,
+            Full,
+        }
+    }
+}

osu.Game/Users/Medal.cs

@@ -0,0 +1,11 @@
+// Copyright (c) 2007-2017 ppy Pty Ltd <contact@ppy.sh>.
+// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
+
+namespace osu.Game.Users
+{
+    public class Medal
+    {
+        public string Name { get; set; }
+        public string Description { get; set; }
+    }
+}

osu.Game/osu.Game.csproj

@@ -452,6 +452,9 @@
     <Compile Include="Graphics\Containers\ReverseDepthFillFlowContainer.cs" />
     <Compile Include="Database\RankStatus.cs" />
     <Compile Include="Graphics\UserInterface\BreadcrumbControl.cs" />
+    <Compile Include="Overlays\MedalOverlay.cs" />
+    <Compile Include="Users\Medal.cs" />
+    <Compile Include="Overlays\MedalSplash\DrawableMedal.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\osu-framework\osu.Framework\osu.Framework.csproj">