mirror of
https://github.com/ppy/osu.git
synced 2024-11-11 11:37:28 +08:00
Add arc-shaped progress bars to "argon" spinner
This commit is contained in:
Salman Ahmed
parent
6cb1c308c9
commit
2adbf4cc1a
@ -16,7 +16,6 @@ using osu.Game.Rulesets.Osu.Objects;
|
||||
using osu.Game.Rulesets.Osu.Objects.Drawables;
|
||||
using osu.Game.Rulesets.Osu.Skinning.Default;
|
||||
using osuTK;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
{
|
||||
@ -52,6 +51,9 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
private Container centre = null!;
|
||||
private CircularContainer fill = null!;
|
||||
|
||||
private Container ticksContainer = null!;
|
||||
private ArgonSpinnerTicks ticks = null!;
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(DrawableHitObject drawableHitObject)
|
||||
{
|
||||
@ -70,41 +72,84 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
fill = new CircularContainer
|
||||
new Container
|
||||
{
|
||||
Name = @"Fill",
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Masking = true,
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
Padding = new MarginPadding(8f),
|
||||
Children = new[]
|
||||
{
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Colour = Colour4.FromHex("FC618F").Opacity(1f),
|
||||
Radius = 40,
|
||||
fill = new CircularContainer
|
||||
{
|
||||
Name = @"Fill",
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Masking = true,
|
||||
EdgeEffect = new EdgeEffectParameters
|
||||
{
|
||||
Type = EdgeEffectType.Shadow,
|
||||
Colour = Colour4.FromHex("FC618F").Opacity(1f),
|
||||
Radius = 40,
|
||||
},
|
||||
Child = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0f,
|
||||
AlwaysPresent = true,
|
||||
}
|
||||
},
|
||||
new Container
|
||||
{
|
||||
Name = @"Ring",
|
||||
Masking = true,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new[]
|
||||
{
|
||||
new ArgonSpinnerRingArc
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Name = "Top Arc",
|
||||
},
|
||||
new ArgonSpinnerRingArc
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Name = "Bottom Arc",
|
||||
Scale = new Vector2(1, -1),
|
||||
},
|
||||
}
|
||||
},
|
||||
ticksContainer = new Container
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Child = ticks = new ArgonSpinnerTicks(),
|
||||
}
|
||||
},
|
||||
Child = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0f,
|
||||
AlwaysPresent = true,
|
||||
}
|
||||
},
|
||||
new CircularContainer
|
||||
new Container
|
||||
{
|
||||
Name = @"Ring",
|
||||
Masking = true,
|
||||
BorderColour = Color4.White,
|
||||
BorderThickness = 5,
|
||||
Name = @"Sides",
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Child = new Box
|
||||
Children = new[]
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Alpha = 0,
|
||||
AlwaysPresent = true,
|
||||
new ArgonSpinnerProgressArc
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Name = "Left Bar"
|
||||
},
|
||||
new ArgonSpinnerProgressArc
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Name = "Right Bar",
|
||||
Scale = new Vector2(-1, 1),
|
||||
},
|
||||
}
|
||||
},
|
||||
new ArgonSpinnerTicks(),
|
||||
}
|
||||
},
|
||||
centre = new Container
|
||||
@ -167,7 +212,7 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
float targetScale = initial_fill_scale + (0.98f - initial_fill_scale) * drawableSpinner.Progress;
|
||||
|
||||
fill.Scale = new Vector2((float)Interpolation.Lerp(fill.Scale.X, targetScale, Math.Clamp(Math.Abs(Time.Elapsed) / 100, 0, 1)));
|
||||
disc.Rotation = drawableSpinner.RotationTracker.Rotation;
|
||||
ticks.Rotation = drawableSpinner.RotationTracker.Rotation;
|
||||
}
|
||||
|
||||
private void updateStateTransforms(DrawableHitObject drawableHitObject, ArmedState state)
|
||||
@ -180,12 +225,12 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
using (BeginAbsoluteSequence(spinner.StartTime - spinner.TimePreempt))
|
||||
{
|
||||
this.ScaleTo(initial_scale);
|
||||
this.RotateTo(0);
|
||||
ticksContainer.RotateTo(0);
|
||||
|
||||
using (BeginDelayedSequence(spinner.TimePreempt / 2))
|
||||
{
|
||||
// constant ambient rotation to give the spinner "spinning" character.
|
||||
this.RotateTo((float)(25 * spinner.Duration / 2000), spinner.TimePreempt + spinner.Duration);
|
||||
ticksContainer.RotateTo((float)(25 * spinner.Duration / 2000), spinner.TimePreempt + spinner.Duration);
|
||||
}
|
||||
|
||||
using (BeginDelayedSequence(spinner.TimePreempt + spinner.Duration + drawableHitObject.Result.TimeOffset))
|
||||
@ -194,7 +239,7 @@ namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
{
|
||||
case ArmedState.Hit:
|
||||
this.ScaleTo(initial_scale * 1.2f, 320, Easing.Out);
|
||||
this.RotateTo(Rotation + 180, 320);
|
||||
ticksContainer.RotateTo(ticksContainer.Rotation + 180, 320);
|
||||
break;
|
||||
|
||||
case ArmedState.Miss:
|
||||
|
||||
@ -0,0 +1,67 @@
|
||||
// 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 System;
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Extensions.Color4Extensions;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.UserInterface;
|
||||
using osu.Framework.Utils;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Rulesets.Objects.Drawables;
|
||||
using osu.Game.Rulesets.Osu.Objects.Drawables;
|
||||
using osuTK.Graphics;
|
||||
|
||||
namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
{
|
||||
public class ArgonSpinnerProgressArc : CompositeDrawable
|
||||
{
|
||||
private const float arc_fill = 0.15f;
|
||||
private const float arc_radius = 0.12f;
|
||||
|
||||
private CircularProgress fill = null!;
|
||||
|
||||
private DrawableSpinner spinner = null!;
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(DrawableHitObject drawableHitObject, OsuColour colours)
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both;
|
||||
|
||||
spinner = (DrawableSpinner)drawableHitObject;
|
||||
|
||||
InternalChildren = new Drawable[]
|
||||
{
|
||||
new CircularProgress
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Colour = Color4.White.Opacity(0.25f),
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Current = { Value = arc_fill },
|
||||
Rotation = 90 - arc_fill * 180,
|
||||
InnerRadius = arc_radius,
|
||||
RoundedCaps = true,
|
||||
},
|
||||
fill = new CircularProgress
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
InnerRadius = arc_radius,
|
||||
RoundedCaps = true,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
protected override void Update()
|
||||
{
|
||||
base.Update();
|
||||
|
||||
fill.Alpha = (float)Interpolation.DampContinuously(fill.Alpha, spinner.Progress > 0 ? 1 : 0, 120f, (float)Math.Abs(Time.Elapsed));
|
||||
fill.Current.Value = (float)Interpolation.DampContinuously(fill.Current.Value, arc_fill * spinner.Progress, 120f, (float)Math.Abs(Time.Elapsed));
|
||||
fill.Rotation = (float)(90 - fill.Current.Value * 180);
|
||||
}
|
||||
}
|
||||
}
|
||||
33
osu.Game.Rulesets.Osu/Skinning/Argon/ArgonSpinnerRingArc.cs
Normal file
33
osu.Game.Rulesets.Osu/Skinning/Argon/ArgonSpinnerRingArc.cs
Normal file
@ -0,0 +1,33 @@
|
||||
// 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 osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.UserInterface;
|
||||
|
||||
namespace osu.Game.Rulesets.Osu.Skinning.Argon
|
||||
{
|
||||
public class ArgonSpinnerRingArc : CompositeDrawable
|
||||
{
|
||||
private const float arc_fill = 0.31f;
|
||||
private const float arc_radius = 0.02f;
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load()
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both;
|
||||
|
||||
InternalChild = new CircularProgress
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Current = { Value = arc_fill },
|
||||
Rotation = -arc_fill * 180,
|
||||
InnerRadius = arc_radius,
|
||||
RoundedCaps = true,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user