How to use the Gamepad's Left Analog to navigate a game menu screen?

Questions
1

Hello all, I am continuing on making a game as a hobby, but I am curious about one aspect of it: the menu screen. Thanks to this forum post (Set a dead zone on gamepad - #3 by wwwonka), which allowed me to make a dead zone and improved the controls, how do I replicate the reasonable control on a menu?

For example, in this https://playground.babylonjs.com/#E5SV9C#1 playground, use the left stick of the controller up and down to toggle the upper and lower buttons on the screen. Note how jumpy and unreliable the gray highlighting is.

What am I missing in this demonstration to create intuitive controls in a such menu screen using the left stick?

2

cc @PolygonalSun

3

Hey @pseudoCK,
So, what’s happening here is that your code will change the button for every instance where the joystick’s normalized value exceeds 0.5. This means that it will update the highlighted area with each input frame (which is why you’re seeing flickering). If you want to create logic where the highlighted area only changes once based on the direction pressed, you could put a “lock” on the movement logic that is engaged when there’s one movement and disenaged when the joystick returns to the dead zone range. Example:

var canMove = true;
...
             if (Math.abs(result) >= 0.5 && canMove) {
                switchHighlightSphere();
                canMove = false;
            }
...
function normalizeStickValues(y) {
	const DEADZONE = 0.2;

	if (Math.abs(y) < DEADZONE) {
		y = 0;
		canMove = true;
	} else {
		y = y - Math.sign(y) * DEADZONE;
		y /= (1.0 - DEADZONE)
	}

	return y;
}

If you want it to keep moving but just move slower, you could also try using the general concept above but just have some incrementing value, stored in some variable, that swaps the highlighted area when a certain number is met. Otherwise, it would just add some value. When said number is met or the joystick is release, said variable could be reset to 0. You could also probably make something using setTimeout. Keep in mind that these are just a few ways to do it and there are probably a bunch of approaches but all you need to do is just limit the update so that it doesn’t happen on each frame.

4

It works! It’s perfect! Thank you so much @PolygonalSun and @carolhmj !

Now I am wondering if something is used works in real world games with menus and toggled by the analog stick…

But that’s another topic.

Thank you so much again!