bevy/examples/ui
Pablo Reinhardt 1af9bc853b
Add a gizmo-based overlay to show UI node outlines (Adopted) (#11237)
# Objective

- This is an adopted version of #10420
- The objective is to help debugging the Ui layout tree with helpful
outlines, that can be easily enabled/disabled

## Solution

- Like #10420, the solution is using the bevy_gizmos in outlining the
nodes

---

## Changelog

### Added
- Added debug_overlay mod to `bevy_dev_tools`
- Added bevy_ui_debug feature to `bevy_dev_tools`

## How to use
- The user must use `bevy_dev_tools` feature in TOML
- The user must use the plugin UiDebugPlugin, that can be found on
`bevy::dev_tools::debug_overlay`
- Finally, to enable the function, the user must set
`UiDebugOptions::enabled` to true
Someone can easily toggle the function with something like:

```rust
fn toggle_overlay(input: Res<ButtonInput<KeyCode>>, options: ResMut<UiDebugOptions>) {
   if input.just_pressed(KeyCode::Space) {
      // The toggle method will enable if disabled and disable if enabled
      options.toggle();
   }
}
```

Note that this feature can be disabled from dev_tools, as its in fact
behind a default feature there, being the feature bevy_ui_debug.

# Limitations
Currently, due to limitations with gizmos itself, it's not possible to
support this feature to more the one window, so this tool is limited to
the primary window only.

# Showcase


![image](https://github.com/bevyengine/bevy/assets/126117294/ce9d70e6-0a57-4fa9-9753-ff5a9d82c009)
Ui example with debug_overlay enabled


![image](https://github.com/bevyengine/bevy/assets/126117294/e945015c-5bab-4d7f-9273-472aabaf25a9)
And disabled

---------

Co-authored-by: Nicola Papale <nico@nicopap.ch>
Co-authored-by: Pablo Reinhardt <pabloreinhardt@gmail.com>
Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>
2024-03-18 18:11:06 +00:00
..
borders.rs Fix "dark grey" colors becoming lighter in various examples (#12333) 2024-03-06 05:19:59 +00:00
button.rs Decouple BackgroundColor from UiImage (#11165) 2024-03-03 21:35:50 +00:00
display_and_visibility.rs Decouple BackgroundColor from UiImage (#11165) 2024-03-03 21:35:50 +00:00
flex_layout.rs Fix "dark grey" colors becoming lighter in various examples (#12333) 2024-03-06 05:19:59 +00:00
font_atlas_debug.rs make example font_atlas_debug deterministic with a seeded random (#12519) 2024-03-17 21:11:25 +00:00
grid.rs Fix pink colors in examples (#12451) 2024-03-18 17:44:46 +00:00
overflow.rs Fix "dark grey" colors becoming lighter in various examples (#12333) 2024-03-06 05:19:59 +00:00
overflow_debug.rs Fix "dark grey" colors becoming lighter in various examples (#12333) 2024-03-06 05:19:59 +00:00
relative_cursor_position.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
render_ui_to_texture.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
size_constraints.rs Decouple BackgroundColor from UiImage (#11165) 2024-03-03 21:35:50 +00:00
text.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
text_debug.rs Fix green colors becoming darker in various examples (#12328) 2024-03-05 23:42:03 +00:00
text_wrap_debug.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
transparency_ui.rs Decouple BackgroundColor from UiImage (#11165) 2024-03-03 21:35:50 +00:00
ui.rs Add a gizmo-based overlay to show UI node outlines (Adopted) (#11237) 2024-03-18 18:11:06 +00:00
ui_material.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
ui_scaling.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
ui_texture_atlas.rs Decouple BackgroundColor from UiImage (#11165) 2024-03-03 21:35:50 +00:00
ui_texture_atlas_slice.rs Slicing support for texture atlas (#12059) 2024-03-05 16:05:39 +00:00
ui_texture_slice.rs Slicing support for texture atlas (#12059) 2024-03-05 16:05:39 +00:00
viewport_debug.rs Fix green colors becoming darker in various examples (#12328) 2024-03-05 23:42:03 +00:00
window_fallthrough.rs Migrate from LegacyColor to bevy_color::Color (#12163) 2024-02-29 19:35:12 +00:00
z_index.rs Fix green colors becoming darker in various examples (#12328) 2024-03-05 23:42:03 +00:00