elmarti / react-joystick-component

Tiny, multitouch, component driven joysticks in react
MIT License
86 stars 27 forks source link

Centering control stick on input produces unintended movement #36

Open behoyh opened 2 years ago

behoyh commented 2 years ago

Is your feature request related to a problem? Please describe. On a real game controller, your thumb movements across the stick do not necessarily transfer to (x,y) updates: that is, you can move your finger independent or across the stick "center" without moving it. For example, in halo to strafe left you may place your thumb on the far right of the stick and push the stick left. This is a problem because clicking/dragging the control stick may produce unintended input, especially in situations where timing or feathering is essential, or in 3D environments. Clicking the exact center of the stick with a mouse pointer to avoid this is almost impossible.

Describe the solution you'd like Essentially instead of aligning the stick to the center for the user, take the derivative/slope/difference of x and y. This will allow the stick to move relative to movement, not the "absolute" position in the control field itself. As long as the stick itself is clicked it can be moved with respect to where it was clicked initially. I believe the simplified solution for this is simply x-y.

Describe alternatives you've considered Taking full derivative/ point slope formula. Or moving the cursor instead of the stick to center, which wont translate to unintentional input.

elmarti commented 2 years ago

@behoyh i'd love to help, do you have any articles I could look at to understand this better? (as a layman 😅)

bsdavidson commented 1 year ago

I think this is what I was looking for as well.

You basically need to capture the relative position of the mouse to joystick center on mouseDown and use that as an offset. The end result would be that if I performed a mouseDown on the edge of the joystick and started moving in a direction, the movement would happen as if I were on center already so you don't see the "pop" and sudden jump in position.

As it stands, you need to start the mouse in the very center to prevent this issue.

behoyh commented 1 year ago

@bsdavidson Precisely. Explained it better than i can.