Add outline to sprite text.

osu.Framework.Font.Tests/Resources/Shaders/sh_Outline.fs

@@ -0,0 +1,21 @@
+varying mediump vec2 v_TexCoord;
+uniform lowp sampler2D m_Sampler;
+uniform float g_outlineRadius;
+uniform vec4 g_outlineColour;
+
+void main(void)
+{
+	vec4 col = texture2D(m_Sampler, v_TexCoord);
+	if (col.a > 0.5)
+		gl_FragColor = col;
+	else {
+		float a = texture2D(m_Sampler, vec2(v_TexCoord.x + g_outlineRadius, v_TexCoord.y)).a +
+			texture2D(m_Sampler, vec2(v_TexCoord.x, v_TexCoord.y - g_outlineRadius)).a +
+			texture2D(m_Sampler, vec2(v_TexCoord.x - g_outlineRadius, v_TexCoord.y)).a +
+			texture2D(m_Sampler, vec2(v_TexCoord.x, v_TexCoord.y + g_outlineRadius)).a;
+		if (col.a < 1.0 && a > 0.0)
+			gl_FragColor = g_outlineColour;
+		else
+			gl_FragColor = col;
+	}
+}

osu.Framework.Font.Tests/Visual/Sprites/TestSceneKarakeSpriteText.cs

@@ -116,8 +116,11 @@ private Drawable createCustomizeTimeTagKaroakeText(Dictionary<TimeTagIndex, doub
                 },
                 Shadow = true,
                 ShadowOffset = new Vector2(3),
-                FrontTextShadowTexture = new SolidTexture { SolidColor = Color4.Green },
+                Outline = true,
+                OutlineRadius = 3f,
                 FrontTextTexture = new SolidTexture { SolidColor = Color4.LightBlue },
+                FrontBorderTexture = new SolidTexture { SolidColor = Color4.White },
+                FrontTextShadowTexture = new SolidTexture { SolidColor = Color4.Green },
                 BackTextShadowTexture = new SolidTexture { SolidColor = Color4.Red },
             };
         }

osu.Framework.Font.Tests/Visual/Sprites/TestSceneLyricSpriteText.cs

@@ -131,8 +131,11 @@ private LyricSpriteText createLyricSpriteText(string text, List<PositionText> ru
                 Margin = new MarginPadding(30),
                 Shadow = true,
                 ShadowOffset = new Vector2(3),
+                Outline = true,
+                OutlineRadius = 3f,
+                TextTexture = new SolidTexture { SolidColor = Color4.Blue },
                 ShadowTexture = new SolidTexture { SolidColor = Color4.Red },
-                TextTexture = new SolidTexture { SolidColor = Color4.White }
+                BorderTexture = new SolidTexture { SolidColor = Color4.White }
             };
         }
     }

osu.Framework.Font.Tests/osu.Framework.Font.Tests.csproj

@@ -18,4 +18,7 @@
   <ItemGroup>
     <ProjectReference Include="..\osu.Framework.Font\osu.Framework.Font.csproj" />
   </ItemGroup>
+  <ItemGroup Label="Resources">
+    <EmbeddedResource Include="Resources\**\*.*" />
+  </ItemGroup>
 </Project>

osu.Framework.Font/Graphics/Sprites/KarokeSpriteText.cs

@@ -262,23 +262,23 @@ public LyricTextAlignment RomajiAlignment
             }
         }
 
-        public float BorderRadius
+        public bool Outline
         {
-            get => frontLyricText.BorderRadius;
+            get => frontLyricText.Outline;
             set
             {
-                frontLyricText.BorderRadius = value;
-                backLyricText.BorderRadius = value;
+                frontLyricText.Outline = value;
+                backLyricText.Outline = value;
             }
         }
 
-        public bool Border
+        public float OutlineRadius
         {
-            get => frontLyricText.Border;
+            get => frontLyricText.OutlineRadius;
             set
             {
-                frontLyricText.Border = value;
-                backLyricText.Border = value;
+                frontLyricText.OutlineRadius = value;
+                backLyricText.OutlineRadius = value;
             }
         }
 

osu.Framework.Font/Graphics/Sprites/LyricSpriteText.cs

@@ -10,7 +10,7 @@
 
 namespace osu.Framework.Graphics.Sprites
 {
-    public class LyricSpriteText : SpriteText
+    public class LyricSpriteText : StyledSpriteText
     {
         public LyricSpriteText()
         {
@@ -124,6 +124,8 @@ public Vector2 RubySpacing
             }
         }
 
+        protected Vector2 CalculatedRubySpacing => Outline ? RubySpacing + new Vector2(OutlineRadius) : RubySpacing;
+
         private Vector2 romajiSpacing;
 
         public Vector2 RomajiSpacing
@@ -139,6 +141,8 @@ public Vector2 RomajiSpacing
             }
         }
 
+        protected Vector2 CalculatedRomajiSpacing => Outline ? RomajiSpacing + new Vector2(OutlineRadius) : RomajiSpacing;
+
         private ILyricTexture textTexture;
 
         public ILyricTexture TextTexture
@@ -182,6 +186,7 @@ public ILyricTexture BorderTexture
                     return;
 
                 borderTexture = value;
+                OutlineColour = (borderTexture as SolidTexture)?.SolidColor ?? Color4.White;
                 Invalidate(Invalidation.All);
             }
         }
@@ -216,36 +221,6 @@ public LyricTextAlignment RomajiAlignment
             }
         }
 
-        private float borderRadius;
-
-        public float BorderRadius
-        {
-            get => borderRadius;
-            set
-            {
-                if (borderRadius == value)
-                    return;
-
-                borderRadius = value;
-                Invalidate(Invalidation.All);
-            }
-        }
-
-        private bool border;
-
-        public bool Border
-        {
-            get => border;
-            set
-            {
-                if (border == value)
-                    return;
-
-                border = value;
-                Invalidate(Invalidation.All);
-            }
-        }
-
         public new Vector2 ShadowOffset
         {
             get => base.ShadowOffset * Font.Size;
@@ -256,7 +231,7 @@ public bool Border
         protected TextBuilderGlyph[] Characters;
 
         /// <summary>
-        /// Creates a <see cref="TextBuilder"/> to generate the character layout for this <see cref="SpriteText"/>.
+        /// Creates a <see cref="TextBuilder"/> to generate the character layout for this <see cref="StyledSpriteText"/>.
         /// </summary>
         /// <param name="store">The <see cref="ITexturedGlyphLookupStore"/> where characters should be retrieved from.</param>
         /// <returns>The <see cref="TextBuilder"/>.</returns>
@@ -271,20 +246,20 @@ protected override TextBuilder CreateTextBuilder(ITexturedGlyphLookupStore store
             var contentPosition = rubyYPosition + RubyFont.Size / 2 + RubyMargin;
 
             // Print and save main texts
-            var charactersBacking = createMainTexts(Text,Font, contentPosition, Spacing);
+            var charactersBacking = createMainTexts(Text,Font, contentPosition, CalculatedSpacing);
             Characters = charactersBacking.ToArray();
 
             // Print ruby texts
-            createTexts(Rubies, RubyFont, rubyYPosition, RubySpacing);
+            createTexts(Rubies, RubyFont, rubyYPosition, CalculatedRubySpacing);
 
             // Calculate position and print romaji texts
             var romajiYPosition = contentPosition + Characters.FirstOrDefault().Height + Characters.FirstOrDefault().YOffset + RomajiMargin;
-            createTexts(Romajies, RomajiFont, romajiYPosition, RomajiSpacing);
+            createTexts(Romajies, RomajiFont, romajiYPosition, CalculatedRomajiSpacing);
 
             // Calculate position and return TextBuilder that do not renderer text anymore
             var romajiTextSize = RomajiMargin + ((Romajies?.Any() ?? false) ? (charactersBacking.LastOrDefault().Height + charactersBacking.LastOrDefault().YOffset) : 0);
             return new TextBuilder(store, Font, builder_max_width, UseFullGlyphHeight,
-                new Vector2(Padding.Left, contentPosition + romajiTextSize), Spacing, null,
+                new Vector2(Padding.Left, contentPosition + romajiTextSize), CalculatedSpacing, null,
                 excludeCharacters, FallbackCharacter);
 
             // Create main text