Advertisement

What is a good way to handle view control for mobile devices?

Started by January 26, 2022 01:41 PM
2 comments, last by Shaarigan 2 years, 10 months ago

Hi, I know it is pretty unusual to see a 3D game being made in JavaScript, but I want to give it a go as I want to create a game for me and my friends to just play during boring days in school etc.

Back to the topic, I would like to ask, if anyone knows whats a good way to handle view controlling with a touchscreen. I already managed to create a movement pad, but it turns out view controlling is a bit more dificult. The thing I am asking for is the process behind a good view control. What I mean is a description like: when user touches the screen, get the point and calculate this and this, you get the point hopefully. Im looking for the logic behind it. I hope this post is good enough and wont get taken down, cheers!

Often two virtual joysticks, one on either side of the landscape screen.

Plenty of implementation options. A common one is just a box, the direction and magnitude is the location from the center of the invisible box. Players adapt to the locations quickly. Another has the initial touch point within the box is treated as the center, and the touch moving in any direction becomes the magnitude and direction.

The tricky part for some people seems to be not the math, but the transition from a mouse with “there is only one” to a touch system where each touch has an ID, you have an array of touches that can all move independently over time. Track where the desired touch has moved and compare the current coordinate with the start coordinate. Then it's a simple use of the “atan2” math function.

Advertisement

For your virtual gamepad, you often have a bounding box for the controls in screen space. Detect when a touch appears inside one of those controls, you could but must not use a spatial positionening data structure for this, a simple rectangle vs. point check should do the trick as well for a limited number of controls. Then remember which index that touch has and start listening to it. The initial touch position is the center you must safe somewhere and then simply callculate the difference from your current touch position to the center in order to know how fast the user wants the game to move. Cap this to the maximum of the virtual joystick and you have the axis delta to use in your game.

Another approach could be the Diablo/ third person Hack n Slay movement where the entire screen is your input device and the character is just following your mouse/touch pointer. It is different because you're using some kind of path finding to the touch point in screen space instead of a delta calculated speed. You should also put in some delay in order to detect touch-gesture if you want to use them as a second input method

This topic is closed to new replies.

Advertisement