//! 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_systems((setup.on_startup(), text_update_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) { // 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