From 90b5ed6c938082fe20da6667e9de2c96fb491a2d Mon Sep 17 00:00:00 2001 From: Rob Parrett Date: Wed, 16 Oct 2024 18:01:32 -0700 Subject: [PATCH] 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 | 11 ++++++- examples/asset/alter_mesh.rs | 33 ++++++++----------- examples/asset/alter_sprite.rs | 33 ++++++++----------- examples/asset/multi_asset_sync.rs | 30 +++++------------ examples/camera/camera_orbit.rs | 33 ++++++++----------- examples/camera/projection_zoom.rs | 33 ++++++++----------- examples/dev_tools/fps_overlay.rs | 32 ++++++++---------- examples/window/multiple_windows.rs | 26 +++++++++++---- 8 files changed, 105 insertions(+), 126 deletions(-) diff --git a/examples/3d/order_independent_transparency.rs b/examples/3d/order_independent_transparency.rs index 561298d389..a15dfd9593 100644 --- a/examples/3d/order_independent_transparency.rs +++ b/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")); diff --git a/examples/asset/alter_mesh.rs b/examples/asset/alter_mesh.rs index e301653595..224e286a1e 100644 --- a/examples/asset/alter_mesh.rs +++ b/examples/asset/alter_mesh.rs @@ -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")); - 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\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( diff --git a/examples/asset/alter_sprite.rs b/examples/asset/alter_sprite.rs index 5dc0c26802..52fe7d0341 100644 --- a/examples/asset/alter_sprite.rs +++ b/examples/asset/alter_sprite.rs @@ -90,26 +90,19 @@ fn setup(mut commands: Commands, asset_server: Res) { } 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( diff --git a/examples/asset/multi_asset_sync.rs b/examples/asset/multi_asset_sync.rs index cd0df2b1a2..11015b2e42 100644 --- a/examples/asset/multi_asset_sync.rs +++ b/examples/asset/multi_asset_sync.rs @@ -168,29 +168,17 @@ fn setup_assets(mut commands: Commands, asset_server: Res) { 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( diff --git a/examples/camera/camera_orbit.rs b/examples/camera/camera_orbit.rs index b0b904200b..061c5d2e23 100644 --- a/examples/camera/camera_orbit.rs +++ b/examples/camera/camera_orbit.rs @@ -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( diff --git a/examples/camera/projection_zoom.rs b/examples/camera/projection_zoom.rs index 03195a9696..a55a733140 100644 --- a/examples/camera/projection_zoom.rs +++ b/examples/camera/projection_zoom.rs @@ -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( diff --git a/examples/dev_tools/fps_overlay.rs b/examples/dev_tools/fps_overlay.rs index f0482c5aed..5c159e3348 100644 --- a/examples/dev_tools/fps_overlay.rs +++ b/examples/dev_tools/fps_overlay.rs @@ -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>, mut overlay: ResMut) { diff --git a/examples/window/multiple_windows.rs b/examples/window/multiple_windows.rs index 537a8087a0..cb2d56a9d1 100644 --- a/examples/window/multiple_windows.rs +++ b/examples/window/multiple_windows.rs @@ -47,11 +47,23 @@ fn setup_scene(mut commands: Commands, asset_server: Res) { )) .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), + )); }