mirror of
https://github.com/ppy/osu.git
synced 2024-11-11 14:57:52 +08:00
Initial layout and animation
This commit is contained in:
parent
2c438e6a8e
commit
212b2c1142
@ -1 +1 @@
|
||||
Subproject commit 9f46a456dc3a56dcbff09671a3f588b16a464106
|
||||
Subproject commit 37e9e96d011ba7faeb4a302e65fb7bdb4dc16690
|
28
osu.Desktop.VisualTests/Tests/TestCaseMedalOverlay.cs
Normal file
28
osu.Desktop.VisualTests/Tests/TestCaseMedalOverlay.cs
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -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 />
|
||||
|
212
osu.Game/Overlays/MedalOverlay.cs
Normal file
212
osu.Game/Overlays/MedalOverlay.cs
Normal file
@ -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,
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
147
osu.Game/Overlays/MedalSplash/DrawableMedal.cs
Normal file
147
osu.Game/Overlays/MedalSplash/DrawableMedal.cs
Normal file
@ -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,
|
||||
}
|
||||
}
|
||||
}
|
11
osu.Game/Users/Medal.cs
Normal file
11
osu.Game/Users/Medal.cs
Normal file
@ -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; }
|
||||
}
|
||||
}
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user