Adjust button metrics and move surrounding buttons to be more integrated

This commit is contained in:
Dean Herbert 2022-06-01 22:00:54 +09:00
parent d4e88441ec
commit 781a1527b1
2 changed files with 130 additions and 56 deletions

View File

@ -28,7 +28,7 @@ namespace osu.Game.Screens.Edit.Timing
{ {
internal class TapButton : CircularContainer internal class TapButton : CircularContainer
{ {
public const float SIZE = 100; public const float SIZE = 140;
public readonly BindableBool IsHandlingTapping = new BindableBool(); public readonly BindableBool IsHandlingTapping = new BindableBool();
@ -62,7 +62,7 @@ namespace osu.Game.Screens.Edit.Timing
{ {
Size = new Vector2(SIZE); Size = new Vector2(SIZE);
const float ring_width = 18; const float ring_width = 22;
const float light_padding = 3; const float light_padding = 3;
InternalChild = scaleContainer = new Container InternalChild = scaleContainer = new Container
@ -75,7 +75,7 @@ namespace osu.Game.Screens.Edit.Timing
new Circle new Circle
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Colour = colourProvider.Background3 Colour = colourProvider.Background4
}, },
lights = new Container lights = new Container
{ {
@ -87,7 +87,7 @@ namespace osu.Game.Screens.Edit.Timing
Name = @"outer masking", Name = @"outer masking",
Masking = true, Masking = true,
BorderThickness = light_padding, BorderThickness = light_padding,
BorderColour = colourProvider.Background3, BorderColour = colourProvider.Background4,
Children = new Drawable[] Children = new Drawable[]
{ {
new Box new Box
@ -105,7 +105,7 @@ namespace osu.Game.Screens.Edit.Timing
Size = new Vector2(SIZE - ring_width * 2 + light_padding * 2), Size = new Vector2(SIZE - ring_width * 2 + light_padding * 2),
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.Centre, Origin = Anchor.Centre,
Colour = colourProvider.Background3, Colour = colourProvider.Background4,
}, },
lightsGlow = new Container lightsGlow = new Container
{ {
@ -139,17 +139,18 @@ namespace osu.Game.Screens.Edit.Timing
{ {
new OsuSpriteText new OsuSpriteText
{ {
Font = OsuFont.Torus.With(size: 20), Font = OsuFont.Torus.With(size: 34, weight: FontWeight.SemiBold),
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.BottomCentre, Origin = Anchor.BottomCentre,
Y = 3, Y = 5,
Text = "Tap" Text = "Tap",
}, },
bpmText = new OsuSpriteText bpmText = new OsuSpriteText
{ {
Font = OsuFont.Torus.With(size: 14), Font = OsuFont.Torus.With(size: 23, weight: FontWeight.Regular),
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
Origin = Anchor.TopCentre, Origin = Anchor.TopCentre,
Y = -1,
}, },
} }
}, },
@ -200,7 +201,7 @@ namespace osu.Game.Screens.Edit.Timing
{ {
hoverLayer.FadeIn(500, Easing.OutQuint); hoverLayer.FadeIn(500, Easing.OutQuint);
textContainer.FadeColour(textColour, 500, Easing.OutQuint); textContainer.FadeColour(textColour, 500, Easing.OutQuint);
return base.OnHover(e); return true;
} }
protected override void OnHoverLost(HoverLostEvent e) protected override void OnHoverLost(HoverLostEvent e)
@ -322,12 +323,14 @@ namespace osu.Game.Screens.Edit.Timing
Size = new Vector2(0.98f); // Avoid bleed into masking edge. Size = new Vector2(0.98f); // Avoid bleed into masking edge.
const float angular_gap = 0.007f;
InternalChildren = new Drawable[] InternalChildren = new Drawable[]
{ {
new CircularProgress new CircularProgress
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Current = { Value = 1f / light_count - 0.01f }, Current = { Value = 1f / light_count - angular_gap },
Colour = colourProvider.Background2, Colour = colourProvider.Background2,
}, },
fillContent = new Container fillContent = new Container
@ -340,7 +343,7 @@ namespace osu.Game.Screens.Edit.Timing
new CircularProgress new CircularProgress
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Current = { Value = 1f / light_count - 0.01f }, Current = { Value = 1f / light_count - angular_gap },
Blending = BlendingParameters.Additive Blending = BlendingParameters.Additive
}, },
Glow = new CircularProgress Glow = new CircularProgress

View File

@ -7,10 +7,14 @@ using osu.Framework.Bindables;
using osu.Framework.Graphics; using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes; using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.Sprites;
using osu.Framework.Input.Events;
using osu.Game.Beatmaps.ControlPoints; using osu.Game.Beatmaps.ControlPoints;
using osu.Game.Graphics; using osu.Game.Graphics;
using osu.Game.Graphics.UserInterface;
using osu.Game.Graphics.UserInterfaceV2; using osu.Game.Graphics.UserInterfaceV2;
using osu.Game.Overlays; using osu.Game.Overlays;
using osuTK;
namespace osu.Game.Screens.Edit.Timing namespace osu.Game.Screens.Edit.Timing
{ {
@ -32,6 +36,8 @@ namespace osu.Game.Screens.Edit.Timing
[BackgroundDependencyLoader] [BackgroundDependencyLoader]
private void load(OverlayColourProvider colourProvider, OsuColour colours) private void load(OverlayColourProvider colourProvider, OsuColour colours)
{ {
const float padding = 10;
RelativeSizeAxes = Axes.X; RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y; AutoSizeAxes = Axes.Y;
@ -52,9 +58,8 @@ namespace osu.Game.Screens.Edit.Timing
RowDimensions = new[] RowDimensions = new[]
{ {
new Dimension(GridSizeMode.Absolute, 200), new Dimension(GridSizeMode.Absolute, 200),
new Dimension(GridSizeMode.Absolute, 60), new Dimension(GridSizeMode.Absolute, 50),
new Dimension(GridSizeMode.Absolute, 60), new Dimension(GridSizeMode.Absolute, TapButton.SIZE + padding),
new Dimension(GridSizeMode.Absolute, 120),
}, },
Content = new[] Content = new[]
{ {
@ -63,6 +68,7 @@ namespace osu.Game.Screens.Edit.Timing
new Container new Container
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(padding),
Children = new Drawable[] Children = new Drawable[]
{ {
new GridContainer new GridContainer
@ -94,15 +100,14 @@ namespace osu.Game.Screens.Edit.Timing
new Container new Container
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(10), Padding = new MarginPadding { Bottom = padding, Horizontal = padding },
Children = new Drawable[] Children = new Drawable[]
{ {
new TimingAdjustButton(1) new TimingAdjustButton(1)
{ {
Text = "Offset", Text = "Offset",
RelativeSizeAxes = Axes.X, RelativeSizeAxes = Axes.Both,
Width = 0.48f, Size = new Vector2(0.48f, 1),
Height = 50,
Action = adjustOffset, Action = adjustOffset,
}, },
new TimingAdjustButton(0.1) new TimingAdjustButton(0.1)
@ -110,9 +115,8 @@ namespace osu.Game.Screens.Edit.Timing
Anchor = Anchor.TopRight, Anchor = Anchor.TopRight,
Origin = Anchor.TopRight, Origin = Anchor.TopRight,
Text = "BPM", Text = "BPM",
RelativeSizeAxes = Axes.X, RelativeSizeAxes = Axes.Both,
Width = 0.48f, Size = new Vector2(0.48f, 1),
Height = 50,
Action = adjustBpm, Action = adjustBpm,
} }
} }
@ -123,32 +127,38 @@ namespace osu.Game.Screens.Edit.Timing
new Container new Container
{ {
RelativeSizeAxes = Axes.Both, RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(10), Padding = new MarginPadding { Bottom = padding, Horizontal = padding },
Children = new Drawable[] Children = new Drawable[]
{ {
new RoundedButton new Container
{ {
Text = "Reset", RelativeSizeAxes = Axes.Y,
BackgroundColour = colours.Pink, Anchor = Anchor.Centre,
RelativeSizeAxes = Axes.X, Origin = Anchor.CentreRight,
Width = 0.3f, Height = 0.98f,
Width = TapButton.SIZE / 1.3f,
Masking = true,
CornerRadius = 15,
Children = new Drawable[]
{
new LessRoundedButton(FontAwesome.Solid.Stop, Anchor.TopLeft)
{
BackgroundColour = colourProvider.Background1,
RelativeSizeAxes = Axes.Both,
Height = 0.49f,
Action = reset, Action = reset,
}, },
new RoundedButton new LessRoundedButton(FontAwesome.Solid.Play, Anchor.BottomLeft)
{ {
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
Text = "Play from start",
RelativeSizeAxes = Axes.X,
BackgroundColour = colourProvider.Background1, BackgroundColour = colourProvider.Background1,
Width = 0.68f, RelativeSizeAxes = Axes.Both,
Action = tap, Height = 0.49f,
} Anchor = Anchor.BottomLeft,
} Origin = Anchor.BottomLeft,
Action = start,
},
}, },
}, },
new Drawable[]
{
new TapButton new TapButton
{ {
Anchor = Anchor.Centre, Anchor = Anchor.Centre,
@ -156,6 +166,8 @@ namespace osu.Game.Screens.Edit.Timing
IsHandlingTapping = { BindTarget = isHandlingTapping } IsHandlingTapping = { BindTarget = isHandlingTapping }
} }
} }
},
},
} }
}, },
}; };
@ -165,12 +177,77 @@ namespace osu.Game.Screens.Edit.Timing
metronome.EnableClicking = !handling.NewValue; metronome.EnableClicking = !handling.NewValue;
if (handling.NewValue) if (handling.NewValue)
start();
}, true);
}
private class LessRoundedButton : OsuButton
{
private readonly IconUsage icon;
private readonly Anchor anchor;
private SpriteIcon spriteIcon;
public LessRoundedButton(IconUsage icon, Anchor anchor)
{
this.icon = icon;
this.anchor = anchor;
}
[Resolved]
private OverlayColourProvider colourProvider { get; set; }
protected override void LoadComplete()
{
base.LoadComplete();
Content.CornerRadius = 0;
Content.Masking = false;
BackgroundColour = colourProvider.Background2;
Content.Add(new Container
{
RelativeSizeAxes = Axes.Both,
Padding = new MarginPadding(15),
Children = new Drawable[]
{
spriteIcon = new SpriteIcon
{
Icon = icon,
Size = new Vector2(22),
Anchor = anchor,
Origin = anchor,
Colour = colourProvider.Background1,
},
}
});
}
protected override bool OnMouseDown(MouseDownEvent e)
{
// scale looks bad so don't call base.
return false;
}
protected override bool OnHover(HoverEvent e)
{
spriteIcon.FadeColour(colourProvider.Content2, 200, Easing.OutQuint);
return base.OnHover(e);
}
protected override void OnHoverLost(HoverLostEvent e)
{
spriteIcon.FadeColour(colourProvider.Background1, 200, Easing.OutQuint);
base.OnHoverLost(e);
}
}
private void start()
{ {
editorClock.Seek(selectedGroup.Value.Time); editorClock.Seek(selectedGroup.Value.Time);
editorClock.Start(); editorClock.Start();
} }
}, true);
}
private void adjustOffset(double adjust) private void adjustOffset(double adjust)
{ {
@ -201,12 +278,6 @@ namespace osu.Game.Screens.Edit.Timing
timing.BeatLength = 60000 / (timing.BPM + adjust); timing.BeatLength = 60000 / (timing.BPM + adjust);
} }
private void tap()
{
editorClock.Seek(selectedGroup.Value.Time);
editorClock.Start();
}
private void reset() private void reset()
{ {
editorClock.Stop(); editorClock.Stop();