mirror of
https://github.com/bevyengine/bevy
synced 2024-11-10 07:04:33 +00:00
166686e0f2
# Objective The name `TextAlignment` is really deceptive and almost every new user gets confused about the differences between aligning text with `TextAlignment`, aligning text with `Style` and aligning text with anchor (when using `Text2d`). ## Solution * Rename `TextAlignment` to `JustifyText`. The associated helper methods are also renamed. * Improve the doc comments for text explaining explicitly how the `JustifyText` component affects the arrangement of text. * Add some extra cases to the `text_debug` example that demonstate the differences between alignment using `JustifyText` and alignment using `Style`. <img width="757" alt="text_debug_2" src="https://github.com/bevyengine/bevy/assets/27962798/9d53e647-93f9-4bc7-8a20-0d9f783304d2"> --- ## Changelog * `TextAlignment` has been renamed to `JustifyText` * `TextBundle::with_text_alignment` has been renamed to `TextBundle::with_text_justify` * `Text::with_alignment` has been renamed to `Text::with_justify` * The `text_alignment` field of `TextMeasureInfo` has been renamed to `justification` ## Migration Guide * `TextAlignment` has been renamed to `JustifyText` * `TextBundle::with_text_alignment` has been renamed to `TextBundle::with_text_justify` * `Text::with_alignment` has been renamed to `Text::with_justify` * The `text_alignment` field of `TextMeasureInfo` has been renamed to `justification`
196 lines
6.3 KiB
Rust
196 lines
6.3 KiB
Rust
//! Shows text rendering with moving, rotating and scaling text.
|
|
//!
|
|
//! Note that this uses [`Text2dBundle`] 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::{
|
|
prelude::*,
|
|
sprite::Anchor,
|
|
text::{BreakLineOn, Text2dBounds},
|
|
};
|
|
|
|
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_style = TextStyle {
|
|
font: font.clone(),
|
|
font_size: 60.0,
|
|
color: Color::WHITE,
|
|
};
|
|
let text_justification = JustifyText::Center;
|
|
// 2d camera
|
|
commands.spawn(Camera2dBundle::default());
|
|
// Demonstrate changing translation
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("translation", text_style.clone())
|
|
.with_justify(text_justification),
|
|
..default()
|
|
},
|
|
AnimateTranslation,
|
|
));
|
|
// Demonstrate changing rotation
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("rotation", text_style.clone())
|
|
.with_justify(text_justification),
|
|
..default()
|
|
},
|
|
AnimateRotation,
|
|
));
|
|
// Demonstrate changing scale
|
|
commands.spawn((
|
|
Text2dBundle {
|
|
text: Text::from_section("scale", text_style).with_justify(text_justification),
|
|
..default()
|
|
},
|
|
AnimateScale,
|
|
));
|
|
// Demonstrate text wrapping
|
|
let slightly_smaller_text_style = TextStyle {
|
|
font,
|
|
font_size: 42.0,
|
|
color: Color::WHITE,
|
|
};
|
|
let box_size = Vec2::new(300.0, 200.0);
|
|
let box_position = Vec2::new(0.0, -250.0);
|
|
commands
|
|
.spawn(SpriteBundle {
|
|
sprite: Sprite {
|
|
color: Color::rgb(0.25, 0.25, 0.75),
|
|
custom_size: Some(Vec2::new(box_size.x, box_size.y)),
|
|
..default()
|
|
},
|
|
transform: Transform::from_translation(box_position.extend(0.0)),
|
|
..default()
|
|
})
|
|
.with_children(|builder| {
|
|
builder.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
"this text wraps in the box\n(Unicode linebreaks)",
|
|
slightly_smaller_text_style.clone(),
|
|
)],
|
|
justify: JustifyText::Left,
|
|
linebreak_behavior: BreakLineOn::WordBoundary,
|
|
},
|
|
text_2d_bounds: Text2dBounds {
|
|
// Wrap text in the rectangle
|
|
size: box_size,
|
|
},
|
|
// ensure the text is drawn on top of the box
|
|
transform: Transform::from_translation(Vec3::Z),
|
|
..default()
|
|
});
|
|
});
|
|
|
|
let other_box_size = Vec2::new(300.0, 200.0);
|
|
let other_box_position = Vec2::new(320.0, -250.0);
|
|
commands
|
|
.spawn(SpriteBundle {
|
|
sprite: Sprite {
|
|
color: Color::rgb(0.20, 0.3, 0.70),
|
|
custom_size: Some(Vec2::new(other_box_size.x, other_box_size.y)),
|
|
..default()
|
|
},
|
|
transform: Transform::from_translation(other_box_position.extend(0.0)),
|
|
..default()
|
|
})
|
|
.with_children(|builder| {
|
|
builder.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
"this text wraps in the box\n(AnyCharacter linebreaks)",
|
|
slightly_smaller_text_style.clone(),
|
|
)],
|
|
justify: JustifyText::Left,
|
|
linebreak_behavior: BreakLineOn::AnyCharacter,
|
|
},
|
|
text_2d_bounds: Text2dBounds {
|
|
// Wrap text in the rectangle
|
|
size: other_box_size,
|
|
},
|
|
// ensure the text is drawn on top of the box
|
|
transform: Transform::from_translation(Vec3::Z),
|
|
..default()
|
|
});
|
|
});
|
|
|
|
for (text_anchor, color) in [
|
|
(Anchor::TopLeft, Color::RED),
|
|
(Anchor::TopRight, Color::GREEN),
|
|
(Anchor::BottomRight, Color::BLUE),
|
|
(Anchor::BottomLeft, Color::YELLOW),
|
|
] {
|
|
commands.spawn(Text2dBundle {
|
|
text: Text {
|
|
sections: vec![TextSection::new(
|
|
format!(" Anchor::{text_anchor:?} "),
|
|
TextStyle {
|
|
color,
|
|
..slightly_smaller_text_style.clone()
|
|
},
|
|
)],
|
|
..Default::default()
|
|
},
|
|
transform: Transform::from_translation(250. * Vec3::Y),
|
|
text_anchor,
|
|
..default()
|
|
});
|
|
}
|
|
}
|
|
|
|
fn animate_translation(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, With<AnimateTranslation>)>,
|
|
) {
|
|
for mut transform in &mut query {
|
|
transform.translation.x = 100.0 * time.elapsed_seconds().sin() - 400.0;
|
|
transform.translation.y = 100.0 * time.elapsed_seconds().cos();
|
|
}
|
|
}
|
|
|
|
fn animate_rotation(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, With<AnimateRotation>)>,
|
|
) {
|
|
for mut transform in &mut query {
|
|
transform.rotation = Quat::from_rotation_z(time.elapsed_seconds().cos());
|
|
}
|
|
}
|
|
|
|
fn animate_scale(
|
|
time: Res<Time>,
|
|
mut query: Query<&mut Transform, (With<Text>, 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 {
|
|
transform.translation = Vec3::new(400.0, 0.0, 0.0);
|
|
|
|
let scale = (time.elapsed_seconds().sin() + 1.1) * 2.0;
|
|
transform.scale.x = scale;
|
|
transform.scale.y = scale;
|
|
}
|
|
}
|