Skip to content

Commit

Permalink
box shadow (#15204)
Browse files Browse the repository at this point in the history
# Objective

UI box shadow support

Adds a new component `BoxShadow`:

```rust
pub struct BoxShadow {
    /// The shadow's color
    pub color: Color,
    /// Horizontal offset
    pub x_offset: Val,
    /// Vertical offset
    pub y_offset: Val,
    /// Horizontal difference in size from the occluding uninode
    pub spread_radius: Val,
    /// Blurriness of the shadow
    pub blur_radius: Val,
}
```

To use `BoxShadow`, add the component to any Bevy UI node and a shadow
will be drawn beneath that node.
Also adds a resource `BoxShadowSamples` that can be used to adjust the
shadow quality.

#### Notes
* I'm not super happy with the field names. Maybe we need a `struct Size
{ width: Val, height: Val }` type or something.
* The shader isn't very optimised but I don't see that it's too
important for now as the number of shadows being rendered is not going
to be massive most of the time. I think it's more important to get the
API and geometry correct with this PR.
* I didn't implement an inset property, it's not essential and can
easily be added in a follow up.
* Shadows are only rendered for uinodes, not for images or text.
* Batching isn't supported, it would need out-of-the-scope-of-this-pr
changes to the way the UI handles z-ordering for it to be effective.

# Showcase

```cargo run --example box_shadow -- --samples 4```

<img width="391" alt="br" src="https://github.com/user-attachments/assets/4e8add96-dc93-46e0-9e35-d995eb0943ad">

```cargo run --example box_shadow -- --samples 10```

<img width="391" alt="s10"
src="https://github.com/user-attachments/assets/ecb384c9-4012-4cd6-9dea-5180904bf28e">
  • Loading branch information
ickshonpe authored Oct 8, 2024
1 parent f1fbb66 commit 99b9a2f
Show file tree
Hide file tree
Showing 8 changed files with 984 additions and 3 deletions.
11 changes: 11 additions & 0 deletions Cargo.toml
Original file line number Diff line number Diff line change
Expand Up @@ -2896,6 +2896,17 @@ description = "Demonstrates how to create a node with a border"
category = "UI (User Interface)"
wasm = true

[[example]]
name = "box_shadow"
path = "examples/ui/box_shadow.rs"
doc-scrape-examples = true

[package.metadata.example.box_shadow]
name = "Box Shadow"
description = "Demonstrates how to create a node with a shadow"
category = "UI (User Interface)"
wasm = true

[[example]]
name = "button"
path = "examples/ui/button.rs"
Expand Down
1 change: 1 addition & 0 deletions crates/bevy_ui/src/lib.rs
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ impl Plugin for UiPlugin {
.register_type::<widget::Label>()
.register_type::<ZIndex>()
.register_type::<Outline>()
.register_type::<UiBoxShadowSamples>()
.configure_sets(
PostUpdate,
(
Expand Down
Loading

0 comments on commit 99b9a2f

Please sign in to comment.