bevy/examples/ui
Alice Cecile 145f5f4394
Add a simple directional UI navigation example (#17224)
# Objective

Gamepad / directional navigation needs an example, for both teaching and
testing purposes.

## Solution

- Add a simple grid-based example.
- Fix an intermittent panic caused by a race condition with bevy_a11y
- Clean up small issues noticed in bevy_input_focus


![image](https://github.com/user-attachments/assets/3a924255-0cd6-44a5-9bb7-b2c400a22d7e)

## To do: this PR

- [x] figure out why "enter" isn't doing anything
- [x] change button color on interaction rather than printing
- [x] add on-screen directions
- [x] move to an asymmetric grid to catch bugs
- [x] ~~fix colors not resetting on button press~~ lol this is mostly
just a problem with hacking `Interaction` for this
- [x] swap to using observers + bubbling, rather than `Interaction`

## To do: future work

- when I increase the button size, such that there is no line break, the
text on the buttons is no longer centered :( EDIT: this is
https://github.com/bevyengine/bevy/issues/16783
- add gamepad stick navigation
- add tools to find the nearest populated quadrant to make diagonal
inputs work
- add a `add_edges` method to `DirectionalNavigationMap`
- add a `add_grid` method to `DirectionalNavigationMap`
- make the example's layout more complex and realistic
- add tools to automatically generate this list
- add button shake on failed navigation rather than printing an error
- make Pressed events easier to mock: default fields, PointerId::Focus

## Testing

`cargo run --example directional_navigation`

---------

Co-authored-by: Rob Parrett <robparrett@gmail.com>
2025-01-09 21:15:28 +00:00
..
borders.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
box_shadow.rs Rename UiBoxShadowSamples to BoxShadowSamples. (#16505) 2024-12-03 19:43:26 +00:00
button.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
directional_navigation.rs Add a simple directional UI navigation example (#17224) 2025-01-09 21:15:28 +00:00
display_and_visibility.rs Add Immutable Component Support (#16372) 2024-12-05 14:27:48 +00:00
flex_layout.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
font_atlas_debug.rs UiImage -> ImageNode, UiImageSize -> ImageNodeSize (#16271) 2024-11-07 21:52:58 +00:00
ghost_nodes.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
grid.rs Use en-us locale for typos (#16037) 2024-10-20 18:55:17 +00:00
overflow_clip_margin.rs UiImage -> ImageNode, UiImageSize -> ImageNodeSize (#16271) 2024-11-07 21:52:58 +00:00
overflow_debug.rs Only use physical coords internally in bevy_ui (#16375) 2024-11-22 00:45:07 +00:00
overflow.rs UiImage -> ImageNode, UiImageSize -> ImageNodeSize (#16271) 2024-11-07 21:52:58 +00:00
relative_cursor_position.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
render_ui_to_texture.rs Support scale factor for image render targets (#16796) 2024-12-17 20:21:40 +00:00
scroll.rs Rename "focus" in bevy_picking to "hover" (#16872) 2024-12-24 06:22:13 +00:00
size_constraints.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
tab_navigation.rs Tab navigation framework for bevy_input_focus. (#16795) 2024-12-16 23:54:53 +00:00
text_debug.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
text_wrap_debug.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
text.rs UI/text Example - Clarity Improvements (#16302) 2024-11-09 23:50:14 +00:00
transparency_ui.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
ui_material.rs Fix red background in ui_material example (#15978) 2024-10-20 01:08:17 +00:00
ui_scaling.rs Remove everything except Instant from bevy_utils::time (#17158) 2025-01-05 20:36:08 +00:00
ui_texture_atlas_slice.rs BorderRect maintenance (#16727) 2024-12-12 04:33:44 +00:00
ui_texture_atlas.rs UiImage -> ImageNode, UiImageSize -> ImageNodeSize (#16271) 2024-11-07 21:52:58 +00:00
ui_texture_slice_flip_and_tile.rs BorderRect maintenance (#16727) 2024-12-12 04:33:44 +00:00
ui_texture_slice.rs BorderRect maintenance (#16727) 2024-12-12 04:33:44 +00:00
viewport_debug.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
window_fallthrough.rs Merge Style properties into Node. Use ComputedNode for computed properties. (#15975) 2024-10-18 22:25:33 +00:00
z_index.rs Updated comment: ZIndex::Local(0) -> ZIndex(0). (#16585) 2024-12-01 20:09:09 +00:00