use bevy::{ diagnostic::{Diagnostics, FrameTimeDiagnosticsPlugin}, prelude::*, window::PresentMode, }; /// This example is for debugging text layout fn main() { App::new() .insert_resource(WindowDescriptor { present_mode: PresentMode::Immediate, ..default() }) .add_plugins(DefaultPlugins) .add_plugin(FrameTimeDiagnosticsPlugin) .add_startup_system(infotext_system) .add_system(change_text_system) .run(); } #[derive(Component)] struct TextChanges; fn infotext_system(mut commands: Commands, asset_server: Res) { let font = asset_server.load("fonts/FiraSans-Bold.ttf"); commands.spawn_bundle(UiCameraBundle::default()); commands.spawn_bundle(TextBundle { style: Style { align_self: AlignSelf::FlexEnd, position_type: PositionType::Absolute, position: Rect { top: Val::Px(5.0), left: Val::Px(15.0), ..default() }, ..default() }, text: Text::with_section( "This is\ntext with\nline breaks\nin the top left", TextStyle { font: font.clone(), font_size: 50.0, color: Color::WHITE, }, Default::default(), ), ..default() }); commands.spawn_bundle(TextBundle { style: Style { align_self: AlignSelf::FlexEnd, position_type: PositionType::Absolute, position: Rect { top: Val::Px(5.0), right: Val::Px(15.0), ..default() }, max_size: Size { width: Val::Px(400.), height: Val::Undefined, }, ..default() }, text: Text::with_section( "This text is very long, has a limited width, is centred, is positioned in the top right and is also coloured pink.", TextStyle { font: font.clone(), font_size: 50.0, color: Color::rgb(0.8, 0.2, 0.7), }, TextAlignment { horizontal: HorizontalAlign::Center, vertical: VerticalAlign::Center, }, ), ..default() }); commands .spawn_bundle(TextBundle { style: Style { align_self: AlignSelf::FlexEnd, position_type: PositionType::Absolute, position: Rect { bottom: Val::Px(5.0), right: Val::Px(15.0), ..default() }, ..default() }, text: Text { sections: vec![ TextSection { value: "This text changes in the bottom right".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::WHITE, }, }, TextSection { value: "\nThis text changes in the bottom right - ".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::RED, }, }, TextSection { value: "".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::ORANGE_RED, }, }, TextSection { value: " fps, ".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::YELLOW, }, }, TextSection { value: "".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::GREEN, }, }, TextSection { value: " ms/frame".to_string(), style: TextStyle { font: font.clone(), font_size: 30.0, color: Color::BLUE, }, }, ], alignment: Default::default(), }, ..default() }) .insert(TextChanges); commands.spawn_bundle(TextBundle { style: Style { align_self: AlignSelf::FlexEnd, position_type: PositionType::Absolute, position: Rect { bottom: Val::Px(5.0), left: Val::Px(15.0), ..default() }, size: Size { width: Val::Px(200.0), ..default() }, ..default() }, text: Text::with_section( "This\ntext has\nline breaks and also a set width in the bottom left".to_string(), TextStyle { font, font_size: 50.0, color: Color::WHITE, }, Default::default(), ), ..default() }); } fn change_text_system( time: Res