1
0
mirror of https://github.com/ppy/osu.git synced 2024-11-06 06:57:39 +08:00

Merge pull request #2945 from peppy/improve-button-system

Improve code quality of main menu button system
This commit is contained in:
Dan Balasescu 2018-07-10 17:18:53 +09:00 committed by GitHub
commit e7f3a3d9cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 259 additions and 161 deletions

View File

@ -1,6 +1,9 @@
// Copyright (c) 2007-2018 ppy Pty Ltd <contact@ppy.sh>.
// Licensed under the MIT Licence - https://raw.githubusercontent.com/ppy/osu/master/LICENCE
using System;
using System.Collections.Generic;
using System.Linq;
using NUnit.Framework;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Colour;
@ -13,6 +16,13 @@ namespace osu.Game.Tests.Visual
[TestFixture]
public class TestCaseButtonSystem : OsuTestCase
{
public override IReadOnlyList<Type> RequiredTypes => new[]
{
typeof(ButtonSystem),
typeof(ButtonArea),
typeof(Button)
};
public TestCaseButtonSystem()
{
OsuLogo logo;
@ -30,6 +40,9 @@ namespace osu.Game.Tests.Visual
};
buttons.SetOsuLogo(logo);
foreach (var s in Enum.GetValues(typeof(ButtonSystemState)).OfType<ButtonSystemState>().Skip(1))
AddStep($"State to {s}", () => buttons.State = s);
}
}
}

View File

@ -35,6 +35,12 @@ namespace osu.Game.Screens.Menu
private readonly Box boxHoverLayer;
private readonly SpriteIcon icon;
private readonly string sampleName;
/// <summary>
/// The menu state for which we are visible for.
/// </summary>
public ButtonSystemState VisibleState = ButtonSystemState.TopLevel;
private readonly Action clickAction;
private readonly Key triggerKey;
private SampleChannel sampleClick;
@ -51,7 +57,7 @@ namespace osu.Game.Screens.Menu
AutoSizeAxes = Axes.Both;
Alpha = 0;
Vector2 boxSize = new Vector2(ButtonSystem.BUTTON_WIDTH + Math.Abs(extraWidth), ButtonSystem.BUTTON_AREA_HEIGHT);
Vector2 boxSize = new Vector2(ButtonSystem.BUTTON_WIDTH + Math.Abs(extraWidth), ButtonArea.BUTTON_AREA_HEIGHT);
Children = new Drawable[]
{
@ -260,6 +266,7 @@ namespace osu.Game.Screens.Menu
this.FadeOut(800);
break;
}
break;
case ButtonState.Expanded:
const int expand_duration = 500;
@ -276,6 +283,33 @@ namespace osu.Game.Screens.Menu
StateChanged?.Invoke(State);
}
}
public ButtonSystemState ButtonSystemState
{
set
{
ContractStyle = 0;
switch (value)
{
case ButtonSystemState.Initial:
State = ButtonState.Contracted;
break;
case ButtonSystemState.EnteringMode:
ContractStyle = 1;
State = ButtonState.Contracted;
break;
default:
if (value == VisibleState)
State = ButtonState.Expanded;
else if (value < VisibleState)
State = ButtonState.Contracted;
else
State = ButtonState.Exploded;
break;
}
}
}
}
public enum ButtonState

View File

@ -0,0 +1,148 @@
// Copyright (c) 2007-2018 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.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Graphics;
using OpenTK;
namespace osu.Game.Screens.Menu
{
public class ButtonArea : Container, IStateful<Visibility>
{
public FlowContainerWithOrigin Flow;
protected override Container<Drawable> Content => Flow;
private readonly ButtonAreaBackground buttonAreaBackground;
private Visibility state;
public const float BUTTON_AREA_HEIGHT = 100;
public ButtonArea()
{
RelativeSizeAxes = Axes.Both;
InternalChild = new Container
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Size = new Vector2(1, BUTTON_AREA_HEIGHT),
Alpha = 0,
Children = new Drawable[]
{
buttonAreaBackground = new ButtonAreaBackground(),
Flow = new FlowContainerWithOrigin
{
Direction = FillDirection.Horizontal,
Spacing = new Vector2(-ButtonSystem.WEDGE_WIDTH, 0),
Anchor = Anchor.Centre,
AutoSizeAxes = Axes.Both,
}
}
};
}
public ButtonSystemState ButtonSystemState
{
set
{
switch (value)
{
case ButtonSystemState.Exit:
case ButtonSystemState.Initial:
case ButtonSystemState.EnteringMode:
State = Visibility.Hidden;
break;
case ButtonSystemState.TopLevel:
case ButtonSystemState.Play:
State = Visibility.Visible;
break;
}
buttonAreaBackground.ButtonSystemState = value;
}
}
public Visibility State
{
get => state;
set
{
if (value == state) return;
state = value;
InternalChild.FadeTo(state == Visibility.Hidden ? 0 : 1, 300);
StateChanged?.Invoke(state);
}
}
public event Action<Visibility> StateChanged;
private class ButtonAreaBackground : Box, IStateful<ButtonAreaBackgroundState>
{
private ButtonAreaBackgroundState state;
public ButtonAreaBackground()
{
RelativeSizeAxes = Axes.Both;
Size = new Vector2(2, 1);
Colour = OsuColour.Gray(50);
Anchor = Anchor.Centre;
Origin = Anchor.Centre;
}
public ButtonAreaBackgroundState State
{
get => state;
set
{
if (value == state) return;
state = value;
switch (state)
{
case ButtonAreaBackgroundState.Flat:
this.ScaleTo(new Vector2(2, 0), 300, Easing.InSine);
break;
case ButtonAreaBackgroundState.Normal:
this.ScaleTo(Vector2.One, 400, Easing.OutQuint);
break;
}
StateChanged?.Invoke(state);
}
}
public ButtonSystemState ButtonSystemState
{
set
{
switch (value)
{
default:
State = ButtonAreaBackgroundState.Normal;
break;
case ButtonSystemState.Initial:
case ButtonSystemState.Exit:
case ButtonSystemState.EnteringMode:
State = ButtonAreaBackgroundState.Flat;
break;
}
}
}
public event Action<ButtonAreaBackgroundState> StateChanged;
}
public enum ButtonAreaBackgroundState
{
Normal,
Flat
}
}
}

View File

@ -10,8 +10,8 @@ using osu.Framework.Audio;
using osu.Framework.Audio.Sample;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Input.Bindings;
using osu.Framework.Logging;
using osu.Framework.Threading;
using osu.Game.Graphics;
using osu.Game.Input.Bindings;
@ -22,9 +22,9 @@ using OpenTK.Input;
namespace osu.Game.Screens.Menu
{
public class ButtonSystem : Container, IStateful<MenuState>, IKeyBindingHandler<GlobalAction>
public class ButtonSystem : Container, IStateful<ButtonSystemState>, IKeyBindingHandler<GlobalAction>
{
public event Action<MenuState> StateChanged;
public event Action<ButtonSystemState> StateChanged;
public Action OnEdit;
public Action OnExit;
@ -33,12 +33,6 @@ namespace osu.Game.Screens.Menu
public Action OnSettings;
public Action OnMulti;
public Action OnChart;
public Action OnTest;
private readonly FlowContainerWithOrigin buttonFlow;
//todo: make these non-internal somehow.
public const float BUTTON_AREA_HEIGHT = 100;
public const float BUTTON_WIDTH = 140f;
public const float WEDGE_WIDTH = 20;
@ -54,18 +48,16 @@ namespace osu.Game.Screens.Menu
this.logo.Action = onOsuLogo;
// osuLogo.SizeForFlow relies on loading to be complete.
buttonFlow.Position = new Vector2(WEDGE_WIDTH * 2 - (BUTTON_WIDTH + this.logo.SizeForFlow / 4), 0);
buttonArea.Flow.Position = new Vector2(WEDGE_WIDTH * 2 - (BUTTON_WIDTH + this.logo.SizeForFlow / 4), 0);
updateLogoState();
}
}
private readonly Drawable iconFacade;
private readonly Container buttonArea;
private readonly Box buttonAreaBackground;
private readonly ButtonArea buttonArea;
private readonly Button backButton;
private readonly Button settingsButton;
private readonly List<Button> buttonsTopLevel = new List<Button>();
private readonly List<Button> buttonsPlay = new List<Button>();
@ -76,57 +68,35 @@ namespace osu.Game.Screens.Menu
{
RelativeSizeAxes = Axes.Both;
Children = new Drawable[]
Child = buttonArea = new ButtonArea();
buttonArea.AddRange(new[]
{
buttonArea = new Container
new Button(@"settings", string.Empty, FontAwesome.fa_gear, new Color4(85, 85, 85, 255), () => OnSettings?.Invoke(), -WEDGE_WIDTH, Key.O),
backButton = new Button(@"back", @"button-back-select", FontAwesome.fa_osu_left_o, new Color4(51, 58, 94, 255), () => State = ButtonSystemState.TopLevel, -WEDGE_WIDTH)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
RelativeSizeAxes = Axes.X,
Size = new Vector2(1, BUTTON_AREA_HEIGHT),
Alpha = 0,
Children = new Drawable[]
{
buttonAreaBackground = new Box
{
RelativeSizeAxes = Axes.Both,
Size = new Vector2(2, 1),
Colour = OsuColour.Gray(50),
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
},
buttonFlow = new FlowContainerWithOrigin
{
Direction = FillDirection.Horizontal,
Spacing = new Vector2(-WEDGE_WIDTH, 0),
Anchor = Anchor.Centre,
AutoSizeAxes = Axes.Both,
Children = new[]
{
settingsButton = new Button(@"settings", string.Empty, FontAwesome.fa_gear, new Color4(85, 85, 85, 255), () => OnSettings?.Invoke(), -WEDGE_WIDTH, Key.O),
backButton = new Button(@"back", string.Empty, FontAwesome.fa_osu_left_o, new Color4(51, 58, 94, 255), onBack, -WEDGE_WIDTH),
iconFacade = new Container //need a container to make the osu! icon flow properly.
{
Size = new Vector2(0, BUTTON_AREA_HEIGHT)
}
},
CentreTarget = iconFacade
}
}
VisibleState = ButtonSystemState.Play,
},
};
iconFacade = new Container //need a container to make the osu! icon flow properly.
{
Size = new Vector2(0, ButtonArea.BUTTON_AREA_HEIGHT)
}
});
buttonArea.Flow.CentreTarget = iconFacade;
buttonsPlay.Add(new Button(@"solo", @"button-solo-select", FontAwesome.fa_user, new Color4(102, 68, 204, 255), () => OnSolo?.Invoke(), WEDGE_WIDTH, Key.P));
buttonsPlay.Add(new Button(@"multi", @"button-generic-select", FontAwesome.fa_users, new Color4(94, 63, 186, 255), () => OnMulti?.Invoke(), 0, Key.M));
buttonsPlay.Add(new Button(@"chart", @"button-generic-select", FontAwesome.fa_osu_charts, new Color4(80, 53, 160, 255), () => OnChart?.Invoke()));
buttonsPlay.ForEach(b => b.VisibleState = ButtonSystemState.Play);
buttonsTopLevel.Add(new Button(@"play", @"button-play-select", FontAwesome.fa_osu_logo, new Color4(102, 68, 204, 255), onPlay, WEDGE_WIDTH, Key.P));
buttonsTopLevel.Add(new Button(@"play", @"button-play-select", FontAwesome.fa_osu_logo, new Color4(102, 68, 204, 255), () => State = ButtonSystemState.Play, WEDGE_WIDTH, Key.P));
buttonsTopLevel.Add(new Button(@"osu!editor", @"button-generic-select", FontAwesome.fa_osu_edit_o, new Color4(238, 170, 0, 255), () => OnEdit?.Invoke(), 0, Key.E));
buttonsTopLevel.Add(new Button(@"osu!direct", @"button-direct-select", FontAwesome.fa_osu_chevron_down_o, new Color4(165, 204, 0, 255), () => OnDirect?.Invoke(), 0, Key.D));
buttonsTopLevel.Add(new Button(@"exit", string.Empty, FontAwesome.fa_osu_cross_o, new Color4(238, 51, 153, 255), onExit, 0, Key.Q));
buttonsTopLevel.Add(new Button(@"exit", string.Empty, FontAwesome.fa_osu_cross_o, new Color4(238, 51, 153, 255), () => OnExit?.Invoke(), 0, Key.Q));
buttonFlow.AddRange(buttonsPlay);
buttonFlow.AddRange(buttonsTopLevel);
buttonArea.AddRange(buttonsPlay);
buttonArea.AddRange(buttonsTopLevel);
}
private OsuGame game;
@ -152,14 +122,17 @@ namespace osu.Game.Screens.Menu
}
}
public bool OnReleased(GlobalAction action) => false;
private bool goBack()
{
switch (State)
{
case MenuState.TopLevel:
State = MenuState.Initial;
case ButtonSystemState.TopLevel:
State = ButtonSystemState.Initial;
sampleBack?.Play();
return true;
case MenuState.Play:
case ButtonSystemState.Play:
backButton.TriggerOnClick();
return true;
default:
@ -167,48 +140,30 @@ namespace osu.Game.Screens.Menu
}
}
public bool OnReleased(GlobalAction action) => false;
private void onPlay()
{
State = MenuState.Play;
}
private void onExit()
{
OnExit?.Invoke();
}
private void onBack()
{
sampleBack?.Play();
State = MenuState.TopLevel;
}
private bool onOsuLogo()
{
switch (state)
{
default:
return true;
case MenuState.Initial:
State = MenuState.TopLevel;
case ButtonSystemState.Initial:
State = ButtonSystemState.TopLevel;
return true;
case MenuState.TopLevel:
case ButtonSystemState.TopLevel:
buttonsTopLevel.First().TriggerOnClick();
return false;
case MenuState.Play:
case ButtonSystemState.Play:
buttonsPlay.First().TriggerOnClick();
return false;
}
}
private MenuState state;
private ButtonSystemState state = ButtonSystemState.Initial;
public override bool HandleKeyboardInput => state != MenuState.Exit;
public override bool HandleMouseInput => state != MenuState.Exit;
public override bool HandleKeyboardInput => state != ButtonSystemState.Exit;
public override bool HandleMouseInput => state != ButtonSystemState.Exit;
public MenuState State
public ButtonSystemState State
{
get { return state; }
@ -216,71 +171,19 @@ namespace osu.Game.Screens.Menu
{
if (state == value) return;
MenuState lastState = state;
ButtonSystemState lastState = state;
state = value;
//todo: figure a more elegant way of doing this.
buttonsTopLevel.ForEach(b => b.ContractStyle = 0);
buttonsPlay.ForEach(b => b.ContractStyle = 0);
backButton.ContractStyle = 0;
settingsButton.ContractStyle = 0;
updateLogoState(lastState);
using (buttonArea.BeginDelayedSequence(lastState == MenuState.Initial ? 150 : 0, true))
Logger.Log($"{nameof(ButtonSystem)}'s state changed from {lastState} to {state}");
using (buttonArea.BeginDelayedSequence(lastState == ButtonSystemState.Initial ? 150 : 0, true))
{
switch (state)
{
case MenuState.Exit:
case MenuState.Initial:
buttonAreaBackground.ScaleTo(Vector2.One, 500, Easing.Out);
buttonArea.FadeOut(300);
buttonArea.ButtonSystemState = state;
foreach (Button b in buttonsTopLevel)
b.State = ButtonState.Contracted;
foreach (Button b in buttonsPlay)
b.State = ButtonState.Contracted;
if (state != MenuState.Exit && lastState == MenuState.TopLevel)
sampleBack?.Play();
break;
case MenuState.TopLevel:
buttonAreaBackground.ScaleTo(Vector2.One, 200, Easing.Out);
buttonArea.FadeIn(300);
foreach (Button b in buttonsTopLevel)
b.State = ButtonState.Expanded;
foreach (Button b in buttonsPlay)
b.State = ButtonState.Contracted;
break;
case MenuState.Play:
foreach (Button b in buttonsTopLevel)
b.State = ButtonState.Exploded;
foreach (Button b in buttonsPlay)
b.State = ButtonState.Expanded;
break;
case MenuState.EnteringMode:
buttonAreaBackground.ScaleTo(new Vector2(2, 0), 300, Easing.InSine);
buttonsTopLevel.ForEach(b => b.ContractStyle = 1);
buttonsPlay.ForEach(b => b.ContractStyle = 1);
backButton.ContractStyle = 1;
settingsButton.ContractStyle = 1;
foreach (Button b in buttonsTopLevel)
b.State = ButtonState.Contracted;
foreach (Button b in buttonsPlay)
b.State = ButtonState.Contracted;
break;
}
backButton.State = state == MenuState.Play ? ButtonState.Expanded : ButtonState.Contracted;
settingsButton.State = state == MenuState.TopLevel ? ButtonState.Expanded : ButtonState.Contracted;
foreach (var b in buttonArea.Children.OfType<Button>())
b.ButtonSystemState = state;
}
StateChanged?.Invoke(State);
@ -289,14 +192,14 @@ namespace osu.Game.Screens.Menu
private ScheduledDelegate logoDelayedAction;
private void updateLogoState(MenuState lastState = MenuState.Initial)
private void updateLogoState(ButtonSystemState lastState = ButtonSystemState.Initial)
{
if (logo == null) return;
switch (state)
{
case MenuState.Exit:
case MenuState.Initial:
case ButtonSystemState.Exit:
case ButtonSystemState.Initial:
logoDelayedAction?.Cancel();
logoDelayedAction = Scheduler.AddDelayed(() =>
{
@ -304,7 +207,7 @@ namespace osu.Game.Screens.Menu
if (game != null)
{
game.OverlayActivationMode.Value = state == MenuState.Exit ? OverlayActivation.Disabled : OverlayActivation.All;
game.OverlayActivationMode.Value = state == ButtonSystemState.Exit ? OverlayActivation.Disabled : OverlayActivation.All;
game.Toolbar.Hide();
}
@ -315,22 +218,22 @@ namespace osu.Game.Screens.Menu
logo.ScaleTo(1, 800, Easing.OutExpo);
}, buttonArea.Alpha * 150);
break;
case MenuState.TopLevel:
case MenuState.Play:
case ButtonSystemState.TopLevel:
case ButtonSystemState.Play:
switch (lastState)
{
case MenuState.TopLevel: // coming from toplevel to play
case ButtonSystemState.TopLevel: // coming from toplevel to play
break;
case MenuState.Initial:
case ButtonSystemState.Initial:
logo.ClearTransforms(targetMember: nameof(Position));
logo.RelativePositionAxes = Axes.None;
bool impact = logo.Scale.X > 0.6f;
if (lastState == MenuState.Initial)
if (lastState == ButtonSystemState.Initial)
logo.ScaleTo(0.5f, 200, Easing.In);
logo.MoveTo(logoTrackingPosition, lastState == MenuState.EnteringMode ? 0 : 200, Easing.In);
logo.MoveTo(logoTrackingPosition, lastState == ButtonSystemState.EnteringMode ? 0 : 200, Easing.In);
logoDelayedAction?.Cancel();
logoDelayedAction = Scheduler.AddDelayed(() =>
@ -356,7 +259,7 @@ namespace osu.Game.Screens.Menu
}
break;
case MenuState.EnteringMode:
case ButtonSystemState.EnteringMode:
logoTracking = true;
break;
}
@ -375,7 +278,7 @@ namespace osu.Game.Screens.Menu
if (logo != null)
{
if (logoTracking)
if (logoTracking && iconFacade.IsLoaded)
logo.Position = logoTrackingPosition;
iconFacade.Width = logo.SizeForFlow * 0.5f;
@ -383,12 +286,12 @@ namespace osu.Game.Screens.Menu
}
}
public enum MenuState
public enum ButtonSystemState
{
Exit,
Initial,
TopLevel,
Play,
EnteringMode,
Exit,
}
}

View File

@ -24,9 +24,9 @@ namespace osu.Game.Screens.Menu
{
private readonly ButtonSystem buttons;
protected override bool HideOverlaysOnEnter => buttons.State == MenuState.Initial;
protected override bool HideOverlaysOnEnter => buttons.State == ButtonSystemState.Initial;
protected override bool AllowBackButton => buttons.State != MenuState.Initial;
protected override bool AllowBackButton => buttons.State != ButtonSystemState.Initial;
private readonly BackgroundScreenDefault background;
private Screen songSelect;
@ -123,7 +123,7 @@ namespace osu.Game.Screens.Menu
if (resuming)
{
buttons.State = MenuState.TopLevel;
buttons.State = ButtonSystemState.TopLevel;
const float length = 300;
@ -155,7 +155,7 @@ namespace osu.Game.Screens.Menu
const float length = 400;
buttons.State = MenuState.EnteringMode;
buttons.State = ButtonSystemState.EnteringMode;
Content.FadeOut(length, Easing.InSine);
Content.MoveTo(new Vector2(-800, 0), length, Easing.InSine);
@ -175,7 +175,7 @@ namespace osu.Game.Screens.Menu
protected override bool OnExiting(Screen next)
{
buttons.State = MenuState.Exit;
buttons.State = ButtonSystemState.Exit;
Content.FadeOut(3000);
return base.OnExiting(next);
}