[bevy_text] Enable shifting text position within a Text component

[zmbush]

Objective

• Make it possible to shift the position of text within Text to enable, for example, animations.

Solution

• Add a Vec2 named offset to TextSection, which is added to the position of each glyph after the text layout.

Testing

• Did some manual testing, I have been using this change in an in-development game for several weeks with good results.
• Added usage of this feature to the ui/text example

text-animation-example.mp4

---

Changelog

Added

• offset field to TextSection that will be added to the position of each glyph.

Migration Guide

• TextSection now contains the field offset (defaults to Vec2(0.0, 0.0)), which may cause previously exhaustively specified TextSections to fail to compile.

[github-actions]

Welcome, new contributor!

Please make sure you've read our contributing guide and we look forward to reviewing your pull request shortly ✨

[alice-i-cecile]

Neat! I'm going to hold off on this until #10193 is merged: that should be mergeable soon and will interact with this.

[mockersf]

how does different text sections interact when they have offsets? how does it interact with general layout?

[zmbush]

how does different text sections interact when they have offsets? how does it interact with general layout?

The intention was that they would not interact at all, since the offsets would be added after typesetting inside of pipelime.rs. The idea was to enable text animations like the wavy text in Night in the Woods.

So you could use offsets to break the text outside of the text or UI layout

[zmbush]

I re-made this change on top of #10193. Looks like the implementation will be even simpler!

TotalKrill/bevy@cosmic-text...zmbush:text-offset-cosmic

I also added a usage example to the ui/text example

Recording.2024-07-03.164506.mp4

[zmbush]

@alice-i-cecile I have rebased this on top of the committed cosmic-text PR.

[ickshonpe]

This works fine and the implementation is simple enough but it's no good I think. Having an offset field per TextSection limits the sine wave example to one glpyh per TextSection. I would rather have the offsets stored per glyph if we go this way.

But ideally you don't want to retain the offsets at all. Better alternatives are to either write a custom extraction function that calculates each glyph's position from its index and the elapsed time. Or make a system like the text_wave_system in the example but rather than indirectly manipulating the positions using an offset field, just update the glyph positions stored in the TextLayoutInfo component directly.