forestia/bevy
2
0
Fork 0
Code Issues Pull Requests Actions 1 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

15
examples/ecs/state.rs
View File

@ -41,11 +41,21 @@ 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(NodeBundle {
style: Style {
// center button
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..default()
},
..default()
})
.with_children(|parent| {
parent
.spawn(ButtonBundle { .spawn(ButtonBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
// center button
margin: UiRect::all(Val::Auto),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
@ -64,6 +74,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
color: Color::rgb(0.9, 0.9, 0.9), 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()

128
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((
NodeBundle {
style: Style {
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
..default()
},
..default()
},
OnSplashScreen,
))
.with_children(|parent| {
parent.spawn(ImageBundle {
style: Style { 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 // This will set the logo to be 200px wide, and auto adjust its height
size: Size::new(Val::Px(200.0), Val::Auto), size: Size::new(Val::Px(200.0), Val::Auto),
..default() ..default()
}, },
image: UiImage::new(icon), image: UiImage::new(icon),
..default() ..default()
}, });
OnSplashScreen, });
));
// 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,12 +156,24 @@ 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
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
},
OnGameScreen,
))
.with_children(|parent| {
// 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 // This will display its children in a column, from top to bottom
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
// `align_items` will align children on the cross axis. Here the main axis is // `align_items` will align children on the cross axis. Here the main axis is
@ -162,9 +184,7 @@ mod game {
}, },
background_color: Color::BLACK.into(), background_color: Color::BLACK.into(),
..default() ..default()
}, })
OnGameScreen,
))
.with_children(|parent| { .with_children(|parent| {
// Display two lines of text, the second one with the current settings // Display two lines of text, the second one with the current settings
parent.spawn( parent.spawn(
@ -214,6 +234,7 @@ mod game {
}), }),
); );
}); });
});
// 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,16 +439,26 @@ 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)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
},
OnMainMenuScreen,
))
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(), background_color: Color::CRIMSON.into(),
..default() ..default()
}, })
OnMainMenuScreen,
))
.with_children(|parent| { .with_children(|parent| {
// Display the game name // Display the game name
parent.spawn( parent.spawn(
@ -510,6 +541,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Quit", button_text_style)); parent.spawn(TextBundle::from_section("Quit", button_text_style));
}); });
}); });
});
} }
fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) { fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
@ -531,16 +563,26 @@ 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)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
},
OnSettingsMenuScreen,
))
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(), background_color: Color::CRIMSON.into(),
..default() ..default()
}, })
OnSettingsMenuScreen,
))
.with_children(|parent| { .with_children(|parent| {
for (action, text) in [ for (action, text) in [
(MenuButtonAction::SettingsDisplay, "Display"), (MenuButtonAction::SettingsDisplay, "Display"),
@ -557,10 +599,14 @@ mod menu {
action, action,
)) ))
.with_children(|parent| { .with_children(|parent| {
parent.spawn(TextBundle::from_section(text, button_text_style.clone())); parent.spawn(TextBundle::from_section(
text,
button_text_style.clone(),
));
}); });
} }
}); });
});
} }
fn display_settings_menu_setup( fn display_settings_menu_setup(
@ -585,16 +631,26 @@ 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)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
},
OnDisplaySettingsMenuScreen,
))
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(), background_color: Color::CRIMSON.into(),
..default() ..default()
}, })
OnDisplaySettingsMenuScreen,
))
.with_children(|parent| { .with_children(|parent| {
// Create a new `NodeBundle`, this time not setting its `flex_direction`. It will // Create a new `NodeBundle`, this time not setting its `flex_direction`. It will
// use the default value, `FlexDirection::Row`, from left to right. // use the default value, `FlexDirection::Row`, from left to right.
@ -652,6 +708,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Back", button_text_style)); parent.spawn(TextBundle::from_section("Back", button_text_style));
}); });
}); });
});
} }
fn sound_settings_menu_setup( fn sound_settings_menu_setup(
@ -676,16 +733,26 @@ 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)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
},
OnSoundSettingsMenuScreen,
))
.with_children(|parent| {
parent
.spawn(NodeBundle {
style: Style {
flex_direction: FlexDirection::Column, flex_direction: FlexDirection::Column,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
}, },
background_color: Color::CRIMSON.into(), background_color: Color::CRIMSON.into(),
..default() ..default()
}, })
OnSoundSettingsMenuScreen,
))
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn(NodeBundle {
@ -729,6 +796,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Back", button_text_style)); parent.spawn(TextBundle::from_section("Back", button_text_style));
}); });
}); });
});
} }
fn menu_action( fn menu_action(

14
examples/ui/button.rs
View File

@ -47,11 +47,20 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// ui camera // ui camera
commands.spawn(Camera2dBundle::default()); commands.spawn(Camera2dBundle::default());
commands commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
.with_children(|parent| {
parent
.spawn(ButtonBundle { .spawn(ButtonBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
// center button
margin: UiRect::all(Val::Auto),
// horizontally center child text // horizontally center child text
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
// vertically center child text // vertically center child text
@ -71,4 +80,5 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}, },
)); ));
}); });
});
} }

28
examples/ui/transparency_ui.rs
View File

@ -17,10 +17,20 @@ 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(NodeBundle {
style: Style {
size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
.with_children(|parent| {
parent
.spawn(ButtonBundle { .spawn(ButtonBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
@ -39,14 +49,25 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}, },
)); ));
}); });
});
commands
.spawn(NodeBundle {
style: Style {
size: Size::new(Val::Percent(50.0), Val::Percent(100.0)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
.with_children(|parent| {
// Button with a different color, // Button with a different color,
// to demonstrate the text looks different due to its transparency. // to demonstrate the text looks different due to its transparency.
commands parent
.spawn(ButtonBundle { .spawn(ButtonBundle {
style: Style { style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)), size: Size::new(Val::Px(150.0), Val::Px(65.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center, justify_content: JustifyContent::Center,
align_items: AlignItems::Center, align_items: AlignItems::Center,
..default() ..default()
@ -65,4 +86,5 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
}, },
)); ));
}); });
});
} }

13
examples/ui/z_index.rs
View File

@ -20,11 +20,21 @@ fn setup(mut commands: Commands) {
// the default z-index value is `ZIndex::Local(0)`. // the default z-index value is `ZIndex::Local(0)`.
// 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 {
style: Style {
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
align_items: AlignItems::Center,
justify_content: JustifyContent::Center,
..default()
},
..default()
})
.with_children(|parent| {
parent
.spawn(NodeBundle { .spawn(NodeBundle {
background_color: Color::GRAY.into(), background_color: Color::GRAY.into(),
style: Style { style: Style {
size: Size::new(Val::Px(180.0), Val::Px(100.0)), size: Size::new(Val::Px(180.0), Val::Px(100.0)),
margin: UiRect::all(Val::Auto),
..default() ..default()
}, },
..default() ..default()
@ -120,4 +130,5 @@ fn setup(mut commands: Commands) {
..default() ..default()
}); });
}); });
});
} }