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
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"));

View file

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

View file

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

View file

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

View file

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

View file

@ -43,25 +43,21 @@ fn setup(mut commands: Commands) {
commands.spawn(Camera2d);
// Instruction text
commands
.spawn(NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
commands.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."
)),
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>) {

View file

@ -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
commands
.spawn((NodeBundle::default(), TargetCamera(first_window_camera)))
.with_child(Text::new("First window"));
commands
.spawn((NodeBundle::default(), TargetCamera(second_window_camera)))
.with_child(Text::new("Second window"));
let style = Style {
position_type: PositionType::Absolute,
top: Val::Px(12.0),
left: Val::Px(12.0),
..default()
};
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),
));
}