
# 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;
|
|
}
|
|
}
|