mirror of
https://github.com/bevyengine/bevy
synced 2024-11-24 21:53:07 +00:00
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:
parent
396aff906e
commit
eb67c81059
1 changed files with 76 additions and 49 deletions
|
@ -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)
|
||||
|
|
Loading…
Reference in a new issue