Add a simple directional UI navigation example#17224

Merged

alice-i-cecile merged 20 commits intobevyengine:mainfrom

alice-i-cecile:directional-navigation-example

Jan 9, 2025

Member

alice-i-cecile commented Jan 7, 2025 •

edited

Loading

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

To do: this PR

figure out why "enter" isn't doing anything
change button color on interaction rather than printing
add on-screen directions
move to an asymmetric grid to catch bugs
~~fix colors not resetting on button press~~ lol this is mostly just a problem with hacking Interaction for this
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 Text2d and TextSpan is not center-aligned when JustifyText::Center is specified. #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

alice-i-cecile added 3 commits

January 7, 2025 13:49


          Clean up resource intialization for bevy_input_focus

4e60312


          Defensive programming for bevy_a11y

0ea0c0e

thread 'main' panicked at C:\Users\alice\.cargo\registry\src\index.crates.io-Panic was: 6f17d22bba15001f\accesskit_consumer-0.26.0\src\tree.rs:34:13:
Focused id #4294967304 is not in the node list


          Add simple directional navigation example

8486f53

alice-i-cecile added C-Bug C-Examples A-Input A-Accessibility A-UI labels

rparrett self-requested a review

January 7, 2025 22:51

Contributor

github-actions bot commented Jan 7, 2025

The generated examples/README.md is out of sync with the example metadata in Cargo.toml or the example readme template. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.


          Update examples README

c4a4de8

cargo run -p build-templated-pages -- update examples

alice-i-cecile added this to the 0.16 milestone

alice-i-cecile added the S-Waiting-on-Author label


          Add Debug derive

d275867

rparrett mentioned this pull request

window_settings example crashes on startup #17227

Closed

rparrett added 2 commits

January 8, 2025 06:23


          Fix centering of buttons and their contents

81de2de


          Fix enter button

56c50d0

Contributor

rparrett commented Jan 8, 2025

Sent a couple tiny PRs your way

rparrett and others added 5 commits

January 8, 2025 07:17


          Change background color instead of printing

aba7a49


          Merge pull request #172 from rparrett/directional-navigation-centering

fe87b6e

Fix centering of buttons and their contents


          Merge pull request #173 from rparrett/directional-navigation-enter-bu…

96eb167

…tton

Fix enter button and change background color instead of printing


          Clippy

adb4508


          More rows

alice-i-cecile changed the title ~~Add a simple directional navigation example~~ Add a simple directional UI navigation example

alice-i-cecile added 4 commits

January 8, 2025 12:45


          Add instructions

b2e2dfe


          Try to swap over to UI picking

566d24b


          Remember to add the controlling component...

508de35


          Avoid breaking changes in an example PR

ef597b5

alice-i-cecile added S-Needs-Review and removed S-Waiting-on-Author labels

alice-i-cecile marked this pull request as ready for review

January 8, 2025 21:49


          Merge branch 'main' into directional-navigation-example

c2758b1

alice-i-cecile requested review from BenjaminBrienen, NthTensor and viridia

January 8, 2025 21:50

rparrett suggested changes

View reviewed changes

examples/ui/directional_navigation.rs Outdated

+                  }
+              }
+              // We're spawning a simple 3x3 grid of buttons

Contributor

rparrett Jan 8, 2025 •

edited

Loading

Suggested change

      
            // We're spawning a simple 3x3 grid of buttons
          
            // We're spawning a simple 3x5 grid of buttons

examples/ui/directional_navigation.rs Outdated

Comment on lines +142 to +143

		// Allow the grid to take up the full height and width of the window
		width: Val::Percent(60.),

Contributor

rparrett Jan 8, 2025

IMO

Make instructions node wider, maybe Px(300.0)
Leave this at 100.0.
Adjust this comment to say "take up the full height and the rest of the width."

Seems okay for the grid to not be centered in the screen to me.

examples/ui/directional_navigation.rs Outdated Show resolved Hide resolved

examples/ui/directional_navigation.rs

+              // to capture the actual intent of the user
+              fn universal_button_click_behavior(
+                  // We're using a on-mouse-down trigger to improve responsiveness;
+                  // Clicked is better when you want roll-off cancellation

Contributor

rparrett Jan 8, 2025

Might be nicer to have separate effects that get triggered on Pressed and Clicked rather than explain why it looks like we're doing the "wrong" thing.

But that could be a future improvement.

examples/ui/directional_navigation.rs Outdated

+                              width: Val::Px(200.0),
+                              justify_content: JustifyContent::Center,
+                              align_items: AlignItems::Center,
+                              margin: UiRect::all(Val::Px(16.0)),

Contributor

rparrett Jan 8, 2025

Suggested change

      
                            margin: UiRect::all(Val::Px(16.0)),
          
                            margin: UiRect::all(Val::Px(12.0)),

For consistency with other examples with top-left instructions

Contributor

bas-ie commented Jan 8, 2025

Checked and working with an 8Bitdo Ultimate on Linux. D-pad and left stick both navigate, I presume because of whatever mode the controller is in. B and A both trigger buttons.

alice-i-cecile mentioned this pull request

add_edges and add_grid helpers for DirectionalNavMap #17247

Closed

1 task

Contributor

rparrett commented Jan 9, 2025

Would you mind rewriting that last commit message without the tag?

Approving, but continuing to nitpick to clarify the reasoning for a previous review.

I think that either

The grid node should be width: 100% so that it takes up the rest of the space and the buttons are centered within the non-instruction space
The instructions node should given a percentage width of (100% - grid%) / 2 so that things are centered
The grid node should be width: 60% or whatever, but the text node absolutely positioned.

My eyes are just drawn to the "implicit green box" in the layout and it looks off-center.


          Feedback from review

e5d7cda

alice-i-cecile force-pushed the directional-navigation-example branch from b00e303 to e5d7cda Compare

January 9, 2025 02:30


          Increase grid width

27b15fa

rparrett approved these changes

View reviewed changes


          Fix bevy_render import

918a8bb

alice-i-cecile mentioned this pull request

Add an Activate triggered event to bevy_ui #17267

Closed

3 tasks

viridia approved these changes

View reviewed changes

alice-i-cecile added this pull request to the merge queue

alice-i-cecile added S-Ready-For-Final-Review and removed S-Needs-Review labels

Merged via the queue into bevyengine:main with commit 145f5f4

mrchantey pushed a commit to mrchantey/bevy that referenced this pull request


          Add a simple directional UI navigation example (bevyengine#17224)

fe9f430

# 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
bevyengine#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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

NthTensor Awaiting requested review from NthTensor

BenjaminBrienen Awaiting requested review from BenjaminBrienen

2 more reviewers

rparrett rparrett approved these changes

viridia viridia approved these changes

Labels

A-Accessibility A-Input A-UI C-Bug C-Examples S-Ready-For-Final-Review