Add a way to set outline for text

[nicopap]

What problem does this solve or what need does it fill?

It is often useful to render text with an outline. Typical use case is for subtitle, it allows making the text readable independently of the background.

It is also useful in general for style.

Bevy doesn't expose any way to define a text outline, your best bet currently is to nest the text in a ui node with a semi-transparent background.

What solution would you like?

I'd like to be able to define text with outlines, both for UI and Text2d.

What alternative(s) have you considered?

Your best bet currently is to nest the text in a ui node with a semi-transparent background. It works, but may not fit the game's art style.

[nicopap]

Bevy uses ab_glyph for text rendering.

Bevy manages a HashMap<font_size, Vec<FontAtlas>>. It allocates a surface in an atlas (annoyingly, the atlas is RGBA, and only the alpha channel is used)

Whenever it encounters a new (character, size, font) combination, it writes to the atlas. (process_glyph -> add_glyph_to_atlas).

The glyph is first rendered to an Image with Font::get_outlined_glyph_texture(outlined_glyph) (there is a few steps to get outlined_glyph, the tldr is that it first computes each character's position and then calls ab_glyph::Font::outline_glyph to get an OutlinedGlyph).

Then the image is added to the atlas.

Font::get_outlined_glyph_texture(outlined_glyph) uses the OutlinedGlyph::draw method that just writes to a Vec<u8> buffer. It seems that OutlinedGlyph's shape is stored as a Outline, which is a Vec<OutlineCurve>. OutlineCurve is an enum that defines line shapes (quadratic bezier, cubic bezier and line). I'm not sure how ab_glyph goes from an outline to a full shape (the source is… not the most readable) but that's what it does.

[nicopap]

To generate outlines for fonts, I think taking that Outline and applying some algorithm to convert it into an outline of itself would work. The outline may be encoded in the font atlas or in the.

An alternative would be to apply a sobel/edge detection on the atlas glyph entry (but this may require a larger sized target) Would the result be stored in the same image, or should it be stored as a different entry?

Just rescaling the same sprite doesn't work, since it won't uniformly grow edges.

[nicopap]

I think the best way to handle this would be through a Jump Flood Algorithm. This is an algo to create outlines, but unlike the vertex extrusion method, it is possible to apply it to semi-transparent sprites. An implementation for bevy already exists at https://github.com/dataphract/bevy_jfa

In this context, this might fit better the scope of a 3rd party plugin than be part of bevy itself.

[thefakeplace]

Hey, also looking into this.

JFA is a cool idea. I am curious if it's well-suited to text (thin shapes) and CPU-driven rasterization-- which I figure ab_glyph is doing. I know from experience the FreeType stroker can sometimes create degenerate geometry that looks pretty terrible, so a pixel-based approach might be cool.

That being said other glyph rasterization libs in Rust support stroking out of the box, so maybe just contributing a traditional stroking algorithm to ab_glyph is the path of least resistance.

[ghmendonca]

This is a big thing for me! Hope this can be included in the next version

[gcx11]

I am working on a library that allows you to define text with an outline https://github.com/gcx11/bevy_swash

For now, it doesn't support multiple text styles and multiple text lines