bevy/examples/2d/text2d.rs
ickshonpe 3f99a3e8cd
Text 2d alignment fix (#17365)
# 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.
2025-01-20 20:54:32 +00:00

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