Add shadows to ui example (bevyengine#15952)

# Objective Add some shadows to the stacked nodes in the ui example. ## Showcase <img width="565" alt="ui-shadows" src="https://github.com/user-attachments/assets/fc5d3c64-0fa6-4378-821e-a1bcbca641d9">
VitalyAnkh · Oct 16, 2024 · eb67c81 · eb67c81
1 parent 396aff9
commit eb67c81
Showing 1 changed file with 76 additions and 49 deletions.
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
@@ -31,7 +31,7 @@ fn main() {
 
 fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
     // Camera
-    commands.spawn((Camera2d, IsDefaultUiCamera));
+    commands.spawn((Camera2d, IsDefaultUiCamera, UiBoxShadowSamples(6)));
 
     // root node
     commands
@@ -191,6 +191,15 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         ..default()
                     });
                 });
+
+            let shadow = BoxShadow {
+                color: Color::BLACK.with_alpha(0.5),
+                blur_radius: Val::Px(2.),
+                x_offset: Val::Px(10.),
+                y_offset: Val::Px(10.),
+                ..Default::default()
+            };
+
             // render order test: reddest in the back, whitest in the front (flex center)
             parent
                 .spawn(NodeBundle {
@@ -207,66 +216,84 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .insert(PickingBehavior::IGNORE)
                 .with_children(|parent| {
                     parent
-                        .spawn(NodeBundle {
-                            style: Style {
-                                width: Val::Px(100.0),
-                                height: Val::Px(100.0),
+                        .spawn((
+                            NodeBundle {
+                                style: Style {
+                                    width: Val::Px(100.0),
+                                    height: Val::Px(100.0),
+                                    ..default()
+                                },
+                                background_color: Color::srgb(1.0, 0.0, 0.).into(),
                                 ..default()
                             },
-                            background_color: Color::srgb(1.0, 0.0, 0.).into(),
-                            ..default()
-                        })
+                            shadow,
+                        ))
                         .with_children(|parent| {
-                            parent.spawn(NodeBundle {
-                                style: Style {
-                                    // Take the size of the parent node.
-                                    width: Val::Percent(100.0),
-                                    height: Val::Percent(100.0),
-                                    position_type: PositionType::Absolute,
-                                    left: Val::Px(20.),
-                                    bottom: Val::Px(20.),
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        // Take the size of the parent node.
+                                        width: Val::Percent(100.0),
+                                        height: Val::Percent(100.0),
+                                        position_type: PositionType::Absolute,
+                                        left: Val::Px(20.),
+                                        bottom: Val::Px(20.),
+                                        ..default()
+                                    },
+                                    background_color: Color::srgb(1.0, 0.3, 0.3).into(),
                                     ..default()
                                 },
-                                background_color: Color::srgb(1.0, 0.3, 0.3).into(),
-                                ..default()
-                            });
-                            parent.spawn(NodeBundle {
-                                style: Style {
-                                    width: Val::Percent(100.0),
-                                    height: Val::Percent(100.0),
-                                    position_type: PositionType::Absolute,
-                                    left: Val::Px(40.),
-                                    bottom: Val::Px(40.),
+                                shadow,
+                            ));
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        width: Val::Percent(100.0),
+                                        height: Val::Percent(100.0),
+                                        position_type: PositionType::Absolute,
+                                        left: Val::Px(40.),
+                                        bottom: Val::Px(40.),
+                                        ..default()
+                                    },
+                                    background_color: Color::srgb(1.0, 0.5, 0.5).into(),
                                     ..default()
                                 },
-                                background_color: Color::srgb(1.0, 0.5, 0.5).into(),
-                                ..default()
-                            });
-                            parent.spawn(NodeBundle {
-                                style: Style {
-                                    width: Val::Percent(100.0),
-                                    height: Val::Percent(100.0),
-                                    position_type: PositionType::Absolute,
-                                    left: Val::Px(60.),
-                                    bottom: Val::Px(60.),
+                                shadow,
+                            ));
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        width: Val::Percent(100.0),
+                                        height: Val::Percent(100.0),
+                                        position_type: PositionType::Absolute,
+                                        left: Val::Px(60.),
+                                        bottom: Val::Px(60.),
+                                        ..default()
+                                    },
+                                    background_color: Color::srgb(0.0, 0.7, 0.7).into(),
                                     ..default()
                                 },
-                                background_color: Color::srgb(1.0, 0.7, 0.7).into(),
-                                ..default()
-                            });
+                                shadow,
+                            ));
                             // alpha test
-                            parent.spawn(NodeBundle {
-                                style: Style {
-                                    width: Val::Percent(100.0),
-                                    height: Val::Percent(100.0),
-                                    position_type: PositionType::Absolute,
-                                    left: Val::Px(80.),
-                                    bottom: Val::Px(80.),
+                            parent.spawn((
+                                NodeBundle {
+                                    style: Style {
+                                        width: Val::Percent(100.0),
+                                        height: Val::Percent(100.0),
+                                        position_type: PositionType::Absolute,
+                                        left: Val::Px(80.),
+                                        bottom: Val::Px(80.),
+                                        ..default()
+                                    },
+                                    background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
                                     ..default()
                                 },
-                                background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
-                                ..default()
-                            });
+                                BoxShadow {
+                                    color: Color::BLACK.with_alpha(0.3),
+                                    ..shadow
+                                },
+                            ));
                         });
                 });
             // bevy logo (flex center)