forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove auto-margin properties from the examples (#6535)

Browse Source 
# 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.
This commit is contained in:
Chia-Hsiang Cheng 2022-11-21 14:38:35 +00:00
parent 96e09f004b
commit 585dac0582
6 changed files with 500 additions and 378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
examples/ecs/state.rs
View File

@ -41,29 +41,40 @@ fn setup(mut commands: Commands) {
fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) { fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
let button_entity = commands let button_entity = commands
.spawn(ButtonBundle { .spawn(NodeBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
// center button // center button
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
// horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(),
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section( parent
"Play", .spawn(ButtonBundle {
TextStyle { style: Style {
font: asset_server.load("fonts/FiraSans-Bold.ttf"), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
font_size: 40.0, // horizontally center child text
color: Color::rgb(0.9, 0.9, 0.9), 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(); .id();
commands.insert_resource(MenuData { button_entity }); commands.insert_resource(MenuData { button_entity });

4
examples/games/alien_cake_addict.rs
View File

@ -380,9 +380,9 @@ fn display_score(mut commands: Commands, asset_server: Res<AssetServer>, game: R
commands commands
.spawn(NodeBundle { .spawn(NodeBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ..default()

538
examples/games/game_menu.rs
View File

@ -81,20 +81,30 @@ mod splash {
fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) { fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let icon = asset_server.load("branding/icon.png"); let icon = asset_server.load("branding/icon.png");
// Display the logo // Display the logo
commands.spawn(( commands
ImageBundle { .spawn((
style: Style { NodeBundle {
// This will center the logo style: Style {
margin: UiRect::all(Val::Auto), align_items: AlignItems::Center,
// This will set the logo to be 200px wide, and auto adjust its height justify_content: JustifyContent::Center,
size: Size::new(Val::Px(200.0), Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
..default()
},
..default() ..default()
}, },
image: UiImage::new(icon), OnSplashScreen,
..default() ))
}, .with_children(|parent| {
OnSplashScreen, 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 // Insert the timer as a resource
commands.insert_resource(SplashTimer(Timer::from_seconds(1.0, TimerMode::Once))); 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"); let font = asset_server.load("fonts/FiraSans-Bold.ttf");
commands commands
// First create a `NodeBundle` for centering what we want to display
.spawn(( .spawn((
NodeBundle { NodeBundle {
style: Style { style: Style {
// This will center the current node size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
margin: UiRect::all(Val::Auto), // center children
// 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, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::BLACK.into(),
..default() ..default()
}, },
OnGameScreen, OnGameScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
// Display two lines of text, the second one with the current settings // First create a `NodeBundle` for centering what we want to display
parent.spawn( parent
TextBundle::from_section( .spawn(NodeBundle {
"Will be back to the menu shortly...", style: Style {
TextStyle { // This will display its children in a column, from top to bottom
font: font.clone(), flex_direction: FlexDirection::Column,
font_size: 80.0, // `align_items` will align children on the cross axis. Here the main axis is
color: TEXT_COLOR, // vertical (column), so the cross axis is horizontal. This will center the
// children
align_items: AlignItems::Center,
..default()
}, },
) background_color: Color::BLACK.into(),
.with_style(Style {
margin: UiRect::all(Val::Px(50.0)),
..default() ..default()
}), })
); .with_children(|parent| {
parent.spawn( // Display two lines of text, the second one with the current settings
TextBundle::from_sections([ parent.spawn(
TextSection::new( TextBundle::from_section(
format!("quality: {:?}", *display_quality), "Will be back to the menu shortly...",
TextStyle { TextStyle {
font: font.clone(), font: font.clone(),
font_size: 60.0, font_size: 80.0,
color: Color::BLUE, color: TEXT_COLOR,
}, },
), )
TextSection::new( .with_style(Style {
" - ", margin: UiRect::all(Val::Px(50.0)),
TextStyle { ..default()
font: font.clone(), }),
font_size: 60.0, );
color: TEXT_COLOR, parent.spawn(
}, TextBundle::from_sections([
), TextSection::new(
TextSection::new( format!("quality: {:?}", *display_quality),
format!("volume: {:?}", *volume), TextStyle {
TextStyle { font: font.clone(),
font: font.clone(), font_size: 60.0,
font_size: 60.0, color: Color::BLUE,
color: Color::GREEN, },
}, ),
), TextSection::new(
]) " - ",
.with_style(Style { TextStyle {
margin: UiRect::all(Val::Px(50.0)), font: font.clone(),
..default() 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 // Spawn a 5 seconds timer to trigger going back to the menu
commands.insert_resource(GameTimer(Timer::from_seconds(5.0, TimerMode::Once))); commands.insert_resource(GameTimer(Timer::from_seconds(5.0, TimerMode::Once)));
@ -418,96 +439,107 @@ mod menu {
.spawn(( .spawn((
NodeBundle { NodeBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(),
..default() ..default()
}, },
OnMainMenuScreen, OnMainMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
// Display the game name parent
parent.spawn( .spawn(NodeBundle {
TextBundle::from_section( style: Style {
"Bevy Game Menu UI", flex_direction: FlexDirection::Column,
TextStyle { align_items: AlignItems::Center,
font: font.clone(), ..default()
font_size: 80.0,
color: TEXT_COLOR,
}, },
) background_color: Color::CRIMSON.into(),
.with_style(Style {
margin: UiRect::all(Val::Px(50.0)),
..default() ..default()
}), })
); .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: // Display three buttons for each action available from the main menu:
// - new game // - new game
// - settings // - settings
// - quit // - quit
parent parent
.spawn(( .spawn((
ButtonBundle { ButtonBundle {
style: button_style.clone(), style: button_style.clone(),
background_color: NORMAL_BUTTON.into(), background_color: NORMAL_BUTTON.into(),
..default() ..default()
}, },
MenuButtonAction::Play, MenuButtonAction::Play,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/right.png"); let icon = asset_server.load("textures/Game Icons/right.png");
parent.spawn(ImageBundle { parent.spawn(ImageBundle {
style: button_icon_style.clone(), style: button_icon_style.clone(),
image: UiImage::new(icon), image: UiImage::new(icon),
..default() ..default()
}); });
parent.spawn(TextBundle::from_section( parent.spawn(TextBundle::from_section(
"New Game", "New Game",
button_text_style.clone(), button_text_style.clone(),
)); ));
}); });
parent parent
.spawn(( .spawn((
ButtonBundle { ButtonBundle {
style: button_style.clone(), style: button_style.clone(),
background_color: NORMAL_BUTTON.into(), background_color: NORMAL_BUTTON.into(),
..default() ..default()
}, },
MenuButtonAction::Settings, MenuButtonAction::Settings,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/wrench.png"); let icon = asset_server.load("textures/Game Icons/wrench.png");
parent.spawn(ImageBundle { parent.spawn(ImageBundle {
style: button_icon_style.clone(), style: button_icon_style.clone(),
image: UiImage::new(icon), image: UiImage::new(icon),
..default() ..default()
}); });
parent.spawn(TextBundle::from_section( parent.spawn(TextBundle::from_section(
"Settings", "Settings",
button_text_style.clone(), button_text_style.clone(),
)); ));
}); });
parent parent
.spawn(( .spawn((
ButtonBundle { ButtonBundle {
style: button_style, style: button_style,
background_color: NORMAL_BUTTON.into(), background_color: NORMAL_BUTTON.into(),
..default() ..default()
}, },
MenuButtonAction::Quit, MenuButtonAction::Quit,
)) ))
.with_children(|parent| { .with_children(|parent| {
let icon = asset_server.load("textures/Game Icons/exitRight.png"); let icon = asset_server.load("textures/Game Icons/exitRight.png");
parent.spawn(ImageBundle { parent.spawn(ImageBundle {
style: button_icon_style, style: button_icon_style,
image: UiImage::new(icon), image: UiImage::new(icon),
..default() ..default()
}); });
parent.spawn(TextBundle::from_section("Quit", button_text_style)); parent.spawn(TextBundle::from_section("Quit", button_text_style));
});
}); });
}); });
} }
@ -531,35 +563,49 @@ mod menu {
.spawn(( .spawn((
NodeBundle { NodeBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(),
..default() ..default()
}, },
OnSettingsMenuScreen, OnSettingsMenuScreen,
)) ))
.with_children(|parent| { .with_children(|parent| {
for (action, text) in [ parent
(MenuButtonAction::SettingsDisplay, "Display"), .spawn(NodeBundle {
(MenuButtonAction::SettingsSound, "Sound"), style: Style {
(MenuButtonAction::BackToMainMenu, "Back"), flex_direction: FlexDirection::Column,
] { align_items: AlignItems::Center,
parent ..default()
.spawn(( },
ButtonBundle { background_color: Color::CRIMSON.into(),
style: button_style.clone(), ..default()
background_color: NORMAL_BUTTON.into(), })
..default() .with_children(|parent| {
}, for (action, text) in [
action, (MenuButtonAction::SettingsDisplay, "Display"),
)) (MenuButtonAction::SettingsSound, "Sound"),
.with_children(|parent| { (MenuButtonAction::BackToMainMenu, "Back"),
parent.spawn(TextBundle::from_section(text, button_text_style.clone())); ] {
}); 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(( .spawn((
NodeBundle { NodeBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(),
..default() ..default()
}, },
OnDisplaySettingsMenuScreen, OnDisplaySettingsMenuScreen,
)) ))
.with_children(|parent| { .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 parent
.spawn(NodeBundle { .spawn(NodeBundle {
style: Style { style: Style {
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
@ -608,48 +652,61 @@ mod menu {
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
// Display a label for the current setting // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will
parent.spawn(TextBundle::from_section( // use the default value, `FlexDirection::Row`, from left to right.
"Display Quality", parent
button_text_style.clone(), .spawn(NodeBundle {
));
// 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 { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), align_items: AlignItems::Center,
..button_style.clone() ..default()
}, },
background_color: NORMAL_BUTTON.into(), background_color: Color::CRIMSON.into(),
..default() ..default()
}); })
entity.insert(quality_setting).with_children(|parent| { .with_children(|parent| {
// Display a label for the current setting
parent.spawn(TextBundle::from_section( parent.spawn(TextBundle::from_section(
format!("{quality_setting:?}"), "Display Quality",
button_text_style.clone(), 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(( .spawn((
NodeBundle { NodeBundle {
style: Style { style: Style {
margin: UiRect::all(Val::Auto), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(),
..default() ..default()
}, },
OnSoundSettingsMenuScreen, OnSoundSettingsMenuScreen,
@ -690,6 +746,7 @@ mod menu {
parent parent
.spawn(NodeBundle { .spawn(NodeBundle {
style: Style { style: Style {
flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
@ -697,36 +754,47 @@ mod menu {
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section( parent
"Volume", .spawn(NodeBundle {
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 { style: Style {
size: Size::new(Val::Px(30.0), Val::Px(65.0)), align_items: AlignItems::Center,
..button_style.clone() ..default()
}, },
background_color: NORMAL_BUTTON.into(), background_color: Color::CRIMSON.into(),
..default() ..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));
}); });
}); });
} }

42
examples/ui/button.rs
View File

@ -47,28 +47,38 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// ui camera // ui camera
commands.spawn(Camera2dBundle::default()); commands.spawn(Camera2dBundle::default());
commands commands
.spawn(ButtonBundle { .spawn(NodeBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
// center button
margin: UiRect::all(Val::Auto),
// horizontally center child text
justify_content: JustifyContent::Center,
// vertically center child text
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: NORMAL_BUTTON.into(),
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section( parent
"Button", .spawn(ButtonBundle {
TextStyle { style: Style {
font: asset_server.load("fonts/FiraSans-Bold.ttf"), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
font_size: 40.0, // horizontally center child text
color: Color::rgb(0.9, 0.9, 0.9), 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),
},
));
});
}); });
} }

82
examples/ui/transparency_ui.rs
View File

@ -17,52 +17,74 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf"); let font_handle = asset_server.load("fonts/FiraSans-Bold.ttf");
commands commands
.spawn(ButtonBundle { .spawn(NodeBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::rgb(0.1, 0.5, 0.1).into(),
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section( parent
"Button 1", .spawn(ButtonBundle {
TextStyle { style: Style {
font: font_handle.clone(), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
font_size: 40.0, justify_content: JustifyContent::Center,
// Alpha channel of the color controls transparency. align_items: AlignItems::Center,
color: Color::rgba(1.0, 1.0, 1.0, 0.2), ..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 commands
.spawn(ButtonBundle { .spawn(NodeBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
background_color: Color::rgb(0.5, 0.1, 0.5).into(),
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section( // Button with a different color,
"Button 2", // to demonstrate the text looks different due to its transparency.
TextStyle { parent
font: font_handle.clone(), .spawn(ButtonBundle {
font_size: 40.0, style: Style {
// Alpha channel of the color controls transparency. size: Size::new(Val::Px(150.0), Val::Px(65.0)),
color: Color::rgba(1.0, 1.0, 1.0, 0.2), 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),
},
));
});
}); });
} }

173
examples/ui/z_index.rs
View File

@ -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. // because this is a root UI node, using local or global values will do the same thing.
commands commands
.spawn(NodeBundle { .spawn(NodeBundle {
background_color: Color::GRAY.into(),
style: Style { style: Style {
size: Size::new(Val::Px(180.0), Val::Px(100.0)), size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
margin: UiRect::all(Val::Auto), align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default() ..default()
}, },
..default() ..default()
}) })
.with_children(|parent| { .with_children(|parent| {
// spawn a node with default z-index. parent
parent.spawn(NodeBundle { .spawn(NodeBundle {
background_color: Color::RED.into(), background_color: Color::GRAY.into(),
style: Style { style: Style {
position_type: PositionType::Absolute, size: Size::new(Val::Px(180.0), Val::Px(100.0)),
position: UiRect {
left: Val::Px(10.0),
bottom: Val::Px(40.0),
..default() ..default()
}, },
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
..default() ..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. // spawn a node with a positive local z-index of 2.
// it will show above other nodes in the grey container. // it will show above other nodes in the grey container.
parent.spawn(NodeBundle { parent.spawn(NodeBundle {
z_index: ZIndex::Local(2), z_index: ZIndex::Local(2),
background_color: Color::BLUE.into(), background_color: Color::BLUE.into(),
style: Style { style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
position: UiRect { position: UiRect {
left: Val::Px(45.0), left: Val::Px(45.0),
bottom: Val::Px(30.0), bottom: Val::Px(30.0),
..default()
},
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
..default()
},
..default() ..default()
}, });
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
..default()
},
..default()
});
// spawn a node with a negative local z-index. // spawn a node with a negative local z-index.
// it will show under other nodes in the grey container. // it will show under other nodes in the grey container.
parent.spawn(NodeBundle { parent.spawn(NodeBundle {
z_index: ZIndex::Local(-1), z_index: ZIndex::Local(-1),
background_color: Color::GREEN.into(), background_color: Color::GREEN.into(),
style: Style { style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
position: UiRect { position: UiRect {
left: Val::Px(70.0), left: Val::Px(70.0),
bottom: Val::Px(20.0), bottom: Val::Px(20.0),
..default()
},
size: Size::new(Val::Px(100.0), Val::Px(75.0)),
..default()
},
..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. // 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. // 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. // by default, boxes all share the global z-index of 0 that the grey container is added to.
parent.spawn(NodeBundle { parent.spawn(NodeBundle {
z_index: ZIndex::Global(1), z_index: ZIndex::Global(1),
background_color: Color::PURPLE.into(), background_color: Color::PURPLE.into(),
style: Style { style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
position: UiRect { position: UiRect {
left: Val::Px(15.0), left: Val::Px(15.0),
bottom: Val::Px(10.0), bottom: Val::Px(10.0),
..default()
},
size: Size::new(Val::Px(100.0), Val::Px(60.0)),
..default()
},
..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. // 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 // this will show under all other nodes including its parent, because it's the lowest global z-index
// in this example. // in this example.
parent.spawn(NodeBundle { parent.spawn(NodeBundle {
z_index: ZIndex::Global(-1), z_index: ZIndex::Global(-1),
background_color: Color::YELLOW.into(), background_color: Color::YELLOW.into(),
style: Style { style: Style {
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
position: UiRect { position: UiRect {
left: Val::Px(-15.0), left: Val::Px(-15.0),
bottom: Val::Px(-15.0), bottom: Val::Px(-15.0),
..default()
},
size: Size::new(Val::Px(100.0), Val::Px(125.0)),
..default()
},
..default() ..default()
}, });
size: Size::new(Val::Px(100.0), Val::Px(125.0)), });
..default()
},
..default()
});
}); });
} }