feat: added outline support for TextBlock

[ourabigdev]

PR Details

Summary

Added support for text outlines in TextBlock with two new properties:

• OutlineColor: (Color) Specifies the color of the outline.
• OutlineThickness: (float) Determines the thickness of the outline.

When OutlineThickness is set to 0 or OutlineColor is null, the text will render normally without any outline.

Related Issue

Fixes #2581

Changes

• Introduced OutlineColor and OutlineThickness properties in the TextBlock class.
• Updated text rendering logic to apply an outline when these properties are configured.
• added them in the appearance section in TextBlock settings section in the editor

Types of Changes

• Docs update/refactoring/dependency upgrade
• Bug fix (non-breaking change)
• New feature (non-breaking change)
• Breaking change (modifies existing functionality)

Checklist

• Documentation changes required.
• Documentation updated.
• Verified all existing tests pass.
• Built and tested in the editor.

Additional Notes

• This change does not break existing functionality.
• Supports both default and custom font rendering workflows.

[Eideren]

Thanks for the contribution ! This should be good for rasterized fonts, SDF could be a lot faster by changing the font shader instead, where the outline is just another sample of the sdf texture with a higher cutoff.

[Eideren]

This array could be stackalloc'ated instead or replace the loop below with a loop going fromx -1 -> +1 and an inner one y -1 -> +1.
Improves perfs and reduce GC hit.

[ourabigdev]

Thanks for the suggestion I will try to work on that tomorrow

[ourabigdev]

so i changed the code to

• use nested loops instead of a Vector2 array
• the code a lot cleaner and easier to read
• Old: Pre-calculated array of positions
• New: Calculated on-the-fly using nested loops

[ourabigdev]

it's true that changing the font shader would be more accurate and i guess faster my current knowledge base still didn't reach that level but i am improving i might work on it on future but this feature could be as a placeholder until i or someone else implement a better solution i am learning more about ui rendering and i might practice sometimes or even contribute to stride ui since it does need some features

[bj-rn]

changing the font shader instead

Are you refering to SignedDistanceFieldFont.sdsl? Because it seems to already support outlines.

[ourabigdev]

i found an issue i will try to find a fix for it but any suggestion is good the issue is that the outline thickness should not exced

Text Size / 10

if it exceed that number it get's broken like in this video

2024-12-26.12-00-01.mp4

[ourabigdev]

i found an issue i will try to find a fix for it but any suggestion is good the issue is that the outline thickness should not exced

Text Size / 10

if it exceed that number it get's broken like in this video

2024-12-26.12-00-01.mp4

a possible fix that i found is having a max outline thickness variable that limit the outline thickness to the text size /10 after some research i found this potentiel problem i guess it could be fixed using shaders but i am not good at shaders :
outline's thickness grows too large compared to the glyph size, the shader might attempt to sample areas outside the effective range of the SDF, resulting in incorrect rendering

[Eideren]

This is expected behavior when doing anything with a kernel pattern like so. The explanation you found is unrelated to the problem at hand; the limitations of an sdf outline would show as a filled up quad behind the character being outlined, while yours shows up as a gap between each kernel copies as the offset grows larger.

One way to fix your issue is to increase the size of your kernel based on the width, cost would increase exponentially though, best keep it like so for rasterized fonts and push users towards using an sdf one instead.

@bj-rn yes, although the shader used for the font passes in a constant for the border variables, so one would need to create a new one reading from some other vertex attribute to set the border color and width

[ourabigdev]

This is expected behavior when doing anything with a kernel pattern like so. The explanation you found is unrelated to the problem at hand; the limitations of an sdf outline would show as a filled up quad behind the character being outlined, while yours shows up as a gap between each kernel copies as the offset grows larger.

One way to fix your issue is to increase the size of your kernel based on the width, cost would increase exponentially though, best keep it like so for rasterized fonts and push users towards using an sdf one instead.

@bj-rn yes, although the shader used for the font passes in a constant for the border variables, so one would need to create a new one reading from some other vertex attribute to set the border color and width

so i just need to leave it like that how can i push users to use sdf font should it be added to documentation or inside the editor also what about the idea of limiting the outline thickness to text size / 10 and is this code i wrote worthy to be merged if not i am not complaining i am just learning also thanks for the review and the suggestions sorry for asking a lot of question

[Eideren]

Oh, yeah, no, that's on me !
Limiting doesn't seem worth it given that the issue depends on the style of the font and given character, rounder fonts would still work with larger outlines, while very sharp and thin ones may show a gap with the smallest outline width.
I can merge this in and you could open an issue about improving outlines for SDF fonts linking to this discussion if you're not confident to tackle it yet, just let me know

[ourabigdev]

Oh, yeah, no, that's on me ! Limiting doesn't seem worth it given that the issue depends on the style of the font and given character, rounder fonts would still work with larger outlines, while very sharp and thin ones may show a gap with the smallest outline width. I can merge this in and you could open an issue about improving outlines for SDF fonts linking to this discussion if you're not confident to tackle it yet, just let me know

hmm i think what could be possible is to merge this so that people can try it have more opinion and yes i am still learning more things so it's better to wait and i will open an issue like you said for the sdf font linking the outline is usable now i have used it in my current project so i will try to learn more about ui rendering and shaders and see how can i improve it more

so i opened an issue for this problem here #2584 so that i can work on it in future or someone can help

[Eideren]

Thanks !

[ourabigdev]

Thanks !

no problem, this is my biggest contribution i learned a lot and i love how good and easy to work with stride rendering api since the engine is made using c# it's easier for me to work with than something made in c++ so thanks for keeping this engine alive i will gain more knowledge and maybe focus and work more on improving ui rendering and features in stride i just need time to learn thanks