 3f99a3e8cd
			
		
	
	
		3f99a3e8cd
		
			
		
	
	
	
	
		
			
			# Objective `Text2d` ignores `TextBounds` when calculating the offset for text aligment. On main a text entity positioned in the center of the window with center justification and 600px horizontal text bounds isn't centered like it should be but shifted off to the right: <img width="305" alt="hellox" src="https://github.com/user-attachments/assets/8896c6f0-1b9f-4633-9c12-1de6eff5f3e1" /> (second example in the testing section below) Fixes #14266 I already had a PR in review for this (#14270) but it used post layout adjustment (which we want to avoid) and ignored `TextBounds`. ## Solution * If `TextBounds` are present for an axis, use them instead of the size of the computed text layout size to calculate the offset. * Adjust the vertical offset of text so it's top is aligned with the top of the texts bounding rect (when present). ## Testing ``` use bevy::prelude::*; use bevy::color::palettes; use bevy::sprite::Anchor; use bevy::text::TextBounds; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .run(); } fn example(commands: &mut Commands, dest: Vec3, justify: JustifyText) { commands.spawn(( Sprite { color: palettes::css::YELLOW.into(), custom_size: Some(10. * Vec2::ONE), anchor: Anchor::Center, ..Default::default() }, Transform::from_translation(dest), )); for a in [ Anchor::TopLeft, Anchor::TopRight, Anchor::BottomRight, Anchor::BottomLeft, ] { commands.spawn(( Text2d(format!("L R\n{:?}\n{:?}", a, justify)), TextFont { font_size: 14.0, ..default() }, TextLayout { justify, ..Default::default() }, TextBounds::new(300., 75.), Transform::from_translation(dest + Vec3::Z), a, )); } } fn setup(mut commands: Commands) { commands.spawn(Camera2d::default()); for (i, j) in [ JustifyText::Left, JustifyText::Right, JustifyText::Center, JustifyText::Justified, ] .into_iter() .enumerate() { example(&mut commands, (300. - 150. * i as f32) * Vec3::Y, j); } commands.spawn(Sprite { color: palettes::css::YELLOW.into(), custom_size: Some(10. * Vec2::ONE), anchor: Anchor::Center, ..Default::default() }); } ``` <img width="566" alt="cap" src="https://github.com/user-attachments/assets/e6a98fa5-80b2-4380-a9b7-155bb49635b8" /> This probably looks really confusing but it should make sense if you imagine each block of text surrounded by a 300x75 rectangle that is anchored to the center of the yellow square. # ``` use bevy::prelude::*; use bevy::sprite::Anchor; use bevy::text::TextBounds; fn main() { App::new() .add_plugins(DefaultPlugins) .add_systems(Startup, setup) .run(); } fn setup(mut commands: Commands) { commands.spawn(Camera2d::default()); commands.spawn(( Text2d::new("hello"), TextFont { font_size: 60.0, ..default() }, TextLayout::new_with_justify(JustifyText::Center), TextBounds::new(600., 200.), Anchor::Center, )); } ``` <img width="338" alt="hello" src="https://github.com/user-attachments/assets/e5e89364-afda-4baa-aca8-df4cdacbb4ed" /> The text being above the center is intended. When `TextBounds` are present, the text block's offset is calculated using its `TextBounds` not the layout size returned by cosmic-text. # Probably we should add a vertical alignment setting for Text2d. Didn't do it here as this is intended for a 0.15.2 release.
		
			
				
	
	
		
			189 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			189 lines
		
	
	
		
			6.2 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
| //! Shows text rendering with moving, rotating and scaling text.
 | |
| //!
 | |
| //! Note that this uses [`Text2d`] to display text alongside your other entities in a 2D scene.
 | |
| //!
 | |
| //! For an example on how to render text as part of a user interface, independent from the world
 | |
| //! viewport, you may want to look at `games/contributors.rs` or `ui/text.rs`.
 | |
| 
 | |
| use bevy::{
 | |
|     color::palettes::css::*,
 | |
|     math::ops,
 | |
|     prelude::*,
 | |
|     sprite::Anchor,
 | |
|     text::{FontSmoothing, LineBreak, TextBounds},
 | |
| };
 | |
| 
 | |
| fn main() {
 | |
|     App::new()
 | |
|         .add_plugins(DefaultPlugins)
 | |
|         .add_systems(Startup, setup)
 | |
|         .add_systems(
 | |
|             Update,
 | |
|             (animate_translation, animate_rotation, animate_scale),
 | |
|         )
 | |
|         .run();
 | |
| }
 | |
| 
 | |
| #[derive(Component)]
 | |
| struct AnimateTranslation;
 | |
| 
 | |
| #[derive(Component)]
 | |
| struct AnimateRotation;
 | |
| 
 | |
| #[derive(Component)]
 | |
| struct AnimateScale;
 | |
| 
 | |
| fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 | |
|     let font = asset_server.load("fonts/FiraSans-Bold.ttf");
 | |
|     let text_font = TextFont {
 | |
|         font: font.clone(),
 | |
|         font_size: 50.0,
 | |
|         ..default()
 | |
|     };
 | |
|     let text_justification = JustifyText::Center;
 | |
|     // 2d camera
 | |
|     commands.spawn(Camera2d);
 | |
|     // Demonstrate changing translation
 | |
|     commands.spawn((
 | |
|         Text2d::new("translation"),
 | |
|         text_font.clone(),
 | |
|         TextLayout::new_with_justify(text_justification),
 | |
|         AnimateTranslation,
 | |
|     ));
 | |
|     // Demonstrate changing rotation
 | |
|     commands.spawn((
 | |
|         Text2d::new("rotation"),
 | |
|         text_font.clone(),
 | |
|         TextLayout::new_with_justify(text_justification),
 | |
|         AnimateRotation,
 | |
|     ));
 | |
|     // Demonstrate changing scale
 | |
|     commands.spawn((
 | |
|         Text2d::new("scale"),
 | |
|         text_font,
 | |
|         TextLayout::new_with_justify(text_justification),
 | |
|         Transform::from_translation(Vec3::new(400.0, 0.0, 0.0)),
 | |
|         AnimateScale,
 | |
|     ));
 | |
|     // Demonstrate text wrapping
 | |
|     let slightly_smaller_text_font = TextFont {
 | |
|         font,
 | |
|         font_size: 35.0,
 | |
|         ..default()
 | |
|     };
 | |
|     let box_size = Vec2::new(300.0, 200.0);
 | |
|     let box_position = Vec2::new(0.0, -250.0);
 | |
|     commands
 | |
|         .spawn((
 | |
|             Sprite::from_color(Color::srgb(0.25, 0.25, 0.75), box_size),
 | |
|             Transform::from_translation(box_position.extend(0.0)),
 | |
|         ))
 | |
|         .with_children(|builder| {
 | |
|             builder.spawn((
 | |
|                 Text2d::new("this text wraps in the box\n(Unicode linebreaks)"),
 | |
|                 slightly_smaller_text_font.clone(),
 | |
|                 TextLayout::new(JustifyText::Left, LineBreak::WordBoundary),
 | |
|                 // Wrap text in the rectangle
 | |
|                 TextBounds::from(box_size),
 | |
|                 // ensure the text is drawn on top of the box
 | |
|                 Transform::from_translation(Vec3::Z),
 | |
|             ));
 | |
|         });
 | |
| 
 | |
|     let other_box_size = Vec2::new(300.0, 200.0);
 | |
|     let other_box_position = Vec2::new(320.0, -250.0);
 | |
|     commands
 | |
|         .spawn((
 | |
|             Sprite::from_color(Color::srgb(0.20, 0.3, 0.70), other_box_size),
 | |
|             Transform::from_translation(other_box_position.extend(0.0)),
 | |
|         ))
 | |
|         .with_children(|builder| {
 | |
|             builder.spawn((
 | |
|                 Text2d::new("this text wraps in the box\n(AnyCharacter linebreaks)"),
 | |
|                 slightly_smaller_text_font.clone(),
 | |
|                 TextLayout::new(JustifyText::Left, LineBreak::AnyCharacter),
 | |
|                 // Wrap text in the rectangle
 | |
|                 TextBounds::from(other_box_size),
 | |
|                 // ensure the text is drawn on top of the box
 | |
|                 Transform::from_translation(Vec3::Z),
 | |
|             ));
 | |
|         });
 | |
| 
 | |
|     // Demonstrate font smoothing off
 | |
|     commands.spawn((
 | |
|         Text2d::new("This text has\nFontSmoothing::None\nAnd JustifyText::Center"),
 | |
|         slightly_smaller_text_font
 | |
|             .clone()
 | |
|             .with_font_smoothing(FontSmoothing::None),
 | |
|         TextLayout::new_with_justify(JustifyText::Center),
 | |
|         Transform::from_translation(Vec3::new(-400.0, -250.0, 0.0)),
 | |
|     ));
 | |
| 
 | |
|     commands
 | |
|         .spawn((
 | |
|             Sprite {
 | |
|                 color: Color::Srgba(LIGHT_CYAN),
 | |
|                 custom_size: Some(Vec2::new(10., 10.)),
 | |
|                 ..Default::default()
 | |
|             },
 | |
|             Transform::from_translation(250. * Vec3::Y),
 | |
|         ))
 | |
|         .with_children(|commands| {
 | |
|             for (text_anchor, color) in [
 | |
|                 (Anchor::TopLeft, Color::Srgba(RED)),
 | |
|                 (Anchor::TopRight, Color::Srgba(LIME)),
 | |
|                 (Anchor::BottomRight, Color::Srgba(BLUE)),
 | |
|                 (Anchor::BottomLeft, Color::Srgba(YELLOW)),
 | |
|             ] {
 | |
|                 commands
 | |
|                     .spawn((
 | |
|                         Text2d::new(" Anchor".to_string()),
 | |
|                         slightly_smaller_text_font.clone(),
 | |
|                         text_anchor,
 | |
|                     ))
 | |
|                     .with_child((
 | |
|                         TextSpan("::".to_string()),
 | |
|                         slightly_smaller_text_font.clone(),
 | |
|                         TextColor(LIGHT_GREY.into()),
 | |
|                     ))
 | |
|                     .with_child((
 | |
|                         TextSpan(format!("{text_anchor:?} ")),
 | |
|                         slightly_smaller_text_font.clone(),
 | |
|                         TextColor(color),
 | |
|                     ));
 | |
|             }
 | |
|         });
 | |
| }
 | |
| 
 | |
| fn animate_translation(
 | |
|     time: Res<Time>,
 | |
|     mut query: Query<&mut Transform, (With<Text2d>, With<AnimateTranslation>)>,
 | |
| ) {
 | |
|     for mut transform in &mut query {
 | |
|         transform.translation.x = 100.0 * ops::sin(time.elapsed_secs()) - 400.0;
 | |
|         transform.translation.y = 100.0 * ops::cos(time.elapsed_secs());
 | |
|     }
 | |
| }
 | |
| 
 | |
| fn animate_rotation(
 | |
|     time: Res<Time>,
 | |
|     mut query: Query<&mut Transform, (With<Text2d>, With<AnimateRotation>)>,
 | |
| ) {
 | |
|     for mut transform in &mut query {
 | |
|         transform.rotation = Quat::from_rotation_z(ops::cos(time.elapsed_secs()));
 | |
|     }
 | |
| }
 | |
| 
 | |
| fn animate_scale(
 | |
|     time: Res<Time>,
 | |
|     mut query: Query<&mut Transform, (With<Text2d>, With<AnimateScale>)>,
 | |
| ) {
 | |
|     // Consider changing font-size instead of scaling the transform. Scaling a Text2D will scale the
 | |
|     // rendered quad, resulting in a pixellated look.
 | |
|     for mut transform in &mut query {
 | |
|         let scale = (ops::sin(time.elapsed_secs()) + 1.1) * 2.0;
 | |
|         transform.scale.x = scale;
 | |
|         transform.scale.y = scale;
 | |
|     }
 | |
| }
 |