From b2e1081f91ed8bfc9d06032995f0b63a204ecead Mon Sep 17 00:00:00 2001 From: Chia-Hsiang Cheng Date: Mon, 21 Nov 2022 14:38:35 +0000 Subject: [PATCH] Remove auto-margin properties from the examples (#6535) # Objective Fixes #6498. ## Solution Adding a parent node with properties AlignItems::Center and JustifyContent::Center to centered child nodes and removing their auto-margin properties. --- examples/ecs/state.rs | 39 +- examples/games/alien_cake_addict.rs | 4 +- examples/games/game_menu.rs | 536 ++++++++++++++++------------ examples/ui/button.rs | 42 ++- examples/ui/transparency_ui.rs | 82 +++-- examples/ui/z_index.rs | 173 ++++----- 6 files changed, 499 insertions(+), 377 deletions(-) diff --git a/examples/ecs/state.rs b/examples/ecs/state.rs index 253e252ae6b460..8980077a10de0c 100644 --- a/examples/ecs/state.rs +++ b/examples/ecs/state.rs @@ -41,29 +41,40 @@ fn setup(mut commands: Commands) { fn setup_menu(mut commands: Commands, asset_server: Res) { let button_entity = commands - .spawn(ButtonBundle { + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(150.0), Val::Px(65.0)), // center button - margin: UiRect::all(Val::Auto), - // horizontally center child text + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), justify_content: JustifyContent::Center, - // vertically center child text align_items: AlignItems::Center, ..default() }, - background_color: NORMAL_BUTTON.into(), ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - "Play", - TextStyle { - font: asset_server.load("fonts/FiraSans-Bold.ttf"), - font_size: 40.0, - color: Color::rgb(0.9, 0.9, 0.9), - }, - )); + parent + .spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + // horizontally center child text + justify_content: JustifyContent::Center, + // vertically center child text + align_items: AlignItems::Center, + ..default() + }, + background_color: NORMAL_BUTTON.into(), + ..default() + }) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + "Play", + TextStyle { + font: asset_server.load("fonts/FiraSans-Bold.ttf"), + font_size: 40.0, + color: Color::rgb(0.9, 0.9, 0.9), + }, + )); + }); }) .id(); commands.insert_resource(MenuData { button_entity }); diff --git a/examples/games/alien_cake_addict.rs b/examples/games/alien_cake_addict.rs index 2330370d49069e..c0267af6077a4d 100644 --- a/examples/games/alien_cake_addict.rs +++ b/examples/games/alien_cake_addict.rs @@ -380,9 +380,9 @@ fn display_score(mut commands: Commands, asset_server: Res, game: R commands .spawn(NodeBundle { style: Style { - margin: UiRect::all(Val::Auto), - justify_content: JustifyContent::Center, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, ..default() diff --git a/examples/games/game_menu.rs b/examples/games/game_menu.rs index 0045ef2da41ffe..58daa1f307cd1e 100644 --- a/examples/games/game_menu.rs +++ b/examples/games/game_menu.rs @@ -81,20 +81,30 @@ mod splash { fn splash_setup(mut commands: Commands, asset_server: Res) { let icon = asset_server.load("branding/icon.png"); // Display the logo - commands.spawn(( - ImageBundle { - style: Style { - // This will center the logo - margin: UiRect::all(Val::Auto), - // This will set the logo to be 200px wide, and auto adjust its height - size: Size::new(Val::Px(200.0), Val::Auto), + commands + .spawn(( + NodeBundle { + style: Style { + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), + ..default() + }, ..default() }, - image: UiImage::new(icon), - ..default() - }, - OnSplashScreen, - )); + OnSplashScreen, + )) + .with_children(|parent| { + parent.spawn(ImageBundle { + style: Style { + // This will set the logo to be 200px wide, and auto adjust its height + size: Size::new(Val::Px(200.0), Val::Auto), + ..default() + }, + image: UiImage::new(icon), + ..default() + }); + }); // Insert the timer as a resource commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, TimerMode::Once))); } @@ -146,73 +156,84 @@ mod game { let font = asset_server.load("fonts/FiraSans-Bold.ttf"); commands - // First create a `NodeBundle` for centering what we want to display .spawn(( NodeBundle { style: Style { - // This will center the current node - margin: UiRect::all(Val::Auto), - // This will display its children in a column, from top to bottom - flex_direction: FlexDirection::Column, - // `align_items` will align children on the cross axis. Here the main axis is - // vertical (column), so the cross axis is horizontal. This will center the - // children + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), + // center children align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::BLACK.into(), ..default() }, OnGameScreen, )) .with_children(|parent| { - // Display two lines of text, the second one with the current settings - parent.spawn( - TextBundle::from_section( - "Will be back to the menu shortly...", - TextStyle { - font: font.clone(), - font_size: 80.0, - color: TEXT_COLOR, + // First create a `NodeBundle` for centering what we want to display + parent + .spawn(NodeBundle { + style: Style { + // This will display its children in a column, from top to bottom + flex_direction: FlexDirection::Column, + // `align_items` will align children on the cross axis. Here the main axis is + // vertical (column), so the cross axis is horizontal. This will center the + // children + align_items: AlignItems::Center, + ..default() }, - ) - .with_style(Style { - margin: UiRect::all(Val::Px(50.0)), + background_color: Color::BLACK.into(), ..default() - }), - ); - parent.spawn( - TextBundle::from_sections([ - TextSection::new( - format!("quality: {:?}", *display_quality), - TextStyle { - font: font.clone(), - font_size: 60.0, - color: Color::BLUE, - }, - ), - TextSection::new( - " - ", - TextStyle { - font: font.clone(), - font_size: 60.0, - color: TEXT_COLOR, - }, - ), - TextSection::new( - format!("volume: {:?}", *volume), - TextStyle { - font: font.clone(), - font_size: 60.0, - color: Color::GREEN, - }, - ), - ]) - .with_style(Style { - margin: UiRect::all(Val::Px(50.0)), - ..default() - }), - ); + }) + .with_children(|parent| { + // Display two lines of text, the second one with the current settings + parent.spawn( + TextBundle::from_section( + "Will be back to the menu shortly...", + TextStyle { + font: font.clone(), + font_size: 80.0, + color: TEXT_COLOR, + }, + ) + .with_style(Style { + margin: UiRect::all(Val::Px(50.0)), + ..default() + }), + ); + parent.spawn( + TextBundle::from_sections([ + TextSection::new( + format!("quality: {:?}", *display_quality), + TextStyle { + font: font.clone(), + font_size: 60.0, + color: Color::BLUE, + }, + ), + TextSection::new( + " - ", + TextStyle { + font: font.clone(), + font_size: 60.0, + color: TEXT_COLOR, + }, + ), + TextSection::new( + format!("volume: {:?}", *volume), + TextStyle { + font: font.clone(), + font_size: 60.0, + color: Color::GREEN, + }, + ), + ]) + .with_style(Style { + margin: UiRect::all(Val::Px(50.0)), + ..default() + }), + ); + }); }); // Spawn a 5 seconds timer to trigger going back to the menu commands.insert_resource(GameTimer(Timer::from_seconds(5.0, TimerMode::Once))); @@ -418,96 +439,107 @@ mod menu { .spawn(( NodeBundle { style: Style { - margin: UiRect::all(Val::Auto), - flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::CRIMSON.into(), ..default() }, OnMainMenuScreen, )) .with_children(|parent| { - // Display the game name - parent.spawn( - TextBundle::from_section( - "Bevy Game Menu UI", - TextStyle { - font: font.clone(), - font_size: 80.0, - color: TEXT_COLOR, - }, - ) - .with_style(Style { - margin: UiRect::all(Val::Px(50.0)), - ..default() - }), - ); - - // Display three buttons for each action available from the main menu: - // - new game - // - settings - // - quit - parent - .spawn(( - ButtonBundle { - style: button_style.clone(), - background_color: NORMAL_BUTTON.into(), - ..default() - }, - MenuButtonAction::Play, - )) - .with_children(|parent| { - let icon = asset_server.load("textures/Game Icons/right.png"); - parent.spawn(ImageBundle { - style: button_icon_style.clone(), - image: UiImage::new(icon), - ..default() - }); - parent.spawn(TextBundle::from_section( - "New Game", - button_text_style.clone(), - )); - }); parent - .spawn(( - ButtonBundle { - style: button_style.clone(), - background_color: NORMAL_BUTTON.into(), - ..default() - }, - MenuButtonAction::Settings, - )) - .with_children(|parent| { - let icon = asset_server.load("textures/Game Icons/wrench.png"); - parent.spawn(ImageBundle { - style: button_icon_style.clone(), - image: UiImage::new(icon), - ..default() - }); - parent.spawn(TextBundle::from_section( - "Settings", - button_text_style.clone(), - )); - }); - parent - .spawn(( - ButtonBundle { - style: button_style, - background_color: NORMAL_BUTTON.into(), + .spawn(NodeBundle { + style: Style { + flex_direction: FlexDirection::Column, + align_items: AlignItems::Center, ..default() }, - MenuButtonAction::Quit, - )) + background_color: Color::CRIMSON.into(), + ..default() + }) .with_children(|parent| { - let icon = asset_server.load("textures/Game Icons/exitRight.png"); - parent.spawn(ImageBundle { - style: button_icon_style, - image: UiImage::new(icon), - ..default() - }); - parent.spawn(TextBundle::from_section("Quit", button_text_style)); + // Display the game name + parent.spawn( + TextBundle::from_section( + "Bevy Game Menu UI", + TextStyle { + font: font.clone(), + font_size: 80.0, + color: TEXT_COLOR, + }, + ) + .with_style(Style { + margin: UiRect::all(Val::Px(50.0)), + ..default() + }), + ); + + // Display three buttons for each action available from the main menu: + // - new game + // - settings + // - quit + parent + .spawn(( + ButtonBundle { + style: button_style.clone(), + background_color: NORMAL_BUTTON.into(), + ..default() + }, + MenuButtonAction::Play, + )) + .with_children(|parent| { + let icon = asset_server.load("textures/Game Icons/right.png"); + parent.spawn(ImageBundle { + style: button_icon_style.clone(), + image: UiImage::new(icon), + ..default() + }); + parent.spawn(TextBundle::from_section( + "New Game", + button_text_style.clone(), + )); + }); + parent + .spawn(( + ButtonBundle { + style: button_style.clone(), + background_color: NORMAL_BUTTON.into(), + ..default() + }, + MenuButtonAction::Settings, + )) + .with_children(|parent| { + let icon = asset_server.load("textures/Game Icons/wrench.png"); + parent.spawn(ImageBundle { + style: button_icon_style.clone(), + image: UiImage::new(icon), + ..default() + }); + parent.spawn(TextBundle::from_section( + "Settings", + button_text_style.clone(), + )); + }); + parent + .spawn(( + ButtonBundle { + style: button_style, + background_color: NORMAL_BUTTON.into(), + ..default() + }, + MenuButtonAction::Quit, + )) + .with_children(|parent| { + let icon = asset_server.load("textures/Game Icons/exitRight.png"); + parent.spawn(ImageBundle { + style: button_icon_style, + image: UiImage::new(icon), + ..default() + }); + parent.spawn(TextBundle::from_section("Quit", button_text_style)); + }); }); }); } @@ -531,35 +563,49 @@ mod menu { .spawn(( NodeBundle { style: Style { - margin: UiRect::all(Val::Auto), - flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::CRIMSON.into(), ..default() }, OnSettingsMenuScreen, )) .with_children(|parent| { - for (action, text) in [ - (MenuButtonAction::SettingsDisplay, "Display"), - (MenuButtonAction::SettingsSound, "Sound"), - (MenuButtonAction::BackToMainMenu, "Back"), - ] { - parent - .spawn(( - ButtonBundle { - style: button_style.clone(), - background_color: NORMAL_BUTTON.into(), - ..default() - }, - action, - )) - .with_children(|parent| { - parent.spawn(TextBundle::from_section(text, button_text_style.clone())); - }); - } + parent + .spawn(NodeBundle { + style: Style { + flex_direction: FlexDirection::Column, + align_items: AlignItems::Center, + ..default() + }, + background_color: Color::CRIMSON.into(), + ..default() + }) + .with_children(|parent| { + for (action, text) in [ + (MenuButtonAction::SettingsDisplay, "Display"), + (MenuButtonAction::SettingsSound, "Sound"), + (MenuButtonAction::BackToMainMenu, "Back"), + ] { + parent + .spawn(( + ButtonBundle { + style: button_style.clone(), + background_color: NORMAL_BUTTON.into(), + ..default() + }, + action, + )) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + text, + button_text_style.clone(), + )); + }); + } + }); }); } @@ -585,22 +631,20 @@ mod menu { .spawn(( NodeBundle { style: Style { - margin: UiRect::all(Val::Auto), - flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::CRIMSON.into(), ..default() }, OnDisplaySettingsMenuScreen, )) .with_children(|parent| { - // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will - // use the default value, `FlexDirection::Row`, from left to right. parent .spawn(NodeBundle { style: Style { + flex_direction: FlexDirection::Column, align_items: AlignItems::Center, ..default() }, @@ -608,48 +652,61 @@ mod menu { ..default() }) .with_children(|parent| { - // Display a label for the current setting - parent.spawn(TextBundle::from_section( - "Display Quality", - button_text_style.clone(), - )); - // Display a button for each possible value - for quality_setting in [ - DisplayQuality::Low, - DisplayQuality::Medium, - DisplayQuality::High, - ] { - let mut entity = parent.spawn(ButtonBundle { + // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will + // use the default value, `FlexDirection::Row`, from left to right. + parent + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(150.0), Val::Px(65.0)), - ..button_style.clone() + align_items: AlignItems::Center, + ..default() }, - background_color: NORMAL_BUTTON.into(), + background_color: Color::CRIMSON.into(), ..default() - }); - entity.insert(quality_setting).with_children(|parent| { + }) + .with_children(|parent| { + // Display a label for the current setting parent.spawn(TextBundle::from_section( - format!("{quality_setting:?}"), + "Display Quality", button_text_style.clone(), )); + // Display a button for each possible value + for quality_setting in [ + DisplayQuality::Low, + DisplayQuality::Medium, + DisplayQuality::High, + ] { + let mut entity = parent.spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + ..button_style.clone() + }, + background_color: NORMAL_BUTTON.into(), + ..default() + }); + entity.insert(quality_setting).with_children(|parent| { + parent.spawn(TextBundle::from_section( + format!("{quality_setting:?}"), + button_text_style.clone(), + )); + }); + if *display_quality == quality_setting { + entity.insert(SelectedOption); + } + } + }); + // Display the back button to return to the settings screen + parent + .spawn(( + ButtonBundle { + style: button_style, + background_color: NORMAL_BUTTON.into(), + ..default() + }, + MenuButtonAction::BackToSettings, + )) + .with_children(|parent| { + parent.spawn(TextBundle::from_section("Back", button_text_style)); }); - if *display_quality == quality_setting { - entity.insert(SelectedOption); - } - } - }); - // Display the back button to return to the settings screen - parent - .spawn(( - ButtonBundle { - style: button_style, - background_color: NORMAL_BUTTON.into(), - ..default() - }, - MenuButtonAction::BackToSettings, - )) - .with_children(|parent| { - parent.spawn(TextBundle::from_section("Back", button_text_style)); }); }); } @@ -676,12 +733,11 @@ mod menu { .spawn(( NodeBundle { style: Style { - margin: UiRect::all(Val::Auto), - flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::CRIMSON.into(), ..default() }, OnSoundSettingsMenuScreen, @@ -690,6 +746,7 @@ mod menu { parent .spawn(NodeBundle { style: Style { + flex_direction: FlexDirection::Column, align_items: AlignItems::Center, ..default() }, @@ -697,36 +754,47 @@ mod menu { ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - "Volume", - button_text_style.clone(), - )); - for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] { - let mut entity = parent.spawn(ButtonBundle { + parent + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(30.0), Val::Px(65.0)), - ..button_style.clone() + align_items: AlignItems::Center, + ..default() }, - background_color: NORMAL_BUTTON.into(), + background_color: Color::CRIMSON.into(), ..default() + }) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + "Volume", + button_text_style.clone(), + )); + for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] { + let mut entity = parent.spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(30.0), Val::Px(65.0)), + ..button_style.clone() + }, + background_color: NORMAL_BUTTON.into(), + ..default() + }); + entity.insert(Volume(volume_setting)); + if *volume == Volume(volume_setting) { + entity.insert(SelectedOption); + } + } + }); + parent + .spawn(( + ButtonBundle { + style: button_style, + background_color: NORMAL_BUTTON.into(), + ..default() + }, + MenuButtonAction::BackToSettings, + )) + .with_children(|parent| { + parent.spawn(TextBundle::from_section("Back", button_text_style)); }); - entity.insert(Volume(volume_setting)); - if *volume == Volume(volume_setting) { - entity.insert(SelectedOption); - } - } - }); - parent - .spawn(( - ButtonBundle { - style: button_style, - background_color: NORMAL_BUTTON.into(), - ..default() - }, - MenuButtonAction::BackToSettings, - )) - .with_children(|parent| { - parent.spawn(TextBundle::from_section("Back", button_text_style)); }); }); } diff --git a/examples/ui/button.rs b/examples/ui/button.rs index d344b7420cff44..ab8b625e09f94f 100644 --- a/examples/ui/button.rs +++ b/examples/ui/button.rs @@ -47,28 +47,38 @@ fn setup(mut commands: Commands, asset_server: Res) { // ui camera commands.spawn(Camera2dBundle::default()); commands - .spawn(ButtonBundle { + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(150.0), Val::Px(65.0)), - // center button - margin: UiRect::all(Val::Auto), - // horizontally center child text - justify_content: JustifyContent::Center, - // vertically center child text + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: NORMAL_BUTTON.into(), ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - "Button", - TextStyle { - font: asset_server.load("fonts/FiraSans-Bold.ttf"), - font_size: 40.0, - color: Color::rgb(0.9, 0.9, 0.9), - }, - )); + parent + .spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + // horizontally center child text + justify_content: JustifyContent::Center, + // vertically center child text + align_items: AlignItems::Center, + ..default() + }, + background_color: NORMAL_BUTTON.into(), + ..default() + }) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + "Button", + TextStyle { + font: asset_server.load("fonts/FiraSans-Bold.ttf"), + font_size: 40.0, + color: Color::rgb(0.9, 0.9, 0.9), + }, + )); + }); }); } diff --git a/examples/ui/transparency_ui.rs b/examples/ui/transparency_ui.rs index 7d377db54be6ed..a70193b94078cf 100644 --- a/examples/ui/transparency_ui.rs +++ b/examples/ui/transparency_ui.rs @@ -17,52 +17,74 @@ fn setup(mut commands: Commands, asset_server: Res) { let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf"); commands - .spawn(ButtonBundle { + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(150.0), Val::Px(65.0)), - margin: UiRect::all(Val::Auto), - justify_content: JustifyContent::Center, + size: Size::new(Val::Percent(50.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::rgb(0.1, 0.5, 0.1).into(), ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - "Button 1", - TextStyle { - font: font_handle.clone(), - font_size: 40.0, - // Alpha channel of the color controls transparency. - color: Color::rgba(1.0, 1.0, 1.0, 0.2), - }, - )); + parent + .spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + justify_content: JustifyContent::Center, + align_items: AlignItems::Center, + ..default() + }, + background_color: Color::rgb(0.1, 0.5, 0.1).into(), + ..default() + }) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + "Button 1", + TextStyle { + font: font_handle.clone(), + font_size: 40.0, + // Alpha channel of the color controls transparency. + color: Color::rgba(1.0, 1.0, 1.0, 0.2), + }, + )); + }); }); - // Button with a different color, - // to demonstrate the text looks different due to its transparency. commands - .spawn(ButtonBundle { + .spawn(NodeBundle { style: Style { - size: Size::new(Val::Px(150.0), Val::Px(65.0)), - margin: UiRect::all(Val::Auto), - justify_content: JustifyContent::Center, + size: Size::new(Val::Percent(50.0), Val::Percent(100.0)), align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, - background_color: Color::rgb(0.5, 0.1, 0.5).into(), ..default() }) .with_children(|parent| { - parent.spawn(TextBundle::from_section( - "Button 2", - TextStyle { - font: font_handle.clone(), - font_size: 40.0, - // Alpha channel of the color controls transparency. - color: Color::rgba(1.0, 1.0, 1.0, 0.2), - }, - )); + // Button with a different color, + // to demonstrate the text looks different due to its transparency. + parent + .spawn(ButtonBundle { + style: Style { + size: Size::new(Val::Px(150.0), Val::Px(65.0)), + justify_content: JustifyContent::Center, + align_items: AlignItems::Center, + ..default() + }, + background_color: Color::rgb(0.5, 0.1, 0.5).into(), + ..default() + }) + .with_children(|parent| { + parent.spawn(TextBundle::from_section( + "Button 2", + TextStyle { + font: font_handle.clone(), + font_size: 40.0, + // Alpha channel of the color controls transparency. + color: Color::rgba(1.0, 1.0, 1.0, 0.2), + }, + )); + }); }); } diff --git a/examples/ui/z_index.rs b/examples/ui/z_index.rs index e469d2e30d1072..d15f5dcbeb1f9c 100644 --- a/examples/ui/z_index.rs +++ b/examples/ui/z_index.rs @@ -21,103 +21,114 @@ fn setup(mut commands: Commands) { // because this is a root UI node, using local or global values will do the same thing. commands .spawn(NodeBundle { - background_color: Color::GRAY.into(), style: Style { - size: Size::new(Val::Px(180.0), Val::Px(100.0)), - margin: UiRect::all(Val::Auto), + size: Size::new(Val::Percent(100.0), Val::Percent(100.0)), + align_items: AlignItems::Center, + justify_content: JustifyContent::Center, ..default() }, ..default() }) .with_children(|parent| { - // spawn a node with default z-index. - parent.spawn(NodeBundle { - background_color: Color::RED.into(), - style: Style { - position_type: PositionType::Absolute, - position: UiRect { - left: Val::Px(10.0), - bottom: Val::Px(40.0), + parent + .spawn(NodeBundle { + background_color: Color::GRAY.into(), + style: Style { + size: Size::new(Val::Px(180.0), Val::Px(100.0)), ..default() }, - size: Size::new(Val::Px(100.0), Val::Px(50.0)), ..default() - }, - ..default() - }); + }) + .with_children(|parent| { + // spawn a node with default z-index. + parent.spawn(NodeBundle { + background_color: Color::RED.into(), + style: Style { + position_type: PositionType::Absolute, + position: UiRect { + left: Val::Px(10.0), + bottom: Val::Px(40.0), + ..default() + }, + size: Size::new(Val::Px(100.0), Val::Px(50.0)), + ..default() + }, + ..default() + }); - // spawn a node with a positive local z-index of 2. - // it will show above other nodes in the grey container. - parent.spawn(NodeBundle { - z_index: ZIndex::Local(2), - background_color: Color::BLUE.into(), - style: Style { - position_type: PositionType::Absolute, - position: UiRect { - left: Val::Px(45.0), - bottom: Val::Px(30.0), + // spawn a node with a positive local z-index of 2. + // it will show above other nodes in the grey container. + parent.spawn(NodeBundle { + z_index: ZIndex::Local(2), + background_color: Color::BLUE.into(), + style: Style { + position_type: PositionType::Absolute, + position: UiRect { + left: Val::Px(45.0), + bottom: Val::Px(30.0), + ..default() + }, + size: Size::new(Val::Px(100.0), Val::Px(50.0)), + ..default() + }, ..default() - }, - size: Size::new(Val::Px(100.0), Val::Px(50.0)), - ..default() - }, - ..default() - }); + }); - // spawn a node with a negative local z-index. - // it will show under other nodes in the grey container. - parent.spawn(NodeBundle { - z_index: ZIndex::Local(-1), - background_color: Color::GREEN.into(), - style: Style { - position_type: PositionType::Absolute, - position: UiRect { - left: Val::Px(70.0), - bottom: Val::Px(20.0), + // spawn a node with a negative local z-index. + // it will show under other nodes in the grey container. + parent.spawn(NodeBundle { + z_index: ZIndex::Local(-1), + background_color: Color::GREEN.into(), + style: Style { + position_type: PositionType::Absolute, + position: UiRect { + left: Val::Px(70.0), + bottom: Val::Px(20.0), + ..default() + }, + size: Size::new(Val::Px(100.0), Val::Px(75.0)), + ..default() + }, ..default() - }, - size: Size::new(Val::Px(100.0), Val::Px(75.0)), - ..default() - }, - ..default() - }); + }); - // spawn a node with a positive global z-index of 1. - // it will show above all other nodes, because it's the highest global z-index in this example. - // by default, boxes all share the global z-index of 0 that the grey container is added to. - parent.spawn(NodeBundle { - z_index: ZIndex::Global(1), - background_color: Color::PURPLE.into(), - style: Style { - position_type: PositionType::Absolute, - position: UiRect { - left: Val::Px(15.0), - bottom: Val::Px(10.0), + // spawn a node with a positive global z-index of 1. + // it will show above all other nodes, because it's the highest global z-index in this example. + // by default, boxes all share the global z-index of 0 that the grey container is added to. + parent.spawn(NodeBundle { + z_index: ZIndex::Global(1), + background_color: Color::PURPLE.into(), + style: Style { + position_type: PositionType::Absolute, + position: UiRect { + left: Val::Px(15.0), + bottom: Val::Px(10.0), + ..default() + }, + size: Size::new(Val::Px(100.0), Val::Px(60.0)), + ..default() + }, ..default() - }, - size: Size::new(Val::Px(100.0), Val::Px(60.0)), - ..default() - }, - ..default() - }); + }); - // spawn a node with a negative global z-index of -1. - // this will show under all other nodes including its parent, because it's the lowest global z-index - // in this example. - parent.spawn(NodeBundle { - z_index: ZIndex::Global(-1), - background_color: Color::YELLOW.into(), - style: Style { - position_type: PositionType::Absolute, - position: UiRect { - left: Val::Px(-15.0), - bottom: Val::Px(-15.0), + // spawn a node with a negative global z-index of -1. + // this will show under all other nodes including its parent, because it's the lowest global z-index + // in this example. + parent.spawn(NodeBundle { + z_index: ZIndex::Global(-1), + background_color: Color::YELLOW.into(), + style: Style { + position_type: PositionType::Absolute, + position: UiRect { + left: Val::Px(-15.0), + bottom: Val::Px(-15.0), + ..default() + }, + size: Size::new(Val::Px(100.0), Val::Px(125.0)), + ..default() + }, ..default() - }, - size: Size::new(Val::Px(100.0), Val::Px(125.0)), - ..default() - }, - ..default() - }); + }); + }); }); }