bevy/docs
ickshonpe 9098973fb9
Draw the UI debug overlay using the UI renderer (#16693)
# 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

<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`.
2024-12-11 00:49:47 +00:00
..
cargo_features.md Draw the UI debug overlay using the UI renderer (#16693) 2024-12-11 00:49:47 +00:00
debugging.md Replace the wgpu_trace feature with a field in bevy_render::settings::WgpuSettings (#14842) 2024-08-25 14:16:11 +00:00
linters.md ✏️ Fix typos across bevy (#16702) 2024-12-08 01:18:39 +00:00
linux_dependencies.md Note on compiling on FreeBSD (#15232) 2024-09-16 23:18:14 +00:00
profiling.md Improve profiling instructions (#16299) 2024-12-05 18:41:58 +00:00