mirror of
https://github.com/ppy/osu.git
synced 2024-11-06 06:57:39 +08:00
Update skip button design
This commit is contained in:
Dean Herbert
parent
a7d16ac213
commit
aef82acb0d
@ -166,13 +166,8 @@ namespace osu.Game.Screens.Play
|
||||
Clock = offsetClock,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
new SkipButton(firstObjectTime) { AudioClock = decoupledClock, Depth = 1 },
|
||||
HitRenderer,
|
||||
new SkipButton(firstObjectTime)
|
||||
{
|
||||
AudioClock = decoupledClock,
|
||||
Alpha = 0,
|
||||
Margin = new MarginPadding { Bottom = 140 } // this is temporary
|
||||
},
|
||||
}
|
||||
},
|
||||
hudOverlay = new StandardHUDOverlay
|
||||
|
||||
@ -1,40 +1,92 @@
|
||||
// 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;
|
||||
using osu.Framework;
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Audio;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Sprites;
|
||||
using osu.Framework.Input;
|
||||
using osu.Framework.Threading;
|
||||
using osu.Framework.Timing;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.UserInterface;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Screens.Ranking;
|
||||
using OpenTK;
|
||||
using OpenTK.Graphics;
|
||||
using OpenTK.Input;
|
||||
|
||||
namespace osu.Game.Screens.Play
|
||||
{
|
||||
public class SkipButton : TwoLayerButton
|
||||
public class SkipButton : Container
|
||||
{
|
||||
private readonly double startTime;
|
||||
public IAdjustableClock AudioClock;
|
||||
|
||||
private Button button;
|
||||
private Box remainingTimeBox;
|
||||
|
||||
private FadeContainer fadeContainer;
|
||||
private double displayTime;
|
||||
|
||||
public SkipButton(double startTime)
|
||||
{
|
||||
AlwaysReceiveInput = true;
|
||||
|
||||
this.startTime = startTime;
|
||||
Text = @"Skip";
|
||||
Icon = FontAwesome.fa_osu_right_o;
|
||||
Anchor = Anchor.BottomRight;
|
||||
Origin = Anchor.BottomRight;
|
||||
|
||||
RelativePositionAxes = Axes.Both;
|
||||
RelativeSizeAxes = Axes.Both;
|
||||
|
||||
Position = new Vector2(0.5f, 0.7f);
|
||||
Size = new Vector2(1, 0.14f);
|
||||
|
||||
Origin = Anchor.Centre;
|
||||
}
|
||||
|
||||
protected override bool OnMouseMove(InputState state)
|
||||
{
|
||||
fadeContainer.State = Visibility.Visible;
|
||||
return base.OnMouseMove(state);
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(AudioManager audio, OsuColour colours)
|
||||
private void load(OsuColour colours)
|
||||
{
|
||||
ActivationSound = audio.Sample.Get(@"Menu/menuhit");
|
||||
BackgroundColour = colours.Yellow;
|
||||
HoverColour = colours.YellowDark;
|
||||
Children = new Drawable[]
|
||||
{
|
||||
fadeContainer = new FadeContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
button = new Button
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
},
|
||||
remainingTimeBox = new Box
|
||||
{
|
||||
Height = 5,
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Colour = colours.Yellow,
|
||||
Anchor = Anchor.BottomCentre,
|
||||
Origin = Anchor.BottomCentre,
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const double skip_required_cutoff = 3000;
|
||||
const double fade_time = 300;
|
||||
private const double skip_required_cutoff = 3000;
|
||||
private const double fade_time = 300;
|
||||
|
||||
private double beginFadeTime => startTime - skip_required_cutoff - fade_time;
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
|
||||
if (startTime < skip_required_cutoff)
|
||||
{
|
||||
@ -44,14 +96,22 @@ namespace osu.Game.Screens.Play
|
||||
}
|
||||
|
||||
FadeInFromZero(fade_time);
|
||||
using (BeginAbsoluteSequence(beginFadeTime))
|
||||
FadeOut(fade_time);
|
||||
|
||||
Action = () => AudioClock.Seek(startTime - skip_required_cutoff - fade_time);
|
||||
button.Action = () => AudioClock?.Seek(startTime - skip_required_cutoff - fade_time);
|
||||
|
||||
displayTime = Time.Current;
|
||||
|
||||
Delay(startTime - skip_required_cutoff - fade_time);
|
||||
FadeOut(fade_time);
|
||||
Expire();
|
||||
}
|
||||
|
||||
protected override void Update()
|
||||
{
|
||||
base.Update();
|
||||
remainingTimeBox.Width = (float)Math.Max(0, 1 - (Time.Current - displayTime) / (beginFadeTime - displayTime));
|
||||
}
|
||||
|
||||
protected override bool OnKeyDown(InputState state, KeyDownEventArgs args)
|
||||
{
|
||||
if (args.Repeat) return false;
|
||||
@ -59,11 +119,165 @@ namespace osu.Game.Screens.Play
|
||||
switch (args.Key)
|
||||
{
|
||||
case Key.Space:
|
||||
TriggerClick();
|
||||
button.TriggerClick();
|
||||
return true;
|
||||
}
|
||||
|
||||
return base.OnKeyDown(state, args);
|
||||
}
|
||||
|
||||
private class FadeContainer : Container, IStateful<Visibility>
|
||||
{
|
||||
private Visibility state;
|
||||
private ScheduledDelegate scheduledHide;
|
||||
|
||||
public Visibility State
|
||||
{
|
||||
get
|
||||
{
|
||||
return state;
|
||||
}
|
||||
set
|
||||
{
|
||||
var lastState = state;
|
||||
|
||||
state = value;
|
||||
|
||||
scheduledHide?.Cancel();
|
||||
|
||||
switch (state)
|
||||
{
|
||||
case Visibility.Visible:
|
||||
if (lastState == Visibility.Hidden)
|
||||
FadeIn(500, EasingTypes.OutExpo);
|
||||
|
||||
if (!Hovering)
|
||||
using (BeginDelayedSequence(1000))
|
||||
scheduledHide = Schedule(() => State = Visibility.Hidden);
|
||||
break;
|
||||
case Visibility.Hidden:
|
||||
FadeOut(1000, EasingTypes.OutExpo);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
State = Visibility.Visible;
|
||||
}
|
||||
}
|
||||
|
||||
private class Button : Container
|
||||
{
|
||||
public Action Action;
|
||||
private Color4 colourNormal;
|
||||
private Color4 colourHover;
|
||||
private Box box;
|
||||
private FillFlowContainer flow;
|
||||
private Box background;
|
||||
private AspectContainer aspect;
|
||||
|
||||
public Button()
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(OsuColour colours)
|
||||
{
|
||||
colourNormal = colours.Yellow;
|
||||
colourHover = colours.YellowDark;
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
background = new Box
|
||||
{
|
||||
Alpha = 0.2f,
|
||||
Colour = Color4.Black,
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
},
|
||||
aspect = new AspectContainer
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Height = 0.6f,
|
||||
Masking = true,
|
||||
CornerRadius = 15,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
box = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Colour = colourNormal,
|
||||
},
|
||||
flow = new FillFlowContainer
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
RelativePositionAxes = Axes.Y,
|
||||
Y = 0.4f,
|
||||
AutoSizeAxes = Axes.Both,
|
||||
Origin = Anchor.Centre,
|
||||
Direction = FillDirection.Horizontal,
|
||||
Children = new []
|
||||
{
|
||||
new TextAwesome { Icon = FontAwesome.fa_chevron_right },
|
||||
new TextAwesome { Icon = FontAwesome.fa_chevron_right },
|
||||
new TextAwesome { Icon = FontAwesome.fa_chevron_right },
|
||||
}
|
||||
},
|
||||
new OsuSpriteText
|
||||
{
|
||||
Anchor = Anchor.TopCentre,
|
||||
RelativePositionAxes = Axes.Y,
|
||||
Y = 0.7f,
|
||||
TextSize = 12,
|
||||
Font = @"Exo2.0-Bold",
|
||||
Origin = Anchor.Centre,
|
||||
Text = @"SKIP",
|
||||
},
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
protected override bool OnHover(InputState state)
|
||||
{
|
||||
flow.TransformSpacingTo(new Vector2(5), 500, EasingTypes.OutQuint);
|
||||
box.FadeColour(colourHover, 500, EasingTypes.OutQuint);
|
||||
background.FadeTo(0.4f, 500, EasingTypes.OutQuint);
|
||||
return base.OnHover(state);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(InputState state)
|
||||
{
|
||||
flow.TransformSpacingTo(new Vector2(0), 500, EasingTypes.OutQuint);
|
||||
box.FadeColour(colourNormal, 500, EasingTypes.OutQuint);
|
||||
background.FadeTo(0.2f, 500, EasingTypes.OutQuint);
|
||||
base.OnHoverLost(state);
|
||||
}
|
||||
|
||||
protected override bool OnMouseDown(InputState state, MouseDownEventArgs args)
|
||||
{
|
||||
aspect.ScaleTo(0.75f, 2000, EasingTypes.OutQuint);
|
||||
return base.OnMouseDown(state, args);
|
||||
}
|
||||
|
||||
protected override bool OnMouseUp(InputState state, MouseUpEventArgs args)
|
||||
{
|
||||
aspect.ScaleTo(1, 1000, EasingTypes.OutElastic);
|
||||
return base.OnMouseUp(state, args);
|
||||
}
|
||||
|
||||
protected override bool OnClick(InputState state)
|
||||
{
|
||||
box.FlashColour(Color4.White, 500, EasingTypes.OutQuint);
|
||||
|
||||
Action?.Invoke();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user