use bevy::{ diagnostic::{Diagnostics, FrameTimeDiagnosticsPlugin}, prelude::*, }; /// This example is for debugging text layout fn main() { App::build() .insert_resource(WindowDescriptor { vsync: false, ..Default::default() }) .add_plugins(bevy_webgl2::DefaultPlugins) .add_plugin(FrameTimeDiagnosticsPlugin) .add_startup_system(infotext_system.system()) .add_system(change_text_system.system()) .run(); } 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() }, ..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::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::default() }, max_size: Size { width: Val::Px(400.), height: Val::Undefined, }, ..Default::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::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() }, ..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::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::default() }, size: Size { width: Val::Px(200.0), ..Default::default() }, ..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::default() }); } fn change_text_system( time: Res