Add shadows to ui example (#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">
This commit is contained in:
ickshonpe 2024-10-16 17:47:11 +01:00 committed by GitHub
parent 396aff906e
commit eb67c81059
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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,7 +216,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
.insert(PickingBehavior::IGNORE)
.with_children(|parent| {
parent
.spawn(NodeBundle {
.spawn((
NodeBundle {
style: Style {
width: Val::Px(100.0),
height: Val::Px(100.0),
@ -215,9 +225,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
background_color: Color::srgb(1.0, 0.0, 0.).into(),
..default()
})
},
shadow,
))
.with_children(|parent| {
parent.spawn(NodeBundle {
parent.spawn((
NodeBundle {
style: Style {
// Take the size of the parent node.
width: Val::Percent(100.0),
@ -229,8 +242,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
background_color: Color::srgb(1.0, 0.3, 0.3).into(),
..default()
});
parent.spawn(NodeBundle {
},
shadow,
));
parent.spawn((
NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
@ -241,8 +257,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
background_color: Color::srgb(1.0, 0.5, 0.5).into(),
..default()
});
parent.spawn(NodeBundle {
},
shadow,
));
parent.spawn((
NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
@ -251,11 +270,14 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
bottom: Val::Px(60.),
..default()
},
background_color: Color::srgb(1.0, 0.7, 0.7).into(),
background_color: Color::srgb(0.0, 0.7, 0.7).into(),
..default()
});
},
shadow,
));
// alpha test
parent.spawn(NodeBundle {
parent.spawn((
NodeBundle {
style: Style {
width: Val::Percent(100.0),
height: Val::Percent(100.0),
@ -266,7 +288,12 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
},
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)