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

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>) {
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 {
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
@ -64,6 +74,7 @@ fn setup_menu(mut commands: Commands, asset_server: Res<AssetServer>) {
color: Color::rgb(0.9, 0.9, 0.9),
},
));
});
})
.id();
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
.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()

128
examples/games/game_menu.rs
View File

@ -81,20 +81,30 @@ mod splash {
fn splash_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
let icon = asset_server.load("branding/icon.png");
// Display the logo
commands.spawn((
ImageBundle {
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()
},
OnSplashScreen,
))
.with_children(|parent| {
parent.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),
..default()
},
image: UiImage::new(icon),
..default()
},
OnSplashScreen,
));
});
});
// Insert the timer as a resource
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");
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),
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
// 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
flex_direction: FlexDirection::Column,
// `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(),
..default()
},
OnGameScreen,
))
})
.with_children(|parent| {
// Display two lines of text, the second one with the current settings
parent.spawn(
@ -214,6 +234,7 @@ mod game {
}),
);
});
});
// Spawn a 5 seconds timer to trigger going back to the menu
commands.insert_resource(GameTimer(Timer::from_seconds(5.0, TimerMode::Once)));
}
@ -418,16 +439,26 @@ mod menu {
.spawn((
NodeBundle {
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,
align_items: AlignItems::Center,
..default()
},
background_color: Color::CRIMSON.into(),
..default()
},
OnMainMenuScreen,
))
})
.with_children(|parent| {
// Display the game name
parent.spawn(
@ -510,6 +541,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Quit", button_text_style));
});
});
});
}
fn settings_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
@ -531,16 +563,26 @@ mod menu {
.spawn((
NodeBundle {
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,
align_items: AlignItems::Center,
..default()
},
background_color: Color::CRIMSON.into(),
..default()
},
OnSettingsMenuScreen,
))
})
.with_children(|parent| {
for (action, text) in [
(MenuButtonAction::SettingsDisplay, "Display"),
@ -557,10 +599,14 @@ mod menu {
action,
))
.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(
@ -585,16 +631,26 @@ mod menu {
.spawn((
NodeBundle {
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,
align_items: AlignItems::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.
@ -652,6 +708,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Back", button_text_style));
});
});
});
}
fn sound_settings_menu_setup(
@ -676,16 +733,26 @@ mod menu {
.spawn((
NodeBundle {
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,
align_items: AlignItems::Center,
..default()
},
background_color: Color::CRIMSON.into(),
..default()
},
OnSoundSettingsMenuScreen,
))
})
.with_children(|parent| {
parent
.spawn(NodeBundle {
@ -729,6 +796,7 @@ mod menu {
parent.spawn(TextBundle::from_section("Back", button_text_style));
});
});
});
}
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
commands.spawn(Camera2dBundle::default());
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 {
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
@ -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");
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 {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..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,
// to demonstrate the text looks different due to its transparency.
commands
parent
.spawn(ButtonBundle {
style: Style {
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
margin: UiRect::all(Val::Auto),
justify_content: JustifyContent::Center,
align_items: AlignItems::Center,
..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)`.
// because this is a root UI node, using local or global values will do the same thing.
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 {
background_color: Color::GRAY.into(),
style: Style {
size: Size::new(Val::Px(180.0), Val::Px(100.0)),
margin: UiRect::all(Val::Auto),
..default()
},
..default()
@ -120,4 +130,5 @@ fn setup(mut commands: Commands) {
..default()
});
});
});
}