standardize instructions in examples (#8478)

# Objective

- Standardize on screen instructions in examples:
  - top left, bottom left when better
  - white, black when better
  - same margin (12px) and font size (20)

## Solution

- Started with a few examples, let's reach consensus then document and
open issues for the rest

examples/3d/3d_gizmos.rs

@@ -43,15 +43,23 @@ fn setup(
         transform: Transform::from_xyz(4.0, 8.0, 4.0),
         ..default()
     });
-    // text
+
-    commands.spawn(TextBundle::from_section(
+    // example instructions
-        "Press 't' to toggle drawing gizmos on top of everything else in the scene",
+    commands.spawn(
-        TextStyle {
+        TextBundle::from_section(
-            font_size: 24.,
+            "Press 't' to toggle drawing gizmos on top of everything else in the scene",
-            color: Color::WHITE,
+            TextStyle {
+                font_size: 20.,
+                ..default()
+            },
+        )
+        .with_style(Style {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
             ..default()
-        },
+        }),
-    ));
+    );
 }
 
 fn system(mut gizmos: Gizmos, time: Res<Time>) {

examples/3d/anti_aliasing.rs

@@ -324,13 +324,12 @@ fn setup(
         },
     ));
 
-    // UI
+    // example instructions
     commands.spawn(
         TextBundle::from_section(
             "",
             TextStyle {
-                font_size: 20.0,
+                font_size: 20.,
-                color: Color::BLACK,
                 ..default()
             },
         )

examples/3d/atmospheric_fog.rs

@@ -97,15 +97,15 @@ fn setup_instructions(mut commands: Commands) {
     commands.spawn((TextBundle::from_section(
         "Press Spacebar to Toggle Atmospheric Fog.\nPress S to Toggle Directional Light Fog Influence.",
         TextStyle {
-            font_size: 15.0,
+            font_size: 20.0,
             color: Color::WHITE,
             ..default()
         },
     )
     .with_style(Style {
         position_type: PositionType::Absolute,
-        bottom: Val::Px(10.0),
+        bottom: Val::Px(12.0),
-        left: Val::Px(10.0),
+        left: Val::Px(12.0),
         ..default()
     }),));
 }

examples/3d/bloom_3d.rs

@@ -91,19 +91,20 @@ fn setup_scene(
         }
     }
 
+    // example instructions
     commands.spawn(
         TextBundle::from_section(
             "",
             TextStyle {
-                font_size: 18.0,
+                font_size: 20.0,
                 color: Color::BLACK,
                 ..default()
             },
         )
         .with_style(Style {
             position_type: PositionType::Absolute,
-            bottom: Val::Px(10.0),
+            bottom: Val::Px(12.0),
-            left: Val::Px(10.0),
+            left: Val::Px(12.0),
             ..default()
         }),
     );

examples/3d/fog.rs

@@ -138,20 +138,21 @@ fn setup_pyramid_scene(
 }
 
 fn setup_instructions(mut commands: Commands) {
-    commands.spawn((TextBundle::from_section(
+    commands.spawn(
-        "",
+        TextBundle::from_section(
-        TextStyle {
+            "",
-            font_size: 15.0,
+            TextStyle {
-            color: Color::WHITE,
+                font_size: 20.0,
+                ..default()
+            },
+        )
+        .with_style(Style {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
             ..default()
-        },
+        }),
-    )
+    );
-    .with_style(Style {
-        position_type: PositionType::Absolute,
-        top: Val::Px(10.0),
-        left: Val::Px(10.0),
-        ..default()
-    }),));
 }
 
 fn update_system(

examples/3d/lighting.rs

@@ -232,6 +232,23 @@ fn setup(
         transform: Transform::from_xyz(-2.0, 2.5, 5.0).looking_at(Vec3::ZERO, Vec3::Y),
         ..default()
     });
+
+    // example instructions
+    commands.spawn(
+        TextBundle::from_section(
+            "Use arrow keys to move objects",
+            TextStyle {
+                font_size: 20.0,
+                ..default()
+            },
+        )
+        .with_style(Style {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
+            ..default()
+        }),
+    );
 }
 
 fn animate_light_direction(

examples/3d/parallax_mapping.rs

@@ -315,11 +315,11 @@ fn setup(
     commands.spawn(background_cube_bundle(Vec3::new(0., 0., -45.)));
 
     let style = TextStyle {
-        font_size: 18.0,
+        font_size: 20.0,
-        color: Color::WHITE,
         ..default()
     };
 
+    // example instructions
     commands.spawn(
         TextBundle::from_sections(vec![
             TextSection::new(
@@ -332,8 +332,7 @@ fn setup(
             ),
             TextSection::new(format!("{parallax_mapping_method}\n"), style.clone()),
             TextSection::new("\n\n", style.clone()),
-            TextSection::new("Controls\n", style.clone()),
+            TextSection::new("Controls:\n", style.clone()),
-            TextSection::new("---------------\n", style.clone()),
             TextSection::new("Left click - Change view angle\n", style.clone()),
             TextSection::new(
                 "1/2 - Decrease/Increase parallax depth scale\n",
@@ -344,8 +343,8 @@ fn setup(
         ])
         .with_style(Style {
             position_type: PositionType::Absolute,
-            top: Val::Px(10.0),
+            top: Val::Px(12.0),
-            left: Val::Px(10.0),
+            left: Val::Px(12.0),
             ..default()
         }),
     );

examples/3d/shadow_biases.rs

@@ -5,18 +5,6 @@ use std::f32::consts::PI;
 use bevy::{input::mouse::MouseMotion, prelude::*};
 
 fn main() {
-    println!(
-        "Controls:
-    WSAD   - forward/back/strafe left/right
-    LShift - 'run'
-    E      - up
-    Q      - down
-    L      - switch between directional and point lights
-    1/2    - decrease/increase point light depth bias
-    3/4    - decrease/increase point light normal bias
-    5/6    - decrease/increase direction light depth bias
-    7/8    - decrease/increase direction light normal bias"
-    );
     App::new()
         .add_plugins(DefaultPlugins)
         .add_systems(Startup, setup)
@@ -55,8 +43,6 @@ fn setup(
         .unwrap(),
     );
 
-    println!("Using DirectionalLight");
-
     commands.spawn(PointLightBundle {
         transform: Transform::from_xyz(5.0, 5.0, 0.0),
         point_light: PointLight {
@@ -113,17 +99,57 @@ fn setup(
         material: white_handle,
         ..default()
     });
+
+    let style = TextStyle {
+        font_size: 20.,
+        ..default()
+    };
+    commands.spawn(
+        TextBundle::from_sections([
+            TextSection::new("Controls:\n", style.clone()),
+            TextSection::new("WSAD  - forward/back/strafe left/right\n", style.clone()),
+            TextSection::new("E / Q - up / down\n", style.clone()),
+            TextSection::new(
+                "L     - switch between directional and point lights [",
+                style.clone(),
+            ),
+            TextSection::new("DirectionalLight", style.clone()),
+            TextSection::new("]\n", style.clone()),
+            TextSection::new("1/2   - change point light depth bias [", style.clone()),
+            TextSection::new("0.00", style.clone()),
+            TextSection::new("]\n", style.clone()),
+            TextSection::new("3/4   - change point light normal bias [", style.clone()),
+            TextSection::new("0.0", style.clone()),
+            TextSection::new("]\n", style.clone()),
+            TextSection::new("5/6   - change direction light depth bias [", style.clone()),
+            TextSection::new("0.00", style.clone()),
+            TextSection::new("]\n", style.clone()),
+            TextSection::new(
+                "7/8   - change direction light normal bias [",
+                style.clone(),
+            ),
+            TextSection::new("0.0", style.clone()),
+            TextSection::new("]", style),
+        ])
+        .with_style(Style {
+            position_type: PositionType::Absolute,
+            top: Val::Px(12.0),
+            left: Val::Px(12.0),
+            ..default()
+        }),
+    );
 }
 
 fn toggle_light(
     input: Res<Input<KeyCode>>,
     mut point_lights: Query<&mut PointLight>,
     mut directional_lights: Query<&mut DirectionalLight>,
+    mut example_text: Query<&mut Text>,
 ) {
     if input.just_pressed(KeyCode::L) {
         for mut light in &mut point_lights {
             light.intensity = if light.intensity == 0.0 {
-                println!("Using PointLight");
+                example_text.single_mut().sections[4].value = "PointLight".to_string();
                 100000000.0
             } else {
                 0.0
@@ -131,7 +157,7 @@ fn toggle_light(
         }
         for mut light in &mut directional_lights {
             light.illuminance = if light.illuminance == 0.0 {
-                println!("Using DirectionalLight");
+                example_text.single_mut().sections[4].value = "DirectionalLight".to_string();
                 100000.0
             } else {
                 0.0
@@ -140,31 +166,31 @@ fn toggle_light(
     }
 }
 
-fn adjust_point_light_biases(input: Res<Input<KeyCode>>, mut query: Query<&mut PointLight>) {
+fn adjust_point_light_biases(
+    input: Res<Input<KeyCode>>,
+    mut query: Query<&mut PointLight>,
+    mut example_text: Query<&mut Text>,
+) {
     let depth_bias_step_size = 0.01;
     let normal_bias_step_size = 0.1;
     for mut light in &mut query {
         if input.just_pressed(KeyCode::Key1) {
             light.shadow_depth_bias -= depth_bias_step_size;
-            println!("PointLight shadow_depth_bias: {}", light.shadow_depth_bias);
+            example_text.single_mut().sections[7].value = format!("{:.2}", light.shadow_depth_bias);
         }
         if input.just_pressed(KeyCode::Key2) {
             light.shadow_depth_bias += depth_bias_step_size;
-            println!("PointLight shadow_depth_bias: {}", light.shadow_depth_bias);
+            example_text.single_mut().sections[7].value = format!("{:.2}", light.shadow_depth_bias);
         }
         if input.just_pressed(KeyCode::Key3) {
             light.shadow_normal_bias -= normal_bias_step_size;
-            println!(
+            example_text.single_mut().sections[10].value =
-                "PointLight shadow_normal_bias: {}",
+                format!("{:.1}", light.shadow_normal_bias);
-                light.shadow_normal_bias
-            );
         }
         if input.just_pressed(KeyCode::Key4) {
             light.shadow_normal_bias += normal_bias_step_size;
-            println!(
+            example_text.single_mut().sections[10].value =
-                "PointLight shadow_normal_bias: {}",
+                format!("{:.1}", light.shadow_normal_bias);
-                light.shadow_normal_bias
-            );
         }
     }
 }
@@ -172,37 +198,30 @@ fn adjust_point_light_biases(input: Res<Input<KeyCode>>, mut query: Query<&mut P
 fn adjust_directional_light_biases(
     input: Res<Input<KeyCode>>,
     mut query: Query<&mut DirectionalLight>,
+    mut example_text: Query<&mut Text>,
 ) {
     let depth_bias_step_size = 0.01;
     let normal_bias_step_size = 0.1;
     for mut light in &mut query {
         if input.just_pressed(KeyCode::Key5) {
             light.shadow_depth_bias -= depth_bias_step_size;
-            println!(
+            example_text.single_mut().sections[13].value =
-                "DirectionalLight shadow_depth_bias: {}",
+                format!("{:.2}", light.shadow_depth_bias);
-                light.shadow_depth_bias
-            );
         }
         if input.just_pressed(KeyCode::Key6) {
             light.shadow_depth_bias += depth_bias_step_size;
-            println!(
+            example_text.single_mut().sections[13].value =
-                "DirectionalLight shadow_depth_bias: {}",
+                format!("{:.2}", light.shadow_depth_bias);
-                light.shadow_depth_bias
-            );
         }
         if input.just_pressed(KeyCode::Key7) {
             light.shadow_normal_bias -= normal_bias_step_size;
-            println!(
+            example_text.single_mut().sections[16].value =
-                "DirectionalLight shadow_normal_bias: {}",
+                format!("{:.1}", light.shadow_normal_bias);
-                light.shadow_normal_bias
-            );
         }
         if input.just_pressed(KeyCode::Key8) {
             light.shadow_normal_bias += normal_bias_step_size;
-            println!(
+            example_text.single_mut().sections[16].value =
-                "DirectionalLight shadow_normal_bias: {}",
+                format!("{:.1}", light.shadow_normal_bias);
-                light.shadow_normal_bias
-            );
         }
     }
 }