Fix pixellation of volume meter progress bars

osu.Game.Tests/Visual/TestCaseVolumePieces.cs

@@ -5,6 +5,7 @@ using System;
 using System.Collections.Generic;
 using osu.Framework.Graphics;
 using osu.Game.Overlays.Volume;
+using OpenTK;
 using OpenTK.Graphics;
 
 namespace osu.Game.Tests.Visual
@@ -17,13 +18,21 @@ namespace osu.Game.Tests.Visual
         {
             VolumeMeter meter;
             MuteButton mute;
-            Add(meter = new VolumeMeter("MASTER", 125, Color4.Blue));
+            Add(meter = new VolumeMeter("MASTER", 125, Color4.Blue) { Position = new Vector2(10) });
+            AddSliderStep("master volume", 0, 10, 0, i => meter.Bindable.Value = i * 0.1);
+
+            Add(new VolumeMeter("BIG", 250, Color4.Red)
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Position = new Vector2(10),
+            });
+
             Add(mute = new MuteButton
             {
                 Margin = new MarginPadding { Top = 200 }
             });
 
-            AddSliderStep("master volume", 0, 10, 0, i => meter.Bindable.Value = i * 0.1);
             AddToggleStep("mute", b => mute.Current.Value = b);
         }
     }

osu.Game/Overlays/Volume/VolumeMeter.cs

@@ -24,6 +24,8 @@ namespace osu.Game.Overlays.Volume
     public class VolumeMeter : Container, IKeyBindingHandler<GlobalAction>
     {
         private CircularProgress volumeCircle;
+        private CircularProgress volumeCircleGlow;
+
         public BindableDouble Bindable { get; } = new BindableDouble { MinValue = 0, MaxValue = 1 };
         private readonly float circleSize;
         private readonly Color4 meterColour;
@@ -44,75 +46,97 @@ namespace osu.Game.Overlays.Volume
         [BackgroundDependencyLoader]
         private void load(OsuColour colours)
         {
-            Add(new Container
+            Color4 backgroundColour = colours.Gray1;
-            {
-                Size = new Vector2(120, 20),
-                CornerRadius = 10,
-                Masking = true,
-                Margin = new MarginPadding { Left = circleSize + 10 },
-                Origin = Anchor.CentreLeft,
-                Anchor = Anchor.CentreLeft,
-                Children = new Drawable[]
-                {
-                    new Box
-                    {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = colours.Gray1,
-                        Alpha = 0.9f,
-                    },
-                    new OsuSpriteText
-                    {
-                        Anchor = Anchor.Centre,
-                        Origin = Anchor.Centre,
-                        Font = "Exo2.0-Bold",
-                        Text = name
-                    }
-                }
-            });
 
             CircularProgress bgProgress;
 
-            Add(new CircularContainer
+            const float progress_start_radius = 0.75f;
+            const float progress_size = 0.03f;
+            const float progress_end_radius = progress_start_radius + progress_size;
+
+            const float blur_amount = 5;
+
+            Children = new Drawable[]
+            {
+                new Container
                 {
-                Masking = true,
                     Size = new Vector2(circleSize),
                     Children = new Drawable[]
                     {
-                    new Box
+                        new BufferedContainer
                         {
-                        RelativeSizeAxes = Axes.Both,
-                        Colour = colours.Gray1,
                             Alpha = 0.9f,
-                    },
+                            RelativeSizeAxes = Axes.Both,
-                    bgProgress = new CircularProgress
+                            Children = new Drawable[]
+                            {
+                                new Circle
                                 {
                                     RelativeSizeAxes = Axes.Both,
-                        InnerRadius = 0.05f,
+                                    Colour = backgroundColour,
-                        Rotation = 180,
+                                },
+                                new CircularContainer
+                                {
+                                    Masking = true,
                                     Anchor = Anchor.Centre,
                                     Origin = Anchor.Centre,
-                        Colour = colours.Gray2,
+                                    RelativeSizeAxes = Axes.Both,
-                        Size = new Vector2(0.8f)
+                                    Size = new Vector2(progress_end_radius),
+                                    Children = new Drawable[]
+                                    {
+                                        bgProgress = new CircularProgress
+                                        {
+                                            Anchor = Anchor.Centre,
+                                            Origin = Anchor.Centre,
+                                            RelativeSizeAxes = Axes.Both,
+                                            Rotation = 180,
+                                            Colour = backgroundColour,
                                         },
                                         new Container
                                         {
                                             Anchor = Anchor.Centre,
                                             Origin = Anchor.Centre,
+                                            Name = "Progress under covers for smoothing",
                                             RelativeSizeAxes = Axes.Both,
-                        Size = new Vector2(0.8f),
-                        Padding = new MarginPadding(-Blur.KernelSize(5)),
                                             Rotation = 180,
-                        Child = (volumeCircle = new CircularProgress
+                                            Child = volumeCircle = new CircularProgress
                                             {
                                                 RelativeSizeAxes = Axes.Both,
-                            InnerRadius = 0.05f,
+                                            }
+                                        },
+                                    }
+                                },
+                                new Circle
+                                {
+                                    Name = "Inner Cover",
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    RelativeSizeAxes = Axes.Both,
+                                    Colour = backgroundColour,
+                                    Size = new Vector2(progress_start_radius),
+                                },
+                                new Container
+                                {
+                                    Name = "Progress overlay for glow",
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    RelativeSizeAxes = Axes.Both,
+                                    Size = new Vector2(progress_start_radius + progress_size / 1.5f),
+                                    Rotation = 180,
+                                    Padding = new MarginPadding(-Blur.KernelSize(blur_amount)),
+                                    Child = (volumeCircleGlow = new CircularProgress
+                                    {
+                                        RelativeSizeAxes = Axes.Both,
+                                        InnerRadius = progress_size * 0.8f,
                                     }).WithEffect(new GlowEffect
                                     {
                                         Colour = meterColour,
-                            Strength = 2,
+                                        BlurSigma = new Vector2(blur_amount),
+                                        Strength = 5,
                                         PadExtent = true
                                     }),
                                 },
+                            },
+                        },
                         maxGlow = (text = new OsuSpriteText
                         {
                             Anchor = Anchor.Centre,
@@ -125,9 +149,40 @@ namespace osu.Game.Overlays.Volume
                             PadExtent = true,
                         })
                     }
-            });
+                },
-
+                new Container
-            Bindable.ValueChanged += newVolume => { this.TransformTo("DisplayVolume", newVolume, 400, Easing.OutQuint); };
+                {
+                    Size = new Vector2(120, 20),
+                    CornerRadius = 10,
+                    Masking = true,
+                    Margin = new MarginPadding { Left = circleSize + 10 },
+                    Origin = Anchor.CentreLeft,
+                    Anchor = Anchor.CentreLeft,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            Alpha = 0.9f,
+                            RelativeSizeAxes = Axes.Both,
+                            Colour = backgroundColour,
+                        },
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Font = "Exo2.0-Bold",
+                            Text = name
+                        }
+                    }
+                }
+            };
+            Bindable.ValueChanged += newVolume =>
+            {
+                this.TransformTo("DisplayVolume",
+                    newVolume,
+                    400,
+                    Easing.OutQuint);
+            };
             bgProgress.Current.Value = 0.75f;
         }
 
@@ -158,6 +213,7 @@ namespace osu.Game.Overlays.Volume
                 }
 
                 volumeCircle.Current.Value = displayVolume * 0.75f;
+                volumeCircleGlow.Current.Value = displayVolume * 0.75f;
             }
         }