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.
This commit is contained in:
Rob Parrett 2024-10-16 18:01:32 -07:00 committed by GitHub
parent b4e04f9d9f
commit 90b5ed6c93
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 105 additions and 126 deletions

View file

@ -51,7 +51,16 @@ fn setup(
// spawn help text // spawn help text
commands 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| { .with_children(|p| {
p.spawn(TextSpan::new("Press T to toggle OIT\n")); p.spawn(TextSpan::new("Press T to toggle OIT\n"));
p.spawn(TextSpan::new("OIT Enabled")); p.spawn(TextSpan::new("OIT Enabled"));

View file

@ -132,26 +132,19 @@ fn setup(
} }
fn spawn_text(mut commands: Commands) { 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( fn alter_handle(

View file

@ -90,26 +90,19 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
} }
fn spawn_text(mut commands: Commands) { 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( fn alter_handle(

View file

@ -168,29 +168,17 @@ fn setup_assets(mut commands: Commands, asset_server: Res<AssetServer>) {
fn setup_ui(mut commands: Commands) { fn setup_ui(mut commands: Commands) {
// Display the result of async loading. // 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() ..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( fn setup_scene(

View file

@ -80,25 +80,20 @@ fn setup(
} }
fn instructions(mut commands: Commands) { 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( fn orbit(

View file

@ -89,26 +89,19 @@ fn setup(
} }
fn instructions(mut commands: Commands) { 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( fn switch_projection(

View file

@ -43,25 +43,21 @@ fn setup(mut commands: Commands) {
commands.spawn(Camera2d); commands.spawn(Camera2d);
// Instruction text // 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() ..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>) { fn customize_config(input: Res<ButtonInput<KeyCode>>, mut overlay: ResMut<FpsOverlayConfig>) {

View file

@ -47,11 +47,23 @@ fn setup_scene(mut commands: Commands, asset_server: Res<AssetServer>) {
)) ))
.id(); .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),
));
} }