mirror of
https://github.com/ppy/osu.git
synced 2024-12-14 14:32:55 +08:00
Implement mod panel for new mod select screen
This commit is contained in:
parent
99045c6ac8
commit
8a0aba6c59
42
osu.Game.Tests/Visual/UserInterface/TestSceneModPanel.cs
Normal file
42
osu.Game.Tests/Visual/UserInterface/TestSceneModPanel.cs
Normal file
@ -0,0 +1,42 @@
|
||||
// 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 NUnit.Framework;
|
||||
using osu.Framework.Allocation;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Game.Overlays;
|
||||
using osu.Game.Overlays.Mods;
|
||||
using osu.Game.Rulesets.Osu.Mods;
|
||||
using osuTK;
|
||||
|
||||
namespace osu.Game.Tests.Visual.UserInterface
|
||||
{
|
||||
[TestFixture]
|
||||
public class TestSceneModPanel : OsuManualInputManagerTestScene
|
||||
{
|
||||
[Cached]
|
||||
private OverlayColourProvider colourProvider = new OverlayColourProvider(OverlayColourScheme.Green);
|
||||
|
||||
[Test]
|
||||
public void TestVariousPanels()
|
||||
{
|
||||
AddStep("create content", () => Child = new FillFlowContainer
|
||||
{
|
||||
Width = 300,
|
||||
AutoSizeAxes = Axes.Y,
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Spacing = new Vector2(0, 5),
|
||||
Children = new[]
|
||||
{
|
||||
new ModPanel(new OsuModHalfTime()),
|
||||
new ModPanel(new OsuModFlashlight()),
|
||||
new ModPanel(new OsuModAutoplay()),
|
||||
new ModPanel(new OsuModAlternate()),
|
||||
new ModPanel(new OsuModApproachDifferent())
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
272
osu.Game/Overlays/Mods/ModPanel.cs
Normal file
272
osu.Game/Overlays/Mods/ModPanel.cs
Normal file
@ -0,0 +1,272 @@
|
||||
// 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.Audio;
|
||||
using osu.Framework.Audio.Sample;
|
||||
using osu.Framework.Bindables;
|
||||
using osu.Framework.Graphics;
|
||||
using osu.Framework.Graphics.Colour;
|
||||
using osu.Framework.Graphics.Containers;
|
||||
using osu.Framework.Graphics.Shapes;
|
||||
using osu.Framework.Input.Events;
|
||||
using osu.Framework.Utils;
|
||||
using osu.Game.Graphics;
|
||||
using osu.Game.Graphics.Containers;
|
||||
using osu.Game.Graphics.Sprites;
|
||||
using osu.Game.Graphics.UserInterface;
|
||||
using osu.Game.Rulesets.Mods;
|
||||
using osu.Game.Rulesets.UI;
|
||||
using osuTK;
|
||||
using osuTK.Input;
|
||||
|
||||
#nullable enable
|
||||
|
||||
namespace osu.Game.Overlays.Mods
|
||||
{
|
||||
public class ModPanel : OsuClickableContainer
|
||||
{
|
||||
public Mod Mod { get; }
|
||||
public BindableBool Active { get; } = new BindableBool();
|
||||
|
||||
protected readonly Box Background;
|
||||
protected readonly Container SwitchContainer;
|
||||
protected readonly Container MainContentContainer;
|
||||
protected readonly Box TextBackground;
|
||||
protected readonly FillFlowContainer TextFlow;
|
||||
|
||||
[Resolved]
|
||||
protected OverlayColourProvider ColourProvider { get; private set; } = null!;
|
||||
|
||||
protected const double TRANSITION_DURATION = 150;
|
||||
protected const float SHEAR_X = 0.2f;
|
||||
|
||||
protected const float HEIGHT = 42;
|
||||
protected const float CORNER_RADIUS = 7;
|
||||
protected const float IDLE_SWITCH_WIDTH = 54;
|
||||
protected const float EXPANDED_SWITCH_WIDTH = 70;
|
||||
|
||||
private Colour4 activeColour;
|
||||
private Colour4 activeHoverColour;
|
||||
|
||||
private Sample? sampleOff;
|
||||
private Sample? sampleOn;
|
||||
|
||||
public ModPanel(Mod mod)
|
||||
{
|
||||
Mod = mod;
|
||||
|
||||
RelativeSizeAxes = Axes.X;
|
||||
Height = 42;
|
||||
|
||||
// all below properties are applied to `Content` rather than the `ModPanel` in its entirety
|
||||
// to allow external components to set these properties on the panel without affecting
|
||||
// its "internal" appearance.
|
||||
Content.Masking = true;
|
||||
Content.CornerRadius = CORNER_RADIUS;
|
||||
Content.BorderThickness = 2;
|
||||
Content.Shear = new Vector2(SHEAR_X, 0);
|
||||
|
||||
Children = new Drawable[]
|
||||
{
|
||||
Background = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
SwitchContainer = new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.Y,
|
||||
Child = new ModSwitchSmall(mod)
|
||||
{
|
||||
Anchor = Anchor.Centre,
|
||||
Origin = Anchor.Centre,
|
||||
Active = { BindTarget = Active },
|
||||
Shear = new Vector2(-SHEAR_X, 0),
|
||||
Scale = new Vector2(HEIGHT / ModSwitchSmall.DEFAULT_SIZE)
|
||||
}
|
||||
},
|
||||
MainContentContainer = new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Child = new Container
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Masking = true,
|
||||
CornerRadius = CORNER_RADIUS,
|
||||
Children = new Drawable[]
|
||||
{
|
||||
TextBackground = new Box
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both
|
||||
},
|
||||
TextFlow = new FillFlowContainer
|
||||
{
|
||||
RelativeSizeAxes = Axes.Both,
|
||||
Padding = new MarginPadding
|
||||
{
|
||||
Horizontal = 17.5f,
|
||||
Vertical = 4
|
||||
},
|
||||
Direction = FillDirection.Vertical,
|
||||
Children = new[]
|
||||
{
|
||||
new OsuSpriteText
|
||||
{
|
||||
Text = mod.Name,
|
||||
Font = OsuFont.TorusAlternate.With(size: 18, weight: FontWeight.SemiBold),
|
||||
Shear = new Vector2(-SHEAR_X, 0),
|
||||
Margin = new MarginPadding
|
||||
{
|
||||
Left = -18 * SHEAR_X
|
||||
}
|
||||
},
|
||||
new OsuSpriteText
|
||||
{
|
||||
Text = mod.Description,
|
||||
Font = OsuFont.Default.With(size: 12),
|
||||
RelativeSizeAxes = Axes.X,
|
||||
Truncate = true,
|
||||
Shear = new Vector2(-SHEAR_X, 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Action = Active.Toggle;
|
||||
}
|
||||
|
||||
[BackgroundDependencyLoader]
|
||||
private void load(AudioManager audio, OsuColour colours)
|
||||
{
|
||||
sampleOn = audio.Samples.Get(@"UI/check-on");
|
||||
sampleOff = audio.Samples.Get(@"UI/check-off");
|
||||
|
||||
activeColour = colours.ForModType(Mod.Type);
|
||||
activeHoverColour = activeColour.Lighten(0.3f);
|
||||
}
|
||||
|
||||
protected override HoverSounds CreateHoverSounds(HoverSampleSet sampleSet) => new HoverSounds(sampleSet);
|
||||
|
||||
protected override void LoadComplete()
|
||||
{
|
||||
base.LoadComplete();
|
||||
Active.BindValueChanged(_ =>
|
||||
{
|
||||
playStateChangeSamples();
|
||||
UpdateState();
|
||||
});
|
||||
|
||||
UpdateState();
|
||||
FinishTransforms(true);
|
||||
}
|
||||
|
||||
private void playStateChangeSamples()
|
||||
{
|
||||
if (Active.Value)
|
||||
sampleOn?.Play();
|
||||
else
|
||||
sampleOff?.Play();
|
||||
}
|
||||
|
||||
protected override bool OnHover(HoverEvent e)
|
||||
{
|
||||
UpdateState();
|
||||
return base.OnHover(e);
|
||||
}
|
||||
|
||||
protected override void OnHoverLost(HoverLostEvent e)
|
||||
{
|
||||
UpdateState();
|
||||
base.OnHoverLost(e);
|
||||
}
|
||||
|
||||
private double? mouseDownTime;
|
||||
|
||||
protected override bool OnMouseDown(MouseDownEvent e)
|
||||
{
|
||||
if (e.Button == MouseButton.Left)
|
||||
mouseDownTime = Time.Current;
|
||||
return true;
|
||||
}
|
||||
|
||||
protected override void OnMouseUp(MouseUpEvent e)
|
||||
{
|
||||
mouseDownTime = null;
|
||||
base.OnMouseUp(e);
|
||||
}
|
||||
|
||||
protected override bool OnDragStart(DragStartEvent e)
|
||||
{
|
||||
mouseDownTime = null;
|
||||
return true;
|
||||
}
|
||||
|
||||
protected override void Update()
|
||||
{
|
||||
base.Update();
|
||||
|
||||
if (mouseDownTime != null)
|
||||
{
|
||||
double startTime = mouseDownTime.Value;
|
||||
double endTime = startTime + 600;
|
||||
|
||||
float startValue = Active.Value ? EXPANDED_SWITCH_WIDTH : IDLE_SWITCH_WIDTH;
|
||||
float endValue = IDLE_SWITCH_WIDTH + (EXPANDED_SWITCH_WIDTH - IDLE_SWITCH_WIDTH) * (Active.Value ? 0.2f : 0.8f);
|
||||
|
||||
float targetWidth = Interpolation.ValueAt<float>(Math.Clamp(Time.Current, startTime, endTime), startValue, endValue, startTime, endTime, Easing.OutQuint);
|
||||
|
||||
SwitchContainer.Width = targetWidth;
|
||||
MainContentContainer.Padding = new MarginPadding
|
||||
{
|
||||
Left = targetWidth,
|
||||
Right = CORNER_RADIUS
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
protected virtual void UpdateState()
|
||||
{
|
||||
if (Active.Value)
|
||||
{
|
||||
Colour4 backgroundTextColour = IsHovered ? activeHoverColour : activeColour;
|
||||
Colour4 backgroundColour = Interpolation.ValueAt<Colour4>(0.7f, Colour4.Black, backgroundTextColour, 0, 1);
|
||||
|
||||
Content.TransformTo(nameof(BorderColour), (ColourInfo)backgroundColour, TRANSITION_DURATION, Easing.OutQuint);
|
||||
Background.FadeColour(backgroundColour, TRANSITION_DURATION, Easing.OutQuint);
|
||||
SwitchContainer.ResizeWidthTo(EXPANDED_SWITCH_WIDTH, TRANSITION_DURATION, Easing.OutQuint);
|
||||
MainContentContainer.TransformTo(nameof(Padding), new MarginPadding
|
||||
{
|
||||
Left = EXPANDED_SWITCH_WIDTH,
|
||||
Right = CORNER_RADIUS
|
||||
}, TRANSITION_DURATION, Easing.OutQuint);
|
||||
TextBackground.FadeColour(backgroundTextColour, TRANSITION_DURATION, Easing.OutQuint);
|
||||
TextFlow.FadeColour(ColourProvider.Background6, TRANSITION_DURATION, Easing.OutQuint);
|
||||
}
|
||||
else
|
||||
{
|
||||
Colour4 backgroundColour = ColourProvider.Background3;
|
||||
if (IsHovered)
|
||||
backgroundColour = Interpolation.ValueAt<Colour4>(0.25f, backgroundColour, activeColour, 0, 1);
|
||||
|
||||
Colour4 textBackgroundColour = ColourProvider.Background2;
|
||||
if (IsHovered)
|
||||
textBackgroundColour = Interpolation.ValueAt<Colour4>(0.25f, textBackgroundColour, activeColour, 0, 1);
|
||||
|
||||
Content.TransformTo(nameof(BorderColour), ColourInfo.GradientVertical(backgroundColour, textBackgroundColour), TRANSITION_DURATION, Easing.OutQuint);
|
||||
Background.FadeColour(backgroundColour, TRANSITION_DURATION, Easing.OutQuint);
|
||||
SwitchContainer.ResizeWidthTo(IDLE_SWITCH_WIDTH, TRANSITION_DURATION, Easing.OutQuint);
|
||||
MainContentContainer.TransformTo(nameof(Padding), new MarginPadding
|
||||
{
|
||||
Left = IDLE_SWITCH_WIDTH,
|
||||
Right = CORNER_RADIUS
|
||||
}, TRANSITION_DURATION, Easing.OutQuint);
|
||||
TextBackground.FadeColour(textBackgroundColour, TRANSITION_DURATION, Easing.OutQuint);
|
||||
TextFlow.FadeColour(Colour4.White, TRANSITION_DURATION, Easing.OutQuint);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user