Mirrors/bevy
2
0
Fork 0
mirror of https://github.com/bevyengine/bevy synced 2025-02-16 14:08:32 +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>) { fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
// Camera // Camera
commands.spawn((Camera2d, IsDefaultUiCamera)); commands.spawn((Camera2d, IsDefaultUiCamera, UiBoxShadowSamples(6)));
// root node // root node
commands commands
@ -191,6 +191,15 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
..default() ..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) // render order test: reddest in the back, whitest in the front (flex center)
parent parent
.spawn(NodeBundle { .spawn(NodeBundle {
@ -207,66 +216,84 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
.insert(PickingBehavior::IGNORE) .insert(PickingBehavior::IGNORE)
.with_children(|parent| { .with_children(|parent| {
parent parent
.spawn(NodeBundle { .spawn((
style: Style { NodeBundle {
width: Val::Px(100.0), style: Style {
height: Val::Px(100.0), width: Val::Px(100.0),
height: Val::Px(100.0),
..default()
},
background_color: Color::srgb(1.0, 0.0, 0.).into(),
..default() ..default()
}, },
background_color: Color::srgb(1.0, 0.0, 0.).into(), shadow,
..default() ))
})
.with_children(|parent| { .with_children(|parent| {
parent.spawn(NodeBundle { parent.spawn((
style: Style { NodeBundle {
// Take the size of the parent node. style: Style {
width: Val::Percent(100.0), // Take the size of the parent node.
height: Val::Percent(100.0), width: Val::Percent(100.0),
position_type: PositionType::Absolute, height: Val::Percent(100.0),
left: Val::Px(20.), position_type: PositionType::Absolute,
bottom: Val::Px(20.), left: Val::Px(20.),
bottom: Val::Px(20.),
..default()
},
background_color: Color::srgb(1.0, 0.3, 0.3).into(),
..default() ..default()
}, },
background_color: Color::srgb(1.0, 0.3, 0.3).into(), shadow,
..default() ));
}); parent.spawn((
parent.spawn(NodeBundle { NodeBundle {
style: Style { style: Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(40.), left: Val::Px(40.),
bottom: Val::Px(40.), bottom: Val::Px(40.),
..default()
},
background_color: Color::srgb(1.0, 0.5, 0.5).into(),
..default() ..default()
}, },
background_color: Color::srgb(1.0, 0.5, 0.5).into(), shadow,
..default() ));
}); parent.spawn((
parent.spawn(NodeBundle { NodeBundle {
style: Style { style: Style {
width: Val::Percent(100.0), width: Val::Percent(100.0),
height: Val::Percent(100.0), height: Val::Percent(100.0),
position_type: PositionType::Absolute, position_type: PositionType::Absolute,
left: Val::Px(60.), left: Val::Px(60.),
bottom: Val::Px(60.), bottom: Val::Px(60.),
..default()
},
background_color: Color::srgb(0.0, 0.7, 0.7).into(),
..default() ..default()
}, },
background_color: Color::srgb(1.0, 0.7, 0.7).into(), shadow,
..default() ));
});
// alpha test // alpha test
parent.spawn(NodeBundle { parent.spawn((
style: Style { NodeBundle {
width: Val::Percent(100.0), style: Style {
height: Val::Percent(100.0), width: Val::Percent(100.0),
position_type: PositionType::Absolute, height: Val::Percent(100.0),
left: Val::Px(80.), position_type: PositionType::Absolute,
bottom: Val::Px(80.), left: Val::Px(80.),
bottom: Val::Px(80.),
..default()
},
background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(),
..default() ..default()
}, },
background_color: Color::srgba(1.0, 0.9, 0.9, 0.4).into(), BoxShadow {
..default() color: Color::BLACK.with_alpha(0.3),
}); ..shadow
},
));
}); });
}); });
// bevy logo (flex center) // bevy logo (flex center)