From 86b12a384b4244bf14ae93ea19f3cd3cf13d6207 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Sat, 7 Mar 2020 12:51:11 +0900 Subject: [PATCH] Initial pass of gameplay screen design update --- .../TestSceneDrawableTournamentTeam.cs | 3 +- .../Screens/TestSceneGameplayScreen.cs | 11 +++ .../Gameplay/Components/MatchHeader.cs | 39 +++++---- .../Gameplay/Components/RoundDisplay.cs | 37 +-------- .../Gameplay/Components/TeamDisplay.cs | 73 ++++++++++++----- .../Screens/Gameplay/Components/TeamScore.cs | 81 +++++++++++++++++-- .../Screens/Gameplay/GameplayScreen.cs | 32 +------- 7 files changed, 170 insertions(+), 106 deletions(-) diff --git a/osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentTeam.cs b/osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentTeam.cs index 41f7d3d847..01edcb66e4 100644 --- a/osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentTeam.cs +++ b/osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentTeam.cs @@ -3,6 +3,7 @@ using System; using System.Collections.Generic; +using osu.Framework.Bindables; using osu.Framework.Graphics; using osu.Game.Tests.Visual; using osu.Game.Tournament.Components; @@ -113,7 +114,7 @@ namespace osu.Game.Tournament.Tests.Components Cell(i).AddRange(new Drawable[] { new TournamentSpriteText { Text = "TeamDisplay" }, - new TeamDisplay(team, TournamentGame.COLOUR_RED, false) + new TeamDisplay(team, TeamColour.Red, new Bindable(2), 6) { Anchor = Anchor.Centre, Origin = Anchor.Centre, diff --git a/osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs b/osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs index 9de00818a5..964930a8de 100644 --- a/osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs +++ b/osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs @@ -1,9 +1,12 @@ // Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. // See the LICENCE file in the repository root for full licence text. +using System; +using System.Collections.Generic; using osu.Framework.Allocation; using osu.Game.Tournament.Components; using osu.Game.Tournament.Screens.Gameplay; +using osu.Game.Tournament.Screens.Gameplay.Components; namespace osu.Game.Tournament.Tests.Screens { @@ -12,6 +15,14 @@ namespace osu.Game.Tournament.Tests.Screens [Cached] private TournamentMatchChatDisplay chat = new TournamentMatchChatDisplay(); + public override IReadOnlyList RequiredTypes => new[] + { + typeof(TeamScore), + typeof(TeamScoreDisplay), + typeof(TeamDisplay), + typeof(MatchHeader), + }; + [BackgroundDependencyLoader] private void load() { diff --git a/osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs b/osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs index c86132a802..45f46c462a 100644 --- a/osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs +++ b/osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs @@ -6,8 +6,9 @@ using osu.Framework.Bindables; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Framework.Input.Events; +using osu.Game.Tournament.Components; using osu.Game.Tournament.Models; -using osu.Game.Tournament.Screens.Showcase; +using osuTK; using osuTK.Input; namespace osu.Game.Tournament.Screens.Gameplay.Components @@ -21,13 +22,28 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components Height = 95; Children = new Drawable[] { - new TournamentLogo(), - new RoundDisplay + new FillFlowContainer { - Y = 5, - Anchor = Anchor.BottomCentre, - Origin = Anchor.TopCentre, + RelativeSizeAxes = Axes.Both, + Direction = FillDirection.Vertical, + Spacing = new Vector2(5), + Children = new Drawable[] + { + new DrawableTournamentTitleText + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + Scale = new Vector2(1.2f) + }, + new RoundDisplay + { + Anchor = Anchor.Centre, + Origin = Anchor.Centre, + Scale = new Vector2(0.4f) + }, + } }, + new TeamScoreDisplay(TeamColour.Red) { Anchor = Anchor.TopLeft, @@ -55,7 +71,7 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components this.teamColour = teamColour; RelativeSizeAxes = Axes.Y; - Width = 300; + AutoSizeAxes = Axes.X; } [BackgroundDependencyLoader] @@ -98,16 +114,9 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components private void teamChanged(TournamentTeam team) { - var colour = teamColour == TeamColour.Red ? TournamentGame.COLOUR_RED : TournamentGame.COLOUR_BLUE; - var flip = teamColour == TeamColour.Red; - InternalChildren = new Drawable[] { - new TeamDisplay(team, colour, flip), - new TeamScore(currentTeamScore, flip, currentMatch.Value.PointsToWin) - { - Colour = colour - } + new TeamDisplay(team, teamColour, currentTeamScore, currentMatch.Value.PointsToWin), }; } } diff --git a/osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs b/osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs index 5322cf9a76..c8b0d3bdda 100644 --- a/osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs +++ b/osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs @@ -3,46 +3,15 @@ using osu.Framework.Allocation; using osu.Framework.Bindables; -using osu.Framework.Graphics; -using osu.Framework.Graphics.Containers; -using osu.Framework.Graphics.Shapes; -using osu.Game.Graphics; +using osu.Game.Tournament.Components; using osu.Game.Tournament.Models; -using osuTK.Graphics; namespace osu.Game.Tournament.Screens.Gameplay.Components { - public class RoundDisplay : CompositeDrawable + public class RoundDisplay : TournamentSpriteTextWithBackground { private readonly Bindable currentMatch = new Bindable(); - private readonly TournamentSpriteText text; - - public RoundDisplay() - { - Width = 200; - Height = 20; - - Masking = true; - CornerRadius = 10; - - InternalChildren = new Drawable[] - { - new Box - { - Colour = OsuColour.Gray(0.18f), - RelativeSizeAxes = Axes.Both, - }, - text = new TournamentSpriteText - { - Anchor = Anchor.Centre, - Origin = Anchor.Centre, - Colour = Color4.White, - Font = OsuFont.Torus.With(weight: FontWeight.Regular, size: 16), - }, - }; - } - [BackgroundDependencyLoader] private void load(LadderInfo ladder) { @@ -51,6 +20,6 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components } private void matchChanged(ValueChangedEvent match) => - text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round"; + Text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round"; } } diff --git a/osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs b/osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs index 891435c48e..4bfeb2bc81 100644 --- a/osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs +++ b/osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs @@ -1,47 +1,84 @@ // Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. // 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.Game.Graphics; using osu.Game.Tournament.Components; using osu.Game.Tournament.Models; using osuTK; -using osuTK.Graphics; namespace osu.Game.Tournament.Screens.Gameplay.Components { public class TeamDisplay : DrawableTournamentTeam { - public TeamDisplay(TournamentTeam team, Color4 colour, bool flip) + public TeamDisplay(TournamentTeam team, TeamColour colour, Bindable currentTeamScore, int pointsToWin) : base(team) { - RelativeSizeAxes = Axes.Both; + AutoSizeAxes = Axes.Both; - var anchor = flip ? Anchor.CentreRight : Anchor.CentreLeft; + bool flip = colour == TeamColour.Red; - Anchor = Origin = anchor; + var anchor = flip ? Anchor.TopLeft : Anchor.TopRight; - Flag.Anchor = Flag.Origin = anchor; Flag.RelativeSizeAxes = Axes.None; Flag.Size = new Vector2(60, 40); - Flag.Margin = new MarginPadding(20); + Flag.Origin = anchor; + Flag.Anchor = anchor; + + Margin = new MarginPadding(20); InternalChild = new Container { - RelativeSizeAxes = Axes.Both, + AutoSizeAxes = Axes.Both, Children = new Drawable[] { - Flag, - new TournamentSpriteText + new FillFlowContainer { - Text = team?.FullName.Value.ToUpper() ?? "???", - X = (flip ? -1 : 1) * 90, - Y = -10, - Colour = colour, - Font = OsuFont.Torus.With(weight: FontWeight.Regular, size: 20), - Origin = anchor, - Anchor = anchor, + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5), + Children = new Drawable[] + { + Flag, + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Vertical, + Origin = anchor, + Anchor = anchor, + Spacing = new Vector2(5), + Children = new Drawable[] + { + new FillFlowContainer + { + AutoSizeAxes = Axes.Both, + Direction = FillDirection.Horizontal, + Spacing = new Vector2(5), + Children = new Drawable[] + { + new DrawableTeamHeader(colour) + { + Scale = new Vector2(0.75f), + Origin = anchor, + Anchor = anchor, + }, + new TeamScore(currentTeamScore, colour, pointsToWin) + { + Origin = anchor, + Anchor = anchor, + } + } + }, + new TournamentSpriteTextWithBackground(team?.FullName.Value ?? "???") + { + Scale = new Vector2(0.5f), + Origin = anchor, + Anchor = anchor, + }, + } + }, + } }, } }; diff --git a/osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs b/osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs index 608d98a16a..056f8387fb 100644 --- a/osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs +++ b/osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs @@ -2,10 +2,16 @@ // See the LICENCE file in the repository root for full licence text. using osu.Framework.Bindables; +using osu.Framework.Extensions.Color4Extensions; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Effects; +using osu.Framework.Graphics.Shapes; +using osu.Game.Graphics; using osu.Game.Graphics.UserInterface; +using osu.Game.Tournament.Models; using osuTK; +using osuTK.Graphics; namespace osu.Game.Tournament.Screens.Gameplay.Components { @@ -14,18 +20,16 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components private readonly Bindable currentTeamScore = new Bindable(); private readonly StarCounter counter; - public TeamScore(Bindable score, bool flip, int count) + public TeamScore(Bindable score, TeamColour colour, int count) { - var anchor = flip ? Anchor.CentreRight : Anchor.CentreLeft; + bool flip = colour == TeamColour.Blue; + var anchor = flip ? Anchor.TopRight : Anchor.TopLeft; - Anchor = anchor; - Origin = anchor; + AutoSizeAxes = Axes.Both; - InternalChild = counter = new StarCounter(count) + InternalChild = counter = new TeamScoreStarCounter(count) { Anchor = anchor, - X = (flip ? -1 : 1) * 90, - Y = 5, Scale = flip ? new Vector2(-1, 1) : Vector2.One, }; @@ -33,6 +37,67 @@ namespace osu.Game.Tournament.Screens.Gameplay.Components currentTeamScore.BindTo(score); } - private void scoreChanged(ValueChangedEvent score) => counter.CountStars = score.NewValue ?? 0; + private void scoreChanged(ValueChangedEvent score) => counter.Current = score.NewValue ?? 0; + + public class TeamScoreStarCounter : StarCounter + { + public TeamScoreStarCounter(int count) + : base(count) + { + } + + public override Star CreateStar() => new LightSquare(); + + public class LightSquare : Star + { + private Box box; + + public LightSquare() + { + Size = new Vector2(22.5f); + + InternalChildren = new Drawable[] + { + new Container + { + RelativeSizeAxes = Axes.Both, + Masking = true, + BorderColour = OsuColour.Gray(0.5f), + BorderThickness = 3, + Children = new Drawable[] + { + new Box + { + Colour = Color4.Transparent, + RelativeSizeAxes = Axes.Both, + AlwaysPresent = true, + }, + } + }, + box = new Box + { + Colour = OsuColour.FromHex("#FFE8AD"), + RelativeSizeAxes = Axes.Both, + }, + }; + + Masking = true; + EdgeEffect = new EdgeEffectParameters + { + Type = EdgeEffectType.Glow, + Colour = OsuColour.FromHex("#FFE8AD").Opacity(0.1f), + Hollow = true, + Radius = 20, + Roundness = 10, + }; + } + + public override void DisplayAt(float scale) + { + box.FadeTo(scale, 500, Easing.OutQuint); + FadeEdgeEffectTo(0.2f * scale, 500, Easing.OutQuint); + } + } + } } } diff --git a/osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs b/osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs index 6ba57c60b8..df3ca59f1f 100644 --- a/osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs +++ b/osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs @@ -30,9 +30,6 @@ namespace osu.Game.Tournament.Screens.Gameplay private OsuButton warmupButton; private MatchIPCInfo ipc; - private readonly Color4 red = new Color4(186, 0, 18, 255); - private readonly Color4 blue = new Color4(17, 136, 170, 255); - [Resolved(canBeNull: true)] private TournamentSceneManager sceneManager { get; set; } @@ -66,36 +63,11 @@ namespace osu.Game.Tournament.Screens.Gameplay // chroma key area for stable gameplay Name = "chroma", RelativeSizeAxes = Axes.X, + Anchor = Anchor.TopCentre, + Origin = Anchor.TopCentre, Height = 512, Colour = new Color4(0, 255, 0, 255), }, - new Container - { - RelativeSizeAxes = Axes.X, - AutoSizeAxes = Axes.Y, - Y = -4, - Children = new Drawable[] - { - new Circle - { - Name = "top bar red", - RelativeSizeAxes = Axes.X, - Height = 8, - Width = 0.5f, - Colour = red, - }, - new Circle - { - Name = "top bar blue", - RelativeSizeAxes = Axes.X, - Height = 8, - Width = 0.5f, - Colour = blue, - Anchor = Anchor.TopRight, - Origin = Anchor.TopRight, - }, - } - }, } }, scoreDisplay = new MatchScoreDisplay