Adjust some example text to match visual guidelines (#15966)

# Objective

Adjust instruction text in some newer examples to match the [example
visual
guidelines](https://bevyengine.org/learn/contribute/helping-out/creating-examples/#visual-guidelines).

## Solution

Move text 12px from edge of screen

## Testing

```
cargo run --example alter_mesh
cargo run --example alter_sprite
cargo run --example camera_orbit
cargo run --example projection_zoom
cargo run --example irradiance_volumes
cargo run --example log_layers_ecs
cargo run --example multi_asset_sync
cargo run --example multiple_windows
cargo run --example order_independent_transparency
```

## Additional information

This isn't comprehensive, just the most trivial cases. I'll double check
my notes and probably follow up with an issue to look into visual
guidelines for a few other examples.

examples/3d/order_independent_transparency.rs

@@ -51,7 +51,16 @@ fn setup(
 
     // spawn help text
     commands
-        .spawn((Text::default(), RenderLayers::layer(1)))
+        .spawn((
+            Text::default(),
+            Style {
+                position_type: PositionType::Absolute,
+                top: Val::Px(12.0),
+                left: Val::Px(12.0),
+                ..default()
+            },
+            RenderLayers::layer(1),
+        ))
         .with_children(|p| {
             p.spawn(TextSpan::new("Press T to toggle OIT\n"));
             p.spawn(TextSpan::new("OIT Enabled"));

examples/asset/alter_mesh.rs

@@ -132,26 +132,19 @@ fn setup(
 }
 
 fn spawn_text(mut commands: Commands) {
-    commands
+    commands.spawn((
-        .spawn((
+        Name::new("Instructions"),
-            Name::new("Instructions"),
+        Text::new(
-            NodeBundle {
+            "Space: swap meshes by mutating a Handle<Mesh>\n\
-                style: Style {
+            Return: mutate the mesh itself, changing all copies of it",
-                    align_items: AlignItems::Start,
+        ),
-                    flex_direction: FlexDirection::Column,
+        Style {
-                    justify_content: JustifyContent::Start,
+            position_type: PositionType::Absolute,
-                    width: Val::Percent(100.),
+            top: Val::Px(12.),
-                    ..default()
+            left: Val::Px(12.),
-                },
+            ..default()
-                ..default()
+        },
-            },
+    ));
-        ))
-        .with_children(|parent| {
-            parent.spawn(Text::new("Space: swap meshes by mutating a Handle<Mesh>"));
-            parent.spawn(Text::new(
-                "Return: mutate the mesh itself, changing all copies of it",
-            ));
-        });
 }
 
 fn alter_handle(

examples/asset/alter_sprite.rs

@@ -90,26 +90,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
 }
 
 fn spawn_text(mut commands: Commands) {
-    commands
+    commands.spawn((
-        .spawn((
+        Name::new("Instructions"),
-            Name::new("Instructions"),
+        Text::new(
-            NodeBundle {
+            "Space: swap the right sprite's image handle\n\
-                style: Style {
+            Return: modify the image Asset of the left sprite, affecting all uses of it",
-                    align_items: AlignItems::Start,
+        ),
-                    flex_direction: FlexDirection::Column,
+        Style {
-                    justify_content: JustifyContent::Start,
+            position_type: PositionType::Absolute,
-                    width: Val::Percent(100.),
+            top: Val::Px(12.),
-                    ..default()
+            left: Val::Px(12.),
-                },
+            ..default()
-                ..default()
+        },
-            },
+    ));
-        ))
-        .with_children(|parent| {
-            parent.spawn(Text::new("Space: swap the right sprite's image handle"));
-            parent.spawn(Text::new(
-                "Return: modify the image Asset of the left sprite, affecting all uses of it",
-            ));
-        });
 }
 
 fn alter_handle(

examples/asset/multi_asset_sync.rs

@@ -168,29 +168,17 @@ fn setup_assets(mut commands: Commands, asset_server: Res<AssetServer>) {
 
 fn setup_ui(mut commands: Commands) {
     // Display the result of async loading.
-    commands
-        .spawn(NodeBundle {
-            style: Style {
-                width: Val::Percent(100.),
-                height: Val::Percent(100.),
-                justify_content: JustifyContent::End,
 
-                ..default()
+    commands.spawn((
-            },
+        LoadingText,
+        Text::new("Loading...".to_owned()),
+        Style {
+            position_type: PositionType::Absolute,
+            left: Val::Px(12.0),
+            top: Val::Px(12.0),
             ..default()
-        })
+        },
-        .with_children(|b| {
+    ));
-            b.spawn((
-                Text::new("Loading...".to_owned()),
-                TextFont {
-                    font_size: 53.0,
-                    ..Default::default()
-                },
-                TextColor(Color::BLACK),
-                TextLayout::new_with_justify(JustifyText::Right),
-                LoadingText,
-            ));
-        });
 }
 
 fn setup_scene(

examples/camera/camera_orbit.rs

@@ -80,25 +80,20 @@ fn setup(
 }
 
 fn instructions(mut commands: Commands) {
-    commands
+    commands.spawn((
-        .spawn((
+        Name::new("Instructions"),
-            Name::new("Instructions"),
+        Text::new(
-            NodeBundle {
+            "Mouse up or down: pitch\n\
-                style: Style {
+            Mouse left or right: yaw\n\
-                    align_items: AlignItems::Start,
+            Mouse buttons: roll",
-                    flex_direction: FlexDirection::Column,
+        ),
-                    justify_content: JustifyContent::Start,
+        Style {
-                    width: Val::Percent(100.),
+            position_type: PositionType::Absolute,
-                    ..default()
+            top: Val::Px(12.),
-                },
+            left: Val::Px(12.),
-                ..default()
+            ..default()
-            },
+        },
-        ))
+    ));
-        .with_children(|parent| {
-            parent.spawn(Text::new("Mouse up or down: pitch"));
-            parent.spawn(Text::new("Mouse left or right: yaw"));
-            parent.spawn(Text::new("Mouse buttons: roll"));
-        });
 }
 
 fn orbit(

examples/camera/projection_zoom.rs

@@ -89,26 +89,19 @@ fn setup(
 }
 
 fn instructions(mut commands: Commands) {
-    commands
+    commands.spawn((
-        .spawn((
+        Name::new("Instructions"),
-            Name::new("Instructions"),
+        Text::new(
-            NodeBundle {
+            "Scroll mouse wheel to zoom in/out\n\
-                style: Style {
+            Space: switch between orthographic and perspective projections",
-                    align_items: AlignItems::Start,
+        ),
-                    flex_direction: FlexDirection::Column,
+        Style {
-                    justify_content: JustifyContent::Start,
+            position_type: PositionType::Absolute,
-                    width: Val::Percent(100.),
+            top: Val::Px(12.),
-                    ..default()
+            left: Val::Px(12.),
-                },
+            ..default()
-                ..default()
+        },
-            },
+    ));
-        ))
-        .with_children(|parent| {
-            parent.spawn(Text::new("Scroll mouse wheel to zoom in/out"));
-            parent.spawn(Text::new(
-                "Space: switch between orthographic and perspective projections",
-            ));
-        });
 }
 
 fn switch_projection(

examples/dev_tools/fps_overlay.rs

@@ -43,25 +43,21 @@ fn setup(mut commands: Commands) {
     commands.spawn(Camera2d);
 
     // Instruction text
-    commands
+
-        .spawn(NodeBundle {
+    commands.spawn((
-            style: Style {
+        Text::new(concat!(
-                width: Val::Percent(100.0),
+            "Press 1 to toggle the overlay color.\n",
-                height: Val::Percent(100.0),
+            "Press 2 to decrease the overlay size.\n",
-                align_items: AlignItems::Center,
+            "Press 3 to increase the overlay size.\n",
-                justify_content: JustifyContent::Center,
+            "Press 4 to toggle the overlay visibility."
-                ..default()
+        )),
-            },
+        Style {
+            position_type: PositionType::Absolute,
+            bottom: Val::Px(12.),
+            left: Val::Px(12.),
             ..default()
-        })
+        },
-        .with_children(|c| {
+    ));
-            c.spawn(Text::new(concat!(
-                "Press 1 to toggle the overlay color.\n",
-                "Press 2 to decrease the overlay size.\n",
-                "Press 3 to increase the overlay size.\n",
-                "Press 4 to toggle the overlay visibility."
-            )));
-        });
 }
 
 fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {

examples/window/multiple_windows.rs

@@ -47,11 +47,23 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
         ))
         .id();
 
-    // Since we are using multiple cameras, we need to specify which camera UI should be rendered to
+    let style = Style {
-    commands
+        position_type: PositionType::Absolute,
-        .spawn((NodeBundle::default(), TargetCamera(first_window_camera)))
+        top: Val::Px(12.0),
-        .with_child(Text::new("First window"));
+        left: Val::Px(12.0),
-    commands
+        ..default()
-        .spawn((NodeBundle::default(), TargetCamera(second_window_camera)))
+    };
-        .with_child(Text::new("Second window"));
+
+    commands.spawn((
+        Text::new("First window"),
+        style.clone(),
+        // Since we are using multiple cameras, we need to specify which camera UI should be rendered to
+        TargetCamera(first_window_camera),
+    ));
+
+    commands.spawn((
+        Text::new("Second window"),
+        style,
+        TargetCamera(second_window_camera),
+    ));
 }