New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a simple directional UI navigation example #17224

Open

alice-i-cecile wants to merge 19 commits into bevyengine:main from alice-i-cecile:directional-navigation-example

+444 −5

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

Open

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 viridia, NthTensor and BenjaminBrienen

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

Open

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

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

Labels

A-Accessibility A-Input A-UI C-Bug C-Examples S-Needs-Review