From eb67c810592c47467c91699683ccc3711a7dafa4 Mon Sep 17 00:00:00 2001 From: ickshonpe Date: Wed, 16 Oct 2024 17:47:11 +0100 Subject: [PATCH] Add shadows to `ui` example (#15952) # Objective Add some shadows to the stacked nodes in the ui example. ## Showcase ui-shadows --- examples/ui/ui.rs | 125 ++++++++++++++++++++++++++++------------------ 1 file changed, 76 insertions(+), 49 deletions(-) diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs index eee107d164..74c2153460 100644 --- a/examples/ui/ui.rs +++ b/examples/ui/ui.rs @@ -31,7 +31,7 @@ fn main() { fn setup(mut commands: Commands, asset_server: Res) { // 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) { ..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) { .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)