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

# Objective Fixes bevyengine#6498. ## Solution Adding a parent node with properties AlignItems::Center and JustifyContent::Center to centered child nodes and removing their auto-margin properties.
taiyoungjang · Dec 15, 2022 · b5eb147 · b5eb147
1 parent 1beea71
commit b5eb147
Show file tree

Hide file tree

Showing 6 changed files with 499 additions and 377 deletions.
diff --git 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<AssetServer>) {
     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
@@ -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()