9eefd7c022
# Objective Remove the `VerticalAlign` enum. Text's alignment field should only affect the text's internal text alignment, not its position. The only way to control a `TextBundle`'s position and bounds should be through the manipulation of the constraints in the `Style` components of the nodes in the Bevy UI's layout tree. `Text2dBundle` should have a separate `Anchor` component that sets its position relative to its transform. Related issues: #676, #1490, #5502, #5513, #5834, #6717, #6724, #6741, #6748 ## Changelog * Changed `TextAlignment` into an enum with `Left`, `Center`, and `Right` variants. * Removed the `HorizontalAlign` and `VerticalAlign` types. * Added an `Anchor` component to `Text2dBundle` * Added `Component` derive to `Anchor` * Use `f32::INFINITY` instead of `f32::MAX` to represent unbounded text in Text2dBounds ## Migration Guide The `alignment` field of `Text` now only affects the text's internal alignment. ### Change `TextAlignment` to TextAlignment` which is now an enum. Replace: * `TextAlignment::TOP_LEFT`, `TextAlignment::CENTER_LEFT`, `TextAlignment::BOTTOM_LEFT` with `TextAlignment::Left` * `TextAlignment::TOP_CENTER`, `TextAlignment::CENTER_LEFT`, `TextAlignment::BOTTOM_CENTER` with `TextAlignment::Center` * `TextAlignment::TOP_RIGHT`, `TextAlignment::CENTER_RIGHT`, `TextAlignment::BOTTOM_RIGHT` with `TextAlignment::Right` ### Changes for `Text2dBundle` `Text2dBundle` has a new field 'text_anchor' that takes an `Anchor` component that controls its position relative to its transform.
103 lines
3.4 KiB
Rust
103 lines
3.4 KiB
Rust
//! This example illustrates how to create UI text and update it in a system.
|
|
//!
|
|
//! It displays the current FPS in the top left corner, as well as text that changes color
|
|
//! in the bottom right. For text within a scene, please see the text2d example.
|
|
|
|
use bevy::{
|
|
diagnostic::{Diagnostics, FrameTimeDiagnosticsPlugin},
|
|
prelude::*,
|
|
};
|
|
|
|
fn main() {
|
|
App::new()
|
|
.add_plugins(DefaultPlugins)
|
|
.add_plugin(FrameTimeDiagnosticsPlugin::default())
|
|
.add_startup_system(setup)
|
|
.add_system(text_update_system)
|
|
.add_system(text_color_system)
|
|
.run();
|
|
}
|
|
|
|
// A unit struct to help identify the FPS UI component, since there may be many Text components
|
|
#[derive(Component)]
|
|
struct FpsText;
|
|
|
|
// A unit struct to help identify the color-changing Text component
|
|
#[derive(Component)]
|
|
struct ColorText;
|
|
|
|
fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|
// UI camera
|
|
commands.spawn(Camera2dBundle::default());
|
|
// Text with one section
|
|
commands.spawn((
|
|
// Create a TextBundle that has a Text with a single section.
|
|
TextBundle::from_section(
|
|
// Accepts a `String` or any type that converts into a `String`, such as `&str`
|
|
"hello\nbevy!",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 100.0,
|
|
color: Color::WHITE,
|
|
},
|
|
) // Set the alignment of the Text
|
|
.with_text_alignment(TextAlignment::Center)
|
|
// Set the style of the TextBundle itself.
|
|
.with_style(Style {
|
|
position_type: PositionType::Absolute,
|
|
position: UiRect {
|
|
bottom: Val::Px(5.0),
|
|
right: Val::Px(15.0),
|
|
..default()
|
|
},
|
|
..default()
|
|
}),
|
|
ColorText,
|
|
));
|
|
// Text with multiple sections
|
|
commands.spawn((
|
|
// Create a TextBundle that has a Text with a list of sections.
|
|
TextBundle::from_sections([
|
|
TextSection::new(
|
|
"FPS: ",
|
|
TextStyle {
|
|
font: asset_server.load("fonts/FiraSans-Bold.ttf"),
|
|
font_size: 60.0,
|
|
color: Color::WHITE,
|
|
},
|
|
),
|
|
TextSection::from_style(TextStyle {
|
|
font: asset_server.load("fonts/FiraMono-Medium.ttf"),
|
|
font_size: 60.0,
|
|
color: Color::GOLD,
|
|
}),
|
|
]),
|
|
FpsText,
|
|
));
|
|
}
|
|
|
|
fn text_color_system(time: Res<Time>, mut query: Query<&mut Text, With<ColorText>>) {
|
|
for mut text in &mut query {
|
|
let seconds = time.elapsed_seconds();
|
|
|
|
// Update the color of the first and only section.
|
|
text.sections[0].style.color = Color::Rgba {
|
|
red: (1.25 * seconds).sin() / 2.0 + 0.5,
|
|
green: (0.75 * seconds).sin() / 2.0 + 0.5,
|
|
blue: (0.50 * seconds).sin() / 2.0 + 0.5,
|
|
alpha: 1.0,
|
|
};
|
|
}
|
|
}
|
|
|
|
fn text_update_system(diagnostics: Res<Diagnostics>, mut query: Query<&mut Text, With<FpsText>>) {
|
|
for mut text in &mut query {
|
|
if let Some(fps) = diagnostics.get(FrameTimeDiagnosticsPlugin::FPS) {
|
|
if let Some(value) = fps.smoothed() {
|
|
// Update the value of the second section
|
|
text.sections[1].value = format!("{value:.2}");
|
|
}
|
|
}
|
|
}
|
|
}
|