Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2024-11-21 12:13:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add shadows to ui example (#15952)

Browse source 
# 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
1 changed files with 76 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

125
examples/ui/ui.rs
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,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)