Skip to content

Commit b3c63a3

Browse files
JoehuuJoehuu
committed
Simplify border edge effect
- No more border gradient (probably same as ppy#22237 (comment)) - No more radius 50 which is maybe a performance issue
1 parent 300bcc8 commit b3c63a3

File tree

3 files changed

+26
-92
lines changed

3 files changed

+26
-92
lines changed

‎osu.Game/Screens/Select/Carousel/CarouselHeader.cs

+9-78
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,27 @@
77
using osu.Framework.Bindables;
88
using osu.Framework.Extensions.Color4Extensions;
99
using osu.Framework.Graphics;
10-
using osu.Framework.Graphics.Colour;
1110
using osu.Framework.Graphics.Containers;
12-
using osu.Framework.Graphics.Effects;
1311
using osu.Framework.Graphics.Shapes;
1412
using osu.Framework.Input.Events;
1513
using osu.Framework.Utils;
1614
using osu.Game.Graphics;
1715
using osu.Game.Graphics.UserInterface;
1816
using osuTK;
19-
using osuTK.Graphics;
2017

2118
namespace osu.Game.Screens.Select.Carousel
2219
{
2320
public partial class CarouselHeader : Container
2421
{
2522
public Container AlphaContainer;
2623
public Container EffectContainer;
27-
public Container BorderContainer;
2824

2925
public readonly Bindable<CarouselItemState> State = new Bindable<CarouselItemState>(CarouselItemState.NotSelected);
3026
public static readonly Vector2 SHEAR = new Vector2(0.15f, 0);
3127

3228
protected override Container<Drawable> Content { get; } = new Container { RelativeSizeAxes = Axes.Both };
3329

34-
public bool HasCustomBorder;
35-
3630
private const float corner_radius = 10;
37-
private const float border_thickness = 2;
3831

3932
public CarouselHeader()
4033
{
@@ -45,83 +38,21 @@ public CarouselHeader()
4538
InternalChild = AlphaContainer = new Container
4639
{
4740
RelativeSizeAxes = Axes.Both,
48-
Children = new Drawable[]
41+
Child = EffectContainer = new Container
4942
{
50-
EffectContainer = new Container
51-
{
52-
RelativeSizeAxes = Axes.Both,
53-
Masking = true,
54-
CornerRadius = corner_radius,
55-
Children = new Drawable[]
56-
{
57-
Content,
58-
new HoverLayer(),
59-
new HeaderSounds(),
60-
}
61-
},
62-
BorderContainer = new Container
43+
RelativeSizeAxes = Axes.Both,
44+
Masking = true,
45+
CornerRadius = corner_radius,
46+
Children = new Drawable[]
6347
{
64-
RelativeSizeAxes = Axes.Both,
65-
Masking = true,
66-
CornerRadius = corner_radius,
67-
BorderColour = ColourInfo.GradientHorizontal(Colour4.White, Colour4.White.Opacity(0)),
68-
Child = new Box
69-
{
70-
RelativeSizeAxes = Axes.Both,
71-
Colour = Colour4.Transparent,
72-
}
73-
},
48+
Content,
49+
new HoverLayer(),
50+
new HeaderSounds(),
51+
}
7452
},
7553
};
7654
}
7755

78-
protected override void LoadComplete()
79-
{
80-
base.LoadComplete();
81-
82-
State.BindValueChanged(updateState, true);
83-
}
84-
85-
private void updateState(ValueChangedEvent<CarouselItemState> state)
86-
{
87-
switch (state.NewValue)
88-
{
89-
case CarouselItemState.Collapsed:
90-
case CarouselItemState.NotSelected:
91-
BorderContainer.BorderThickness = 0;
92-
EffectContainer.EdgeEffect = new EdgeEffectParameters
93-
{
94-
Type = EdgeEffectType.Shadow,
95-
Offset = new Vector2(1),
96-
Radius = 10,
97-
Colour = Color4.Black.Opacity(100),
98-
};
99-
100-
BorderContainer.EdgeEffect = new EdgeEffectParameters();
101-
break;
102-
103-
case CarouselItemState.Selected:
104-
if (HasCustomBorder) return;
105-
106-
BorderContainer.BorderThickness = border_thickness;
107-
EffectContainer.EdgeEffect = new EdgeEffectParameters
108-
{
109-
Type = EdgeEffectType.Shadow,
110-
Colour = Color4Extensions.FromHex(@"4EBFFF").Opacity(0.5f),
111-
Radius = 50,
112-
};
113-
114-
BorderContainer.EdgeEffect = new EdgeEffectParameters
115-
{
116-
Type = EdgeEffectType.Shadow,
117-
Colour = Color4Extensions.FromHex(@"4EBFFF").Opacity(0.5f),
118-
Radius = 15,
119-
Hollow = true,
120-
};
121-
break;
122-
}
123-
}
124-
12556
public partial class HoverLayer : CompositeDrawable
12657
{
12758
private Box box = null!;

‎osu.Game/Screens/Select/Carousel/DrawableCarouselBeatmap.cs

-12
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,6 @@ public DrawableCarouselBeatmap(CarouselBeatmap panel)
101101
private void load(BeatmapManager? manager, SongSelect? songSelect)
102102
{
103103
Header.Height = height;
104-
Header.HasCustomBorder = true;
105-
Header.BorderContainer.EdgeEffect = new EdgeEffectParameters();
106104

107105
if (songSelect != null)
108106
{
@@ -262,8 +260,6 @@ protected override void Deselected()
262260
Colour = Colour4.Black.Opacity(100),
263261
};
264262

265-
Header.BorderContainer.EdgeEffect = new EdgeEffectParameters();
266-
267263
colourBox.RelativeSizeAxes = Axes.Y;
268264
colourBox.Width = colour_box_width + corner_radius;
269265
}
@@ -310,18 +306,10 @@ protected override void ApplyState()
310306

311307
// We want to update the EdgeEffect here instead of in selected() to make sure the colours are correct
312308
Header.EffectContainer.EdgeEffect = new EdgeEffectParameters
313-
{
314-
Type = EdgeEffectType.Shadow,
315-
Colour = starCounter.Colour.MultiplyAlpha(0.5f),
316-
Radius = 50
317-
};
318-
319-
Header.BorderContainer.EdgeEffect = new EdgeEffectParameters
320309
{
321310
Type = EdgeEffectType.Shadow,
322311
Colour = starCounter.Colour.MultiplyAlpha(0.5f),
323312
Radius = 10,
324-
Hollow = true,
325313
};
326314
});
327315

‎osu.Game/Screens/Select/Carousel/DrawableCarouselBeatmapSet.cs

+17-2
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88
using System.Threading;
99
using System.Threading.Tasks;
1010
using osu.Framework.Allocation;
11+
using osu.Framework.Extensions.Color4Extensions;
1112
using osu.Framework.Extensions.IEnumerableExtensions;
1213
using osu.Framework.Graphics;
1314
using osu.Framework.Graphics.Containers;
1415
using osu.Framework.Graphics.Cursor;
16+
using osu.Framework.Graphics.Effects;
1517
using osu.Framework.Graphics.Shapes;
1618
using osu.Framework.Graphics.Sprites;
1719
using osu.Framework.Graphics.Primitives;
@@ -165,13 +167,25 @@ private void updateSelectionState()
165167

166168
var state = Item?.State.Value;
167169

170+
backgroundContainer.Height = state == CarouselItemState.Selected ? HEIGHT - 4 : HEIGHT;
171+
168172
// TODO: implement colour sampling of beatmap background for colour box and offset this by 10, hide for now
169173
backgroundContainer.MoveToX(state == CarouselItemState.Selected ? colour_box_width_expanded : 0, duration, Easing.OutQuint);
170174
mainFlow.MoveToX(state == CarouselItemState.Selected ? colour_box_width_expanded : 0, duration, Easing.OutQuint);
171175

176+
colourBox.RelativeSizeAxes = state == CarouselItemState.Selected ? Axes.Both : Axes.Y;
177+
colourBox.Width = state == CarouselItemState.Selected ? 1 : colour_box_width_expanded + corner_radius;
172178
colourBox.FadeTo(state == CarouselItemState.Selected ? 1 : 0, duration, Easing.OutQuint);
179+
173180
rightArrow.FadeTo(state == CarouselItemState.Selected ? 1 : 0, duration, Easing.OutQuint);
174181
backgroundPlaceholder.FadeTo(state == CarouselItemState.Selected ? 1 : 0, duration, Easing.OutQuint);
182+
183+
Header.EffectContainer.EdgeEffect = new EdgeEffectParameters
184+
{
185+
Type = EdgeEffectType.Shadow,
186+
Colour = state == CarouselItemState.Selected ? Color4Extensions.FromHex(@"4EBFFF").Opacity(0.5f) : Colour4.Black.Opacity(100),
187+
Radius = state == CarouselItemState.Selected ? 15 : 10,
188+
};
175189
}
176190

177191
private void updateBeatmapDifficulties()
@@ -253,7 +267,6 @@ private void loadContentIfRequired()
253267
{
254268
colourBox = new Box
255269
{
256-
Width = colour_box_width_expanded + corner_radius,
257270
RelativeSizeAxes = Axes.Y,
258271
Alpha = 0,
259272
EdgeSmoothness = new Vector2(2, 0),
@@ -262,8 +275,10 @@ private void loadContentIfRequired()
262275
{
263276
Masking = true,
264277
CornerRadius = corner_radius,
265-
RelativeSizeAxes = Axes.Both,
278+
RelativeSizeAxes = Axes.X,
266279
MaskingSmoothness = 2,
280+
Anchor = Anchor.CentreLeft,
281+
Origin = Anchor.CentreLeft,
267282
Children = new Drawable[]
268283
{
269284
backgroundPlaceholder = new Box

0 commit comments

Comments
 (0)