Merge pull request #9626 from peppy/improve-spinner-experience

Marginally improve spinner visuals
This commit is contained in:
Dan Balasescu 2020-07-20 19:35:27 +09:00 committed by GitHub
commit 55a42ee439
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 80 additions and 43 deletions

View File

@ -36,7 +36,7 @@ namespace osu.Game.Rulesets.Osu.Tests
private void testSingle(float circleSize, bool auto = false)
{
var spinner = new Spinner { StartTime = Time.Current + 1000, EndTime = Time.Current + 4000 };
var spinner = new Spinner { StartTime = Time.Current + 2000, EndTime = Time.Current + 5000 };
spinner.ApplyDefaults(new ControlPointInfo(), new BeatmapDifficulty { CircleSize = circleSize });

View File

@ -93,7 +93,10 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
{
Background = new SpinnerBackground
{
Alpha = 0.6f,
Disc =
{
Alpha = 0f,
},
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
},
@ -125,10 +128,10 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
private void load(OsuColour colours)
{
normalColour = baseColour;
completeColour = colours.YellowLight;
Background.AccentColour = normalColour;
completeColour = colours.YellowLight.Opacity(0.75f);
Ticks.AccentColour = normalColour;
Disc.AccentColour = fillColour;
circle.Colour = colours.BlueDark;
@ -147,16 +150,7 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
if (Progress >= 1 && !Disc.Complete)
{
Disc.Complete = true;
const float duration = 200;
Disc.FadeAccent(completeColour, duration);
Background.FadeAccent(completeColour, duration);
Background.FadeOut(duration);
circle.FadeColour(completeColour, duration);
glow.FadeColour(completeColour, duration);
transformFillColour(completeColour, 200);
}
if (userTriggered || Time.Current < Spinner.EndTime)
@ -204,32 +198,59 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables
{
base.UpdateInitialTransforms();
circleContainer.ScaleTo(Spinner.Scale * 0.3f);
circleContainer.ScaleTo(Spinner.Scale, HitObject.TimePreempt / 1.4f, Easing.OutQuint);
circleContainer.ScaleTo(0);
mainContainer.ScaleTo(0);
mainContainer
.ScaleTo(0)
.ScaleTo(Spinner.Scale * circle.DrawHeight / DrawHeight * 1.4f, HitObject.TimePreempt - 150, Easing.OutQuint)
.Then()
.ScaleTo(1, 500, Easing.OutQuint);
using (BeginDelayedSequence(HitObject.TimePreempt / 2, true))
{
float phaseOneScale = Spinner.Scale * 0.7f;
circleContainer.ScaleTo(phaseOneScale, HitObject.TimePreempt / 4, Easing.OutQuint);
mainContainer
.ScaleTo(phaseOneScale * circle.DrawHeight / DrawHeight * 1.6f, HitObject.TimePreempt / 4, Easing.OutQuint)
.RotateTo((float)(25 * Spinner.Duration / 2000), HitObject.TimePreempt + Spinner.Duration);
using (BeginDelayedSequence(HitObject.TimePreempt / 2, true))
{
circleContainer.ScaleTo(Spinner.Scale, 400, Easing.OutQuint);
mainContainer.ScaleTo(1, 400, Easing.OutQuint);
}
}
}
protected override void UpdateStateTransforms(ArmedState state)
{
base.UpdateStateTransforms(state);
var sequence = this.Delay(Spinner.Duration).FadeOut(160);
switch (state)
using (BeginDelayedSequence(Spinner.Duration, true))
{
case ArmedState.Hit:
sequence.ScaleTo(Scale * 1.2f, 320, Easing.Out);
break;
this.FadeOut(160);
case ArmedState.Miss:
sequence.ScaleTo(Scale * 0.8f, 320, Easing.In);
break;
switch (state)
{
case ArmedState.Hit:
transformFillColour(completeColour, 0);
this.ScaleTo(Scale * 1.2f, 320, Easing.Out);
mainContainer.RotateTo(mainContainer.Rotation + 180, 320);
break;
case ArmedState.Miss:
this.ScaleTo(Scale * 0.8f, 320, Easing.In);
break;
}
}
}
private void transformFillColour(Colour4 colour, double duration)
{
Disc.FadeAccent(colour, duration);
Background.FadeAccent(colour.Darken(1), duration);
Ticks.FadeAccent(colour, duration);
circle.FadeColour(colour, duration);
glow.FadeColour(colour, duration);
}
}
}

View File

@ -1,18 +1,18 @@
// 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 osuTK.Graphics;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Effects;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using osuTK.Graphics;
namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
{
public class SpinnerBackground : CircularContainer, IHasAccentColour
{
protected Box Disc;
public readonly Box Disc;
public Color4 AccentColour
{

View File

@ -2,6 +2,7 @@
// See the LICENCE file in the repository root for full licence text.
using System;
using System.Linq;
using osu.Framework.Extensions.Color4Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
@ -9,10 +10,11 @@ using osu.Framework.Graphics.Effects;
using osuTK;
using osuTK.Graphics;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
{
public class SpinnerTicks : Container
public class SpinnerTicks : Container, IHasAccentColour
{
public SpinnerTicks()
{
@ -20,28 +22,22 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
Anchor = Anchor.Centre;
RelativeSizeAxes = Axes.Both;
const float count = 18;
const float count = 8;
for (float i = 0; i < count; i++)
{
Add(new Container
{
Colour = Color4.Black,
Alpha = 0.4f,
EdgeEffect = new EdgeEffectParameters
{
Type = EdgeEffectType.Glow,
Radius = 10,
Colour = Color4.Gray.Opacity(0.2f),
},
Blending = BlendingParameters.Additive,
RelativePositionAxes = Axes.Both,
Masking = true,
CornerRadius = 5,
Size = new Vector2(60, 10),
Origin = Anchor.Centre,
Position = new Vector2(
0.5f + MathF.Sin(i / count * 2 * MathF.PI) / 2 * 0.86f,
0.5f + MathF.Cos(i / count * 2 * MathF.PI) / 2 * 0.86f
0.5f + MathF.Sin(i / count * 2 * MathF.PI) / 2 * 0.83f,
0.5f + MathF.Cos(i / count * 2 * MathF.PI) / 2 * 0.83f
),
Rotation = -i / count * 360 + 90,
Children = new[]
@ -54,5 +50,25 @@ namespace osu.Game.Rulesets.Osu.Objects.Drawables.Pieces
});
}
}
public Color4 AccentColour
{
get => Colour;
set
{
Colour = value;
foreach (var c in Children.OfType<Container>())
{
c.EdgeEffect =
new EdgeEffectParameters
{
Type = EdgeEffectType.Glow,
Radius = 20,
Colour = value.Opacity(0.8f),
};
}
}
}
}
}