Text2d TextBackgroundColor support (#20464)

# Objective

Add support for `TextBackgroundColor` to `Text2d`.

## Solution

Add a `TextBackgroundColor` query to `extract_text2d_sprite` and queue a
background sprite for each text section with a `TextBackgroundColor`.

## Testing

Added `TextBackgroundColor`s to some of the text in the `text2d`
example:

```cargo run --example text2d```

---

## Showcase

<img width="1924" height="1127" alt="text2d-background" src="https://github.com/user-attachments/assets/faa64dbe-cf80-4aca-b749-d24bb4399db3" />

Author: ickshonpe

crates/bevy_text/src/text2d.rs

@@ -4,6 +4,7 @@ use crate::{
     TextError, TextFont, TextLayout, TextLayoutInfo, TextPipeline, TextReader, TextRoot,
     TextSpanAccess, TextWriter,
 };
+
 use bevy_asset::Assets;
 use bevy_camera::primitives::Aabb;
 use bevy_camera::visibility::{self, NoFrustumCulling, Visibility, VisibilityClass};

crates/bevy_ui_render/src/text2d.rs

@@ -1,4 +1,4 @@
-use bevy_asset::Assets;
+use bevy_asset::{AssetId, Assets};
 use bevy_camera::visibility::ViewVisibility;
 use bevy_color::LinearRgba;
 use bevy_ecs::{
@@ -11,9 +11,12 @@ use bevy_math::Vec2;
 use bevy_render::sync_world::TemporaryRenderEntity;
 use bevy_render::Extract;
 use bevy_sprite::Anchor;
-use bevy_sprite_render::{ExtractedSlice, ExtractedSlices, ExtractedSprite, ExtractedSprites};
+use bevy_sprite_render::{
+    ExtractedSlice, ExtractedSlices, ExtractedSprite, ExtractedSpriteKind, ExtractedSprites,
+};
 use bevy_text::{
-    ComputedTextBlock, PositionedGlyph, Text2dShadow, TextBounds, TextColor, TextLayoutInfo,
+    ComputedTextBlock, PositionedGlyph, Text2dShadow, TextBackgroundColor, TextBounds, TextColor,
+    TextLayoutInfo,
 };
 use bevy_transform::prelude::GlobalTransform;
 use bevy_window::{PrimaryWindow, Window};
@@ -39,6 +42,7 @@ pub fn extract_text2d_sprite(
         )>,
     >,
     text_colors: Extract<Query<&TextColor>>,
+    text_background_colors_query: Extract<Query<&TextBackgroundColor>>,
 ) {
     let mut start = extracted_slices.slices.len();
     let mut end = start + 1;
@@ -72,6 +76,33 @@ pub fn extract_text2d_sprite(
 
         let top_left = (Anchor::TOP_LEFT.0 - anchor.as_vec()) * size;
 
+        for &(section_entity, rect) in text_layout_info.section_rects.iter() {
+            let Ok(text_background_color) = text_background_colors_query.get(section_entity) else {
+                continue;
+            };
+            let render_entity = commands.spawn(TemporaryRenderEntity).id();
+            let offset = Vec2::new(rect.center().x, -rect.center().y);
+            let transform = *global_transform
+                * GlobalTransform::from_translation(top_left.extend(0.))
+                * scaling
+                * GlobalTransform::from_translation(offset.extend(0.));
+            extracted_sprites.sprites.push(ExtractedSprite {
+                main_entity,
+                render_entity,
+                transform,
+                color: text_background_color.0.into(),
+                image_handle_id: AssetId::default(),
+                flip_x: false,
+                flip_y: false,
+                kind: ExtractedSpriteKind::Single {
+                    anchor: Vec2::ZERO,
+                    rect: None,
+                    scaling_mode: None,
+                    custom_size: Some(rect.size()),
+                },
+            });
+        }
+
         if let Some(shadow) = maybe_shadow {
             let shadow_transform = *global_transform
                 * GlobalTransform::from_translation((top_left + shadow.offset).extend(0.))
@@ -112,7 +143,7 @@ pub fn extract_text2d_sprite(
                         image_handle_id: atlas_info.texture,
                         flip_x: false,
                         flip_y: false,
-                        kind: bevy_sprite_render::ExtractedSpriteKind::Slices {
+                        kind: ExtractedSpriteKind::Slices {
                             indices: start..end,
                         },
                     });
@@ -174,7 +205,7 @@ pub fn extract_text2d_sprite(
                     image_handle_id: atlas_info.texture,
                     flip_x: false,
                     flip_y: false,
-                    kind: bevy_sprite_render::ExtractedSpriteKind::Slices {
+                    kind: ExtractedSpriteKind::Slices {
                         indices: start..end,
                     },
                 });

examples/2d/text2d.rs

@@ -44,26 +44,29 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     commands.spawn(Camera2d);
     // Demonstrate changing translation
     commands.spawn((
-        Text2d::new("translation"),
+        Text2d::new(" translation "),
         text_font.clone(),
         TextLayout::new_with_justify(text_justification),
+        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
         Text2dShadow::default(),
         AnimateTranslation,
     ));
     // Demonstrate changing rotation
     commands.spawn((
-        Text2d::new("rotation"),
+        Text2d::new(" rotation "),
         text_font.clone(),
         TextLayout::new_with_justify(text_justification),
+        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
         Text2dShadow::default(),
         AnimateRotation,
     ));
     // Demonstrate changing scale
     commands.spawn((
-        Text2d::new("scale"),
+        Text2d::new(" scale "),
         text_font,
         TextLayout::new_with_justify(text_justification),
         Transform::from_translation(Vec3::new(400.0, 0.0, 0.0)),
+        TextBackgroundColor(Color::BLACK.with_alpha(0.5)),
         Text2dShadow::default(),
         AnimateScale,
     ));
@@ -150,16 +153,20 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         Text2d::new(" Anchor".to_string()),
                         slightly_smaller_text_font.clone(),
                         text_anchor,
+                        TextBackgroundColor(Color::WHITE.darker(0.8)),
+                        Transform::from_translation(-1. * Vec3::Z),
                     ))
                     .with_child((
                         TextSpan("::".to_string()),
                         slightly_smaller_text_font.clone(),
                         TextColor(LIGHT_GREY.into()),
+                        TextBackgroundColor(DARK_BLUE.into()),
                     ))
                     .with_child((
                         TextSpan(format!("{text_anchor:?} ")),
                         slightly_smaller_text_font.clone(),
                         TextColor(color),
+                        TextBackgroundColor(color.darker(0.3)),
                     ));
             }
         });

release-content/release-notes/text2d_textbackgroundcolor.md

@@ -0,0 +1,9 @@
+---
+title: `TextBackgroundColor` support for `Text2d`
+authors: ["@ickshonpe"]
+pull_requests: [20464]
+---
+
+`Text2d` now supports the `TextBackgroundColor` component.
+
+Add a `TextBackgroundColor` to `Text2d` entity or its child `TextSection` entities to draw a background color for that section of text.