1
0
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:
DrabWeb 2017-06-01 04:45:46 -03:00
parent 2c438e6a8e
commit 212b2c1142
7 changed files with 403 additions and 1 deletions

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

View 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);
}
}
}

View File

@ -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 />

View 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,
}
};
}
}
}
}

View 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
View 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; }
}
}

View File

@ -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">