98 lines
		
	
	
		
			3.2 KiB
		
	
	
	
		
			Rust
		
	
	
	
	
	
			
		
		
	
	
			98 lines
		
	
	
		
			3.2 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_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<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,
 | |
|             bottom: Val::Px(5.0),
 | |
|             right: Val::Px(15.0),
 | |
|             ..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}");
 | |
|             }
 | |
|         }
 | |
|     }
 | |
| }
 | 
