Draw the UI debug overlay using the UI renderer by ickshonpe · Pull Request #16693 · bevyengine/bevy

ickshonpe · 2024-12-06T20:18:04Z

Objective

Draw the UI debug overlay using the UI renderer.

Significantly simpler and easier to use than bevy_dev_tools::ui_debug_overlay which uses bevy_gizmos.

Supports multiple windows and UI rendered to texture.
Draws rounded debug rects for rounded UI nodes.

Fixes #16666

Solution

Removed the ui_debug_overlay module from bevy_dev_tools.

Added a bevy_ui_debug feature gate.

Draw the UI debug overlay using the UI renderer.
Adds a new module bevy_ui::render::debug_overlay.

The debug overlay extraction function queries for the existing UI layout and then adds a border around each UI node with u32::MAX / 2 added to each stack index so it's drawn on top.

There is a UiDebugOptions resource that can be used to enable or disable the debug overlay and set the line width.

Testing

The testbed_ui example has been changed to use the new debug overlay:

cargo run --example testbed_ui --features bevy_ui_debug

Press Space to toggle the debug overlay on and off.

Showcase

Migration Guide

The ui_debug_overlay module has been removed from bevy_dev_tools.
There is a new debug overlay implemented using the bevy_ui renderer. To use it, enable the bevy_ui_debug feature and set the enable field of the UiDebugOptions resource to true.

* Added `UiDebugOptions` resource that can be used to enable or disable the debug overlay and set the line width. * New `extract_debug_overlay` system that extracts the node geometry for rendering.

crates/bevy_ui/src/render/debug_overlay.rs

JMS55 · 2024-12-06T20:42:10Z

Can we get a rounded node in the example to ensure we don't break this later?

ickshonpe · 2024-12-06T20:45:27Z

Can we get a rounded node in the example to ensure we don't break this later?

The rotated bevy logo in the bottom left has a rounded debug outline (the blue outline).

JMS55 · 2024-12-06T20:49:16Z

Oh I missed that 😅

github-actions · 2024-12-07T00:18:58Z

It looks like your PR is a breaking change, but you didn't provide a migration guide.

Could you add some context on what users should update when this change get released in a new version of Bevy?
It will be used to help writing the migration guide for the version. Putting it after a ## Migration Guide will help it get automatically picked up by our tooling.

alice-i-cecile

This is a much simpler and more reliable way to do this: I really prefer it. That said, we should clean up and remove the old approach in this PR, and write a migration guide.

I don't feel strongly about "where should this live": bevy_dev_tools is in a weird spot currently, but if this lives in bevy_ui we should probably feature flag it.

ickshonpe · 2024-12-07T11:20:28Z

This is a much simpler and more reliable way to do this: I really prefer it. That said, we should clean up and remove the old approach in this PR, and write a migration guide.

I don't feel strongly about "where should this live": bevy_dev_tools is in a weird spot currently, but if this lives in bevy_ui we should probably feature flag it.

It seems to me that bevy_dev_tools should be more for more general profiling and testing features which are going to be useful for any Bevy application. The UI debug overlay is UI specific so it belongs in the UI crate imo.

…nto ui-debug-render

* Added `toggle` method to the `UiDebugOptions` resource struct. * Updated `testbed_ui` example to use the new overlay.

github-actions · 2024-12-07T14:09:43Z

You added a new feature but didn't update the readme. Please run cargo run -p build-templated-pages -- update features to update it, and commit the file change.

github-actions · 2024-12-07T14:51:25Z

You added a new feature but didn't update the readme. Please run cargo run -p build-templated-pages -- update features to update it, and commit the file change.

JeanMertz · 2024-12-10T20:06:01Z

I backported and tested this on the 0.15 release. Works beautifully.

alice-i-cecile · 2024-12-10T20:28:39Z

@ickshonpe I'm going to count that as a second approval. Ping me when this is up to date with main please :)

ickshonpe · 2024-12-10T23:23:34Z

@alice-i-cecile should be ready now. We're just ignoring the failing check-advisories CI for the moment?

alice-i-cecile · 2024-12-11T00:49:42Z

Yeah, it's blocked on an upstream fix :(

# Objective Draw the UI debug overlay using the UI renderer. Significantly simpler and easier to use than `bevy_dev_tools::ui_debug_overlay` which uses `bevy_gizmos`. * Supports multiple windows and UI rendered to texture. * Draws rounded debug rects for rounded UI nodes. Fixes bevyengine#16666 ## Solution Removed the `ui_debug_overlay` module from `bevy_dev_tools`. Added a `bevy_ui_debug` feature gate. Draw the UI debug overlay using the UI renderer. Adds a new module `bevy_ui::render::debug_overlay`. The debug overlay extraction function queries for the existing UI layout and then adds a border around each UI node with `u32::MAX / 2` added to each stack index so it's drawn on top. There is a `UiDebugOptions` resource that can be used to enable or disable the debug overlay and set the line width. ## Testing The `testbed_ui` example has been changed to use the new debug overlay: ``` cargo run --example testbed_ui --features bevy_ui_debug ``` Press Space to toggle the debug overlay on and off. --- ## Showcase <img width="961" alt="testbed-ui-new-debug" src="https://github.com/user-attachments/assets/e9523d18-39ae-46a8-adbe-7d3f3ab8e951"> ## Migration Guide The `ui_debug_overlay` module has been removed from `bevy_dev_tools`. There is a new debug overlay implemented using the `bevy_ui` renderer. To use it, enable the `bevy_ui_debug` feature and set the `enable` field of the `UiDebugOptions` resource to `true`.

ickshonpe added 2 commits December 6, 2024 19:36

added debug module to bevy_ui/render

3497271

* Renamed debug module to debug_overlay.

f403613

* Added `UiDebugOptions` resource that can be used to enable or disable the debug overlay and set the line width. * New `extract_debug_overlay` system that extracts the node geometry for rendering.

ickshonpe changed the title ~~Alternative UI debug overlay rendering~~ Draw the UI debug overlay using the UI renderer Dec 6, 2024

BenjaminBrienen reviewed Dec 6, 2024

View reviewed changes

crates/bevy_ui/src/render/debug_overlay.rs Outdated Show resolved Hide resolved

alice-i-cecile requested changes Dec 7, 2024

View reviewed changes

ickshonpe added 3 commits December 7, 2024 11:20

Merge branch 'main' into ui-debug-render

cd6fc2d

Added comments to the extracted overlay node's insertion.

398e862

Merge branch 'ui-debug-render' of https://github.com/ickshonpe/bevy i…

1773f6d

…nto ui-debug-render

ickshonpe mentioned this pull request Dec 7, 2024

Fix scaling for UI debug overlay #16669

Closed

ickshonpe added 7 commits December 7, 2024 12:49

* Removed the ui_debug_ovelay module from the bevy_dev_tools.

541832b

* Added `toggle` method to the `UiDebugOptions` resource struct. * Updated `testbed_ui` example to use the new overlay.

Removed unneeded dependencies

3059680

Removed more unneeded deps

1b40ed0

Added bevy_ui_debug_overlay feature gate

2d8aa9c

Use a smaller font for the enable feature prompt to avoid overflow.

a20201a

Added back removed bevy_window dependency

3dbbf80

Renamed the bevy_ui_debug_overlay feature to bevy_ui_debug

0c5d633

Renamed feature to "bevy_ui_debug"

cc68bd2

build-templated-pages

713146c

ickshonpe added the S-Needs-Review Needs reviewer attention (from anyone!) to move forward label Dec 7, 2024

ickshonpe removed the S-Waiting-on-Author The author needs to make changes or address concerns before this can be merged label Dec 7, 2024

Merge branch 'main' into ui-debug-render

de86e94

alice-i-cecile approved these changes Dec 9, 2024

View reviewed changes

alice-i-cecile requested review from BenjaminBrienen and coreh December 9, 2024 18:50

alice-i-cecile added S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it and removed S-Needs-Review Needs reviewer attention (from anyone!) to move forward labels Dec 10, 2024

ickshonpe added 2 commits December 10, 2024 23:03

Merge branch 'main' into ui-debug-render

0e93d4d

Added doc comments for UiDebugOptions

df2fa77

alice-i-cecile added this pull request to the merge queue Dec 11, 2024

Merged via the queue into bevyengine:main with commit 9098973 Dec 11, 2024

rparrett mentioned this pull request Dec 11, 2024

BorderRect maintenance #16727

Merged

janis-bhm mentioned this pull request Sep 16, 2025

Missing migration: bevy::ui::UiDebugOptions is no longer accessible via that path #21036

Closed

Uh oh!

Conversation

ickshonpe commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Objective

Solution

Testing

Showcase

Migration Guide

Uh oh!

Uh oh!

JMS55 commented Dec 6, 2024

Uh oh!

ickshonpe commented Dec 6, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JMS55 commented Dec 6, 2024

Uh oh!

github-actions bot commented Dec 7, 2024

Uh oh!

alice-i-cecile left a comment

Choose a reason for hiding this comment

Uh oh!

ickshonpe commented Dec 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 7, 2024

Uh oh!

github-actions bot commented Dec 7, 2024

Uh oh!

JeanMertz commented Dec 10, 2024

Uh oh!

alice-i-cecile commented Dec 10, 2024

Uh oh!

ickshonpe commented Dec 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alice-i-cecile commented Dec 11, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ickshonpe commented Dec 6, 2024 •

edited

Loading

ickshonpe commented Dec 6, 2024 •

edited

Loading

ickshonpe commented Dec 7, 2024 •

edited

Loading

ickshonpe commented Dec 10, 2024 •

edited

Loading