Entrada táctil, ratón y teclado en Phaser

En este tutorial vamos a ver como manejar la entrada del usuario en nuestro juego con Phaser. Hoy en día existen muchos dispositivos diferentes, cada uno con sus peculiaridades. Donde hace unas décadas solo era teclado ahora tenemos ratón, pantallas táctiles y joysticks. Phaser intenta gestionar todas las diferencias de control simplificando conceptos, así, aunque es posible controlar el ratón y la entrada táctil por métodos distintos, Phaser recomienda simplificar y denominarlos punteros con botones, de los cuáles siempre puede haber varios (para gestionar el multitouch) y que no sabremos si son ratones o dedos. Adicionalmente el teclado puede seguir usándose, pero deberás saber que en móviles y tablets los usuarios no tienen acceso a teclado. También con los joysticks o gamepads, Phaser trae funciones para gestionarlos pero no todos los usuarios de tu juego tienen porque tener esos dispositivos. El control que uses será en definitiva una decisión tuya.

Teclado

Vamos a empezar por el teclado. Hay varias maneras de detectar una tecla. Principalmente hay 3 sistemas:

• Ha sido pulsada (genera un evento)
• Comprobamos si actualmente esta pulsada
• Ha sido liberada (genera un evento)
</ul> Las opciones que generan eventos son mejores en juegos, donde no se requiera mantener pulsadas las teclas. La mayoría de juegos, sin embargo, irán mejor con el sistema de enmedio.

Muchos juegos usan las teclas en forma de flecha para el control. Phaser trae la función createCursorKeys para facilitarle la vida a los desarrolladores de esos juegos.



var cursor = game.input.keyboard.createCursosKeys();

Luego, en la función update del juego podemos comprobar si alguna tecla esta pulsada y actuamos en consecuencia. Por ejemplo, en un juego con un personaje, mantener pulsada la tecla será seguir dándole velocidad al personaje para que siga avanzando.


function update(){
    if(cursor.up.isDown){
        // La tecla de flecha hacia arriba está pulsada, actuaríamos en consecuencia
    }
    if(cursor.left.isDown){
        // La tecla de flecha hacia la izquierda está pulsada
    }
}

Si quieres añadir más teclas que funcionen manteniendo pulsado puedes usar la función isDown proveyendola del identificador de tecla o keycode.


function update(){
    if(game.input.keyboard.isDown(Phaser.KeyCode.SPACEBAR)){
        /// La barra espaciadora está pulsada
    }
}


En ocasiones que el usuario pulse una tecla puede interferir con el funcionamiento del navegador. Podemos bloquear este comportamiento con addKeyCapture. Se encargará de que las teclas pulsadas no se transmitan más que a Phaser.


addKeyCapture(Phaser.KeyCode.SPACEBAR);


Si deseas que las teclas no sean de mantener, sino que propaguen acciones inmediatamente (por ejemplo, cambiar de radio en el GTA, solo es un toque, mantenerlo pulsado no hace nada más) podemos sobreescribir onUpCallback. Una vez se haya disparado el evento comprobaremos que tecla es la que ha sido pulsada.



game.input.keyboard.onUpCallback = function(key){
    if(key.keyCode === Phaser.KeyCode.G){
       // La tecla G acaba de ser pulsada y soltada. Si se mantuviese la tecla pulsada no pasaría nada.
    }
}

Punteros (ratón y táctil)

Phaser unifica el ratón y los gestos táctiles en los llamados punteros. Para acceder al puntero por defecto podemos usar la propiedad activePointer. Al igual que con el teclado soporta mantener pulsado y un simple toque.


// Mantener pulsado, dentro de la función update
if(game.input.activePointer.isDown){
    if(game.input.x > 500){ // Se comprueban las coordenadas del click
        // Esta tocando o haciendo click en el borde derecho de la pantalla
    }
}

// Pulsar una sola vez
game.input.onUp.add(function(){
    // Se ha presionado y levantado el dedo o el botón del ratón
});
</code></pre>