h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-01-06 09:42:55 +08:00
Code Issues Releases Wiki Activity

Initial pass of gameplay screen design update

Browse Source
This commit is contained in:
Dean Herbert 2020-03-07 12:51:11 +09:00
parent 66e54ba983
commit 86b12a384b
7 changed files with 170 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
osu.Game.Tournament.Tests/Components/TestSceneDrawableTournamentTeam.cs
View File

@ -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<int?>(2), 6)
{
Anchor = Anchor.Centre,
Origin = Anchor.Centre,

11
osu.Game.Tournament.Tests/Screens/TestSceneGameplayScreen.cs
View File

@ -1,9 +1,12 @@
// 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 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<Type> RequiredTypes => new[]
{
typeof(TeamScore),
typeof(TeamScoreDisplay),
typeof(TeamDisplay),
typeof(MatchHeader),
};
[BackgroundDependencyLoader]
private void load()
{

39
osu.Game.Tournament/Screens/Gameplay/Components/MatchHeader.cs
View File

@ -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),
};
}
}

37
osu.Game.Tournament/Screens/Gameplay/Components/RoundDisplay.cs
View File

@ -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<TournamentMatch> currentMatch = new Bindable<TournamentMatch>();
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<TournamentMatch> match) =>
text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round";
Text.Text = match.NewValue.Round.Value?.Name.Value ?? "Unknown Round";
}
}

73
osu.Game.Tournament/Screens/Gameplay/Components/TeamDisplay.cs
View File

@ -1,47 +1,84 @@
// 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.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<int?> 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,
},
}
},
}
},
}
};

81
osu.Game.Tournament/Screens/Gameplay/Components/TeamScore.cs
View File

@ -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<int?> currentTeamScore = new Bindable<int?>();
private readonly StarCounter counter;
public TeamScore(Bindable<int?> score, bool flip, int count)
public TeamScore(Bindable<int?> 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<int?> score) => counter.CountStars = score.NewValue ?? 0;
private void scoreChanged(ValueChangedEvent<int?> 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);
}
}
}
}
}

32
osu.Game.Tournament/Screens/Gameplay/GameplayScreen.cs
View File

@ -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