En este artículo vas a aprender a implementar configurar y usar un Joystick virtual, que puedes incorporar en tus juegos creados con Phaser 3, de modo que los usuarios que acceden a ellos a través de un móvil táctil tengan la posibilidad de controlar el juego.

Esta tarea resulta especialmente sencilla usando un plugin que se ofrece gratuitamente y que puedes instalar en tu proyecto de una manera muy sencilla y usarlo en tus juegos.

El plugin con las explicaciones (un poco escuetas y en inglés) lo puedes ver en esta dirección: plugin Phaser 3 para Joystick virtual.

Instalar el plugin de joystick virtual

Este paso consta de dos etapas, primero la precarga del plugin y luego el uso en la escena donde lo necesites.

Método preload() para la precarga

La precarga la realizamos desde el método preload() de Phaser, en el que incorporamos el plugin por medio de estas sentencias.

preload() {
    let url = 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexvirtualjoystickplugin.min.js';
    this.load.plugin('rexvirtualjoystickplugin', url, true);
}

El preload del plugin lo podemos realizar en la escena de precarga y luego usar el plugin en cualquier otra escena donde lo necesitemos.

Método create() para incorporar el joystick a la escena

Mediante el método create() de la escena donde sea necesario usar el joystick podemos incorporarlo al juego.

this.joyStick = this.plugins.get('rexvirtualjoystickplugin').add(this, {
      x: 55,
      y: 400,
      radius: 100,
      base: this.add.circle(0, 0, 50, 0x888888),
      thumb: this.add.circle(0, 0, 25, 0xcccccc),
});

Con el anterior código consigues instanciar el joystick. Puedes configurar la posición y la forma y tamaño del control.

Una vez lo tienes instalado, puedes crear el objeto "cursor", mediante el cual puedes saber en todo momento qué direcciones se están aplicando en el joystick en todo momento.

this.joystickCursors = this.joyStick.createCursorKeys();

El cursor del joystick funciona de manera similar al que obtenemos con la forma que nos ofrece el propio framework. Es decir, tiene la misma interfaz que consigues mediante el cursor del teclado que realizas con:

this.cursors = this.input.keyboard.createCursorKeys();

Usar el joystick

Ahora simplemente queda usar el objeto "joystickCursors" para poder saber qué direcciones del joystick están siendo aplicadas, lo que realizarás generalmente en el método update.

En un escenario en el que quieras responder a los movimientos del teclado y a los movimientos del cursor, para que el juego se pueda manejar desde el teclado en ordenadores y con el cursor virtual en móviles, harías esto:

update() {
  if (this.cursors.up.isDown || this.joystickCursors.up.isDown ) {
      // están pulsando la tecla hacia abajo del cursor del teclado
      // ...o el joystick está siendo operado hacia abajo.
      // alguna de las dos posibilidades anteriores es verdad.
  }
}

Este joystick virtual lo implementé en el juego de práctica del Manual de Phaser 3, en esta rama de Github.

Aquí puedes ver un screenshot del juego una vez implementado el joystick.

Joystick analógico

Una de las ventajas más interesantes de este joystick virtual es que funciona como un control analógico, que además de decirte si está siendo operado en una dirección o otra (si o no = digital), es capaz de decirte qué cantidad de fuerza está haciendo (cuanto más desplazas el joystick hacia afuera del centro, más fuerza se supone que estás haciendo).

Este valor te lo entrega mediante dos parámetros:

• Force, que es la cantidad de fuerza
• Angle, que es el ángulo hacia donde se está operando el joystick

Mediante ambos valores puedes saber el estado del joystick, para saber en qué direcciones se está haciendo fuerza y cuánto para cada lado.

Este es un resumen del código que se puede ver en la página de uso del plugin, enlazada desde la documentación.

this.joyStick = this.plugins.get('rexvirtualjoystickplugin').add(this, {
    x: 100,
    y: 100,
    radius: 100,
    base: this.add.circle(0, 0, 100, 0x888888),
    thumb: this.add.circle(0, 0, 50, 0xcccccc),
    forceMin: 50,
  })
  .on('update', this.dumpJoyStickState, this);
}

dumpJoyStickState() {
  var cursorKeys = this.joyStick.createCursorKeys();
  console.log('Force: ', this.joyStick.force);
  console.log('Angle: ', this.joyStick.angle);
}

Fíjate que estamos mandando a la consola de Javascript los valores de fuerza y ángulo.

Otra cosa interesante es el evento "update" aplicado en el joystick, que se ejecuta cuando el joystick se mueve.

Otro detalle que hemos incorporado en este ejemplo es el valor "forceMin" en la configuración, que indica la fuerza mínima hacia un lado para que se de por entendido que se está moviendo el joystick en esa dirección. Aunque ese detalle no implica que el joystick no ejecute su manejador update() si la presión no es suficiente, el manejador se invocará con cualquier movimiento mínimo que se haga. Lo que permite el "forceMin" es que se no considere que el joystick está marcando una dirección u otra si le hacemos una fuerza muy leve.

En fin, es un buen componente para construir un joystick virtual con muy poco esfuerzo, que podemos instalar en cuestión de minutos si deseamos darles a nuestros usuarios de móviles una interfaz viable para controlar un juego.