Add a virtual joystick node to complement TouchScreenButton

[Calinou]

• Related to Implement multitouch in BaseButton to supersede TouchScreenButton #3976,
  Android editor virtual joystick should change absolute camera orientation  #6263
  and Add a built-in virtual controller for easier game development on mobile devices #11193.

Describe the project you are working on

The Godot editor 🙂

Describe the problem or limitation you are having in your project

When creating a mobile game, you often need a virtual joystick so the player can move around. However, this is nontrivial to implement correctly, so users need to use add-ons like https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot or spend time implementing their own virtual joystick.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Add built-in virtual joystick node as a complement to TouchScreenButton.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

The following properties would be available in TouchScreenJoystick:

• Size: The joystick's radius in pixels.
• Joystick Mode: Fixed, Dynamic, or Following (see below)
• Action Left: The action emitted when the joystick is pushed to the left (X- in 2D space).
• Action Right: The action emitted when the joystick is pushed to the left (X+ in 2D space).
• Action Up: The action emitted when the joystick is pushed upwards (Y- in 2D space).
• Action Down: The action emitted when the joystick is pushed downwards (Y+ in 2D space).
• Visibility Mode: Always or Touchscreen Only, similar to TouchScreenButton.

(Compared to the add-on, there is no deadzone setting as it's part of the input actions. I couldn't find concrete use cases for the clamp zone setting either, so it's not included here.)

Drawing is preferably done using procedural drawing so that the result looks good at any resolution, without users needing to handle this in code or by supplying their own images.

Theme items would also be available to control the foreground and background colors, both in normal and pressed state.

On Android, the 3D editor features a virtual joystick which could be used as a base for this development.

The videos below were recorded with the https://github.com/MarcoFazioRandom/Virtual-Joystick-Godot add-on as a reference:

Joystick Mode = Fixed

The joystick doesn't move.

joystick_fixed.mp4

Joystick Mode = Dynamic

The joystick is moved to the initial touch position as long as it's within the joystick's rect. It moves back to its original position when released. This allows for some leniency in input precision, which means it's regularly used for movement sticks. The downside is that the user can't press and have a full stick input be sent immediately, as they will always need to move their finger a bit after pressing for that to happen.

joystick_dynamic.mp4

Joystick Mode = Following

The joystick is moved to the initial touch position as long as it's within the joystick's rect, and it will follow the touch input if it goes outside the joystick's range. It moves back to its original position when released.

joystick_following.mp4

Note

Aiming in first-person/third-person games is typically implemented by panning the right side of the screen (while tapping in place shoots or performs an action). No joystick is visible with this kind of input, and it works using relative input (similar to a mouse) instead. This is a different kind of input which is easier to implement in a script, so it may not warrant a dedicated node.

Gyro can also be used as an alternative for more precise aiming.

If this enhancement will not be used often, can it be worked around with a few lines of script?

A large portion of mobile games need a virtual joystick or two, which can't be implemented with a few lines of script (especially if good usability is desired).

Is there a reason why this should be core and not an add-on in the asset library?

This is about improving the mobile development experience with Godot. This would also benefit the official demo projects which would gain better support for touch controls, without having to import several copies of an add-on into the repository.

[roalyr]

Will this be implemented for 3.x as well?

[Calinou]

Will this be implemented for 3.x as well?

Probably not, unless someone goes through the effort to backport it.

[llama-nl]

Godot Android Editor has a joystick to move around in 3D world. What do you think about to implement the joystick as node? It's been a year I am using Godot Android Editor. And I think it is good enough to use in games.

[ettiSurreal]

(Compared to the add-on, there is no deadzone setting as it's part of the input actions. I couldn't find concrete use cases for the clamp zone setting either, so it's not included here.)

Something like clamp zone would be useful for implementing something like a sprinting mechanic in 3D games, where you keep the joystick in range to walk normally and push it further to start running. I've seen a very popular game do this. Cannot think of anything outside of that though.