1
0
mirror of https://github.com/ppy/osu.git synced 2024-11-15 12:27:26 +08:00

Merge pull request #29936 from u4vh3/skinning-colour-customisation

Add colour customisation to layout editor
This commit is contained in:
Dean Herbert 2024-09-27 14:20:58 +09:00 committed by GitHub
commit 5efdc6cdd7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 340 additions and 97 deletions

View File

@ -5,6 +5,7 @@ using NUnit.Framework;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Localisation;
using osu.Game.Configuration;
using osu.Game.Overlays.Settings;
@ -19,16 +20,20 @@ namespace osu.Game.Tests.Visual.Settings
{
Children = new Drawable[]
{
new FillFlowContainer
new PopoverContainer
{
RelativeSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Spacing = new Vector2(20),
Width = 0.5f,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Padding = new MarginPadding(50),
ChildrenEnumerable = new TestTargetClass().CreateSettingsControls()
Child = new FillFlowContainer
{
RelativeSizeAxes = Axes.Both,
Direction = FillDirection.Vertical,
Spacing = new Vector2(20),
Width = 0.5f,
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Padding = new MarginPadding(50),
ChildrenEnumerable = new TestTargetClass().CreateSettingsControls()
},
},
};
}
@ -66,6 +71,13 @@ namespace osu.Game.Tests.Visual.Settings
[SettingSource("Sample number textbox", "Textbox number entry", SettingControlType = typeof(SettingsNumberBox))]
public Bindable<int?> IntTextBoxBindable { get; } = new Bindable<int?>();
[SettingSource("Sample colour", "Change the colour", SettingControlType = typeof(SettingsColour))]
public BindableColour4 ColourBindable { get; } = new BindableColour4
{
Default = Colour4.White,
Value = Colour4.Red
};
}
private enum TestEnum

View File

@ -0,0 +1,75 @@
// 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.Linq;
using NUnit.Framework;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Testing;
using osu.Framework.Utils;
using osu.Game.Graphics.UserInterfaceV2;
using osu.Game.Overlays.Settings;
using osuTK.Graphics;
using osuTK.Input;
namespace osu.Game.Tests.Visual.UserInterface
{
public partial class TestSceneSettingsColour : OsuManualInputManagerTestScene
{
private SettingsColour? component;
[Test]
public void TestColour()
{
createContent();
AddRepeatStep("set random colour", () => component!.Current.Value = randomColour(), 4);
}
[Test]
public void TestUserInteractions()
{
createContent();
AddStep("click colour", () =>
{
InputManager.MoveMouseTo(component!);
InputManager.Click(MouseButton.Left);
});
AddAssert("colour picker spawned", () => this.ChildrenOfType<OsuColourPicker>().Any());
}
private void createContent()
{
AddStep("create component", () =>
{
Child = new PopoverContainer
{
RelativeSizeAxes = Axes.Both,
Child = new FillFlowContainer
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Width = 500,
AutoSizeAxes = Axes.Y,
Children = new Drawable[]
{
component = new SettingsColour
{
LabelText = "a sample component",
},
},
},
};
});
}
private Colour4 randomColour() => new Color4(
RNG.NextSingle(),
RNG.NextSingle(),
RNG.NextSingle(),
1);
}
}

View File

@ -186,6 +186,16 @@ namespace osu.Game.Configuration
break;
case BindableColour4 bColour:
yield return new SettingsColour
{
LabelText = attr.Label,
TooltipText = attr.Description,
Current = bColour
};
break;
case IBindable bindable:
var dropdownType = typeof(ModSettingsEnumDropdown<>).MakeGenericType(bindable.GetType().GetGenericArguments()[0]);
var dropdown = (Drawable)Activator.CreateInstance(dropdownType)!;
@ -227,6 +237,9 @@ namespace osu.Game.Configuration
case Bindable<bool> b:
return b.Value;
case BindableColour4 c:
return c.Value.ToHex();
case IBindable u:
return BindableValueAccessor.GetValue(u);

View File

@ -59,6 +59,26 @@ namespace osu.Game.Localisation.SkinComponents
/// </summary>
public static LocalisableString ShowLabelDescription => new TranslatableString(getKey(@"show_label_description"), @"Whether the component's label should be shown.");
/// <summary>
/// "Colour"
/// </summary>
public static LocalisableString Colour => new TranslatableString(getKey(@"colour"), @"Colour");
/// <summary>
/// "The colour of the component."
/// </summary>
public static LocalisableString ColourDescription => new TranslatableString(getKey(@"colour_description"), @"The colour of the component.");
/// <summary>
/// "Text colour"
/// </summary>
public static LocalisableString TextColour => new TranslatableString(getKey(@"text_colour"), @"Text colour");
/// <summary>
/// "The colour of the text."
/// </summary>
public static LocalisableString TextColourDescription => new TranslatableString(getKey(@"text_colour_description"), @"The colour of the text.");
private static string getKey(string key) => $@"{prefix}:{key}";
}
}

View File

@ -0,0 +1,80 @@
// 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.Bindables;
using osu.Framework.Extensions;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Cursor;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Game.Graphics;
using osu.Game.Graphics.Containers;
using osu.Game.Graphics.Sprites;
using osu.Game.Graphics.UserInterfaceV2;
namespace osu.Game.Overlays.Settings
{
public partial class SettingsColour : SettingsItem<Colour4>
{
protected override Drawable CreateControl() => new ColourControl();
public partial class ColourControl : OsuClickableContainer, IHasPopover, IHasCurrentValue<Colour4>
{
private readonly BindableWithCurrent<Colour4> current = new BindableWithCurrent<Colour4>(Colour4.White);
public Bindable<Colour4> Current
{
get => current.Current;
set => current.Current = value;
}
private readonly Box fill;
private readonly OsuSpriteText colourHexCode;
public ColourControl()
{
RelativeSizeAxes = Axes.X;
Height = 40;
CornerRadius = 20;
Masking = true;
Action = this.ShowPopover;
Children = new Drawable[]
{
fill = new Box
{
RelativeSizeAxes = Axes.Both
},
colourHexCode = new OsuSpriteText
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,
Font = OsuFont.Default.With(size: 20)
}
};
}
protected override void LoadComplete()
{
base.LoadComplete();
Current.BindValueChanged(_ => updateColour(), true);
}
private void updateColour()
{
fill.Colour = Current.Value;
colourHexCode.Text = Current.Value.ToHex();
colourHexCode.Colour = OsuColour.ForegroundTextColourFor(Current.Value);
}
public Popover GetPopover() => new OsuPopover(false)
{
Child = new OsuColourPicker
{
Current = { BindTarget = Current }
}
};
}
}
}

View File

@ -33,6 +33,7 @@ using osu.Game.Screens.Edit;
using osu.Game.Screens.Edit.Components;
using osu.Game.Screens.Edit.Components.Menus;
using osu.Game.Skinning;
using osu.Framework.Graphics.Cursor;
namespace osu.Game.Overlays.SkinEditor
{
@ -118,107 +119,111 @@ namespace osu.Game.Overlays.SkinEditor
InternalChild = new OsuContextMenuContainer
{
RelativeSizeAxes = Axes.Both,
Child = new GridContainer
Child = new PopoverContainer
{
RelativeSizeAxes = Axes.Both,
RowDimensions = new[]
Child = new GridContainer
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
RelativeSizeAxes = Axes.Both,
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
},
Content = new[]
{
new Drawable[]
Content = new[]
{
new Container
new Drawable[]
{
Name = @"Menu container",
RelativeSizeAxes = Axes.X,
Depth = float.MinValue,
Height = MENU_HEIGHT,
Children = new Drawable[]
new Container
{
new EditorMenuBar
Name = @"Menu container",
RelativeSizeAxes = Axes.X,
Depth = float.MinValue,
Height = MENU_HEIGHT,
Children = new Drawable[]
{
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
RelativeSizeAxes = Axes.Both,
Items = new[]
new EditorMenuBar
{
new MenuItem(CommonStrings.MenuBarFile)
{
Items = new OsuMenuItem[]
{
new EditorMenuItem(Web.CommonStrings.ButtonsSave, MenuItemType.Standard, () => Save()),
new EditorMenuItem(CommonStrings.Export, MenuItemType.Standard, () => skins.ExportCurrentSkin()) { Action = { Disabled = !RuntimeInfo.IsDesktop } },
new OsuMenuItemSpacer(),
new EditorMenuItem(CommonStrings.RevertToDefault, MenuItemType.Destructive, () => dialogOverlay?.Push(new RevertConfirmDialog(revert))),
new OsuMenuItemSpacer(),
new EditorMenuItem(CommonStrings.Exit, MenuItemType.Standard, () => skinEditorOverlay?.Hide()),
},
},
new MenuItem(CommonStrings.MenuBarEdit)
{
Items = new OsuMenuItem[]
{
undoMenuItem = new EditorMenuItem(CommonStrings.Undo, MenuItemType.Standard, Undo),
redoMenuItem = new EditorMenuItem(CommonStrings.Redo, MenuItemType.Standard, Redo),
new OsuMenuItemSpacer(),
cutMenuItem = new EditorMenuItem(CommonStrings.Cut, MenuItemType.Standard, Cut),
copyMenuItem = new EditorMenuItem(CommonStrings.Copy, MenuItemType.Standard, Copy),
pasteMenuItem = new EditorMenuItem(CommonStrings.Paste, MenuItemType.Standard, Paste),
cloneMenuItem = new EditorMenuItem(CommonStrings.Clone, MenuItemType.Standard, Clone),
}
},
}
},
headerText = new OsuTextFlowContainer
{
TextAnchor = Anchor.TopRight,
Padding = new MarginPadding(5),
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
},
},
},
},
new Drawable[]
{
new SkinEditorSceneLibrary
{
RelativeSizeAxes = Axes.X,
},
},
new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new Drawable[]
{
componentsSidebar = new EditorSidebar(),
content = new Container
{
Depth = float.MaxValue,
Anchor = Anchor.CentreLeft,
Origin = Anchor.CentreLeft,
RelativeSizeAxes = Axes.Both,
Items = new[]
{
new MenuItem(CommonStrings.MenuBarFile)
{
Items = new OsuMenuItem[]
{
new EditorMenuItem(Web.CommonStrings.ButtonsSave, MenuItemType.Standard, () => Save()),
new EditorMenuItem(CommonStrings.Export, MenuItemType.Standard, () => skins.ExportCurrentSkin()) { Action = { Disabled = !RuntimeInfo.IsDesktop } },
new OsuMenuItemSpacer(),
new EditorMenuItem(CommonStrings.RevertToDefault, MenuItemType.Destructive, () => dialogOverlay?.Push(new RevertConfirmDialog(revert))),
new OsuMenuItemSpacer(),
new EditorMenuItem(CommonStrings.Exit, MenuItemType.Standard, () => skinEditorOverlay?.Hide()),
},
},
new MenuItem(CommonStrings.MenuBarEdit)
{
Items = new OsuMenuItem[]
{
undoMenuItem = new EditorMenuItem(CommonStrings.Undo, MenuItemType.Standard, Undo),
redoMenuItem = new EditorMenuItem(CommonStrings.Redo, MenuItemType.Standard, Redo),
new OsuMenuItemSpacer(),
cutMenuItem = new EditorMenuItem(CommonStrings.Cut, MenuItemType.Standard, Cut),
copyMenuItem = new EditorMenuItem(CommonStrings.Copy, MenuItemType.Standard, Copy),
pasteMenuItem = new EditorMenuItem(CommonStrings.Paste, MenuItemType.Standard, Paste),
cloneMenuItem = new EditorMenuItem(CommonStrings.Clone, MenuItemType.Standard, Clone),
}
},
}
},
settingsSidebar = new EditorSidebar(),
headerText = new OsuTextFlowContainer
{
TextAnchor = Anchor.TopRight,
Padding = new MarginPadding(5),
Anchor = Anchor.TopRight,
Origin = Anchor.TopRight,
AutoSizeAxes = Axes.X,
RelativeSizeAxes = Axes.Y,
},
},
},
},
new Drawable[]
{
new SkinEditorSceneLibrary
{
RelativeSizeAxes = Axes.X,
},
},
new Drawable[]
{
new GridContainer
{
RelativeSizeAxes = Axes.Both,
ColumnDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
new Dimension(),
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
new Drawable[]
{
componentsSidebar = new EditorSidebar(),
content = new Container
{
Depth = float.MaxValue,
RelativeSizeAxes = Axes.Both,
},
settingsSidebar = new EditorSidebar(),
}
}
}
}
},
},
}
}
}
};

View File

@ -9,6 +9,7 @@ using osu.Framework.Graphics.Containers;
using osu.Game.Configuration;
using osu.Game.Graphics;
using osu.Game.Localisation.HUD;
using osu.Game.Localisation.SkinComponents;
using osu.Game.Rulesets.Objects;
namespace osu.Game.Screens.Play.HUD
@ -29,6 +30,9 @@ namespace osu.Game.Screens.Play.HUD
[SettingSource(typeof(SongProgressStrings), nameof(SongProgressStrings.ShowTime), nameof(SongProgressStrings.ShowTimeDescription))]
public Bindable<bool> ShowTime { get; } = new BindableBool(true);
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
[Resolved]
private Player? player { get; set; }
@ -94,6 +98,7 @@ namespace osu.Game.Screens.Play.HUD
Interactive.BindValueChanged(_ => bar.Interactive = Interactive.Value, true);
ShowGraph.BindValueChanged(_ => updateGraphVisibility(), true);
ShowTime.BindValueChanged(_ => info.FadeTo(ShowTime.Value ? 1 : 0, 200, Easing.In), true);
AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
}
protected override void UpdateObjects(IEnumerable<HitObject> objects)

View File

@ -9,6 +9,7 @@ using osu.Framework.Graphics.Colour;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Game.Configuration;
using osu.Game.Localisation.SkinComponents;
using osu.Game.Skinning;
using osuTK;
@ -21,6 +22,9 @@ namespace osu.Game.Screens.Play.HUD
[SettingSource("Inverted shear")]
public BindableBool InvertShear { get; } = new BindableBool();
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
public BindableColour4 AccentColour { get; } = new BindableColour4(Color4Extensions.FromHex("#66CCFF"));
public ArgonWedgePiece()
{
CornerRadius = 10f;
@ -37,7 +41,6 @@ namespace osu.Game.Screens.Play.HUD
InternalChild = new Box
{
RelativeSizeAxes = Axes.Both,
Colour = ColourInfo.GradientVertical(Color4Extensions.FromHex("#66CCFF").Opacity(0.0f), Color4Extensions.FromHex("#66CCFF").Opacity(0.25f)),
};
}
@ -46,6 +49,7 @@ namespace osu.Game.Screens.Play.HUD
base.LoadComplete();
InvertShear.BindValueChanged(v => Shear = new Vector2(0.8f, 0f) * (v.NewValue ? -1 : 1), true);
AccentColour.BindValueChanged(c => InternalChild.Colour = ColourInfo.GradientVertical(AccentColour.Value.Opacity(0.0f), AccentColour.Value.Opacity(0.25f)), true);
}
}
}

View File

@ -10,6 +10,7 @@ using osu.Framework.Utils;
using osu.Game.Configuration;
using osu.Game.Graphics;
using osu.Game.Localisation.HUD;
using osu.Game.Localisation.SkinComponents;
using osu.Game.Rulesets.Objects;
using osuTK;
@ -36,6 +37,9 @@ namespace osu.Game.Screens.Play.HUD
[SettingSource(typeof(SongProgressStrings), nameof(SongProgressStrings.ShowTime), nameof(SongProgressStrings.ShowTimeDescription))]
public Bindable<bool> ShowTime { get; } = new BindableBool(true);
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
[Resolved]
private Player? player { get; set; }
@ -86,6 +90,7 @@ namespace osu.Game.Screens.Play.HUD
Interactive.BindValueChanged(_ => updateBarVisibility(), true);
ShowGraph.BindValueChanged(_ => updateGraphVisibility(), true);
ShowTime.BindValueChanged(_ => updateTimeVisibility(), true);
AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
base.LoadComplete();
}

View File

@ -123,6 +123,8 @@ namespace osu.Game.Skinning.Components
}
protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
}
// WARNING: DO NOT ADD ANY VALUES TO THIS ENUM ANYWHERE ELSE THAN AT THE END.

View File

@ -27,6 +27,9 @@ namespace osu.Game.Skinning.Components
Precision = 0.01f
};
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Colour), nameof(SkinnableComponentStrings.ColourDescription))]
public BindableColour4 AccentColour { get; } = new BindableColour4(Colour4.White);
public BoxElement()
{
Size = new Vector2(400, 80);
@ -43,6 +46,13 @@ namespace osu.Game.Skinning.Components
Masking = true;
}
protected override void LoadComplete()
{
base.LoadComplete();
AccentColour.BindValueChanged(_ => Colour = AccentColour.Value, true);
}
protected override void Update()
{
base.Update();

View File

@ -53,5 +53,7 @@ namespace osu.Game.Skinning.Components
}
protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
}
}

View File

@ -36,5 +36,7 @@ namespace osu.Game.Skinning.Components
}
protected override void SetFont(FontUsage font) => text.Font = font.With(size: 40);
protected override void SetTextColour(Colour4 textColour) => text.Colour = textColour;
}
}

View File

@ -2,6 +2,7 @@
// See the LICENCE file in the repository root for full licence text.
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Sprites;
using osu.Game.Configuration;
@ -20,11 +21,16 @@ namespace osu.Game.Skinning
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.Font), nameof(SkinnableComponentStrings.FontDescription))]
public Bindable<Typeface> Font { get; } = new Bindable<Typeface>(Typeface.Torus);
[SettingSource(typeof(SkinnableComponentStrings), nameof(SkinnableComponentStrings.TextColour), nameof(SkinnableComponentStrings.TextColourDescription))]
public BindableColour4 TextColour { get; } = new BindableColour4(Colour4.White);
/// <summary>
/// Implement to apply the user font selection to one or more components.
/// </summary>
protected abstract void SetFont(FontUsage font);
protected abstract void SetTextColour(Colour4 textColour);
protected override void LoadComplete()
{
base.LoadComplete();
@ -37,6 +43,8 @@ namespace osu.Game.Skinning
FontUsage f = OsuFont.GetFont(e.NewValue, weight: fontWeight);
SetFont(f);
}, true);
TextColour.BindValueChanged(e => SetTextColour(e.NewValue), true);
}
}
}