mirror of
https://github.com/bevyengine/bevy
synced 2024-11-21 20:23:28 +00:00
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:
parent
b4e04f9d9f
commit
90b5ed6c93
8 changed files with 105 additions and 126 deletions
|
@ -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"));
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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>) {
|
||||||
|
|
|
@ -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),
|
||||||
|
));
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue