Maquetación Web Dinámica / Del canvas al motor: videojuegos con Phaser
Input multiplataforma: teclado, puntero y gamepad
Un juego serio se juega en el escritorio con teclado y mouse, en el celular con el dedo, y a veces con un control de consola. En el módulo 13, soportar cada uno era reescribir el input. Phaser lo unifica: el mismo código de "puntero" funciona para mouse Y touch, el teclado es una línea, y hasta el gamepad está a mano. Hoy haces tu juego jugable en cualquier dispositivo.
El puntero: un solo código para mouse y dedo
// TECLADO: los cursores (flechas) de siempre
this.cursors = this.input.keyboard.createCursorKeys();
// una tecla específica (por nombre)
this.salto = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
// PUNTERO: clic de mouse O toque de dedo, mismo evento
this.input.on("pointerdown", (pointer) => {
console.log("tocaron en", pointer.x, pointer.y);
});
// GAMEPAD (si hay uno conectado): botones y sticks
// this.input.gamepad.on("down", (pad, boton) => { ... });Un detalle útil: para "¿acaban de presionar esta tecla?" (una vez, no
mantenida) se usa Phaser.Input.Keyboard.JustDown(this.salto), mientras
que this.cursors.left.isDown responde "¿está presionada ahora?" para
movimiento continuo. Es la misma distinción entre keydown puntual y
estado sostenido del módulo 13.
Muévete con clic, toque o teclado
El pointerdown que escribiste una vez responde igual a un clic en tu
computador y a un toque en un celular — ábrelo en tu teléfono y compruébalo.
Ese es el pago del motor: escribes el control una vez y viaja a todos los
dispositivos.
Tu juego web funciona con mouse en el escritorio, pero quieres que también se juegue tocando la pantalla en el celular. ¿Cuánto código extra necesitas en Phaser?
Mini-reto
Convierte el disco en un "recolecta puntos táctil": haz aparecer un objetivo (otra textura) en una posición al azar, y cuando el disco lo alcance (usa la colisión por distancia del módulo 13, o un overlap si le das física), suma un punto y reubica el objetivo. Jugable con dedo o mouse indistintamente — un mini-juego móvil real con el input que ya tienes.
Qué sigue
Sabes mover al jugador por cualquier medio. La próxima lección construye el MUNDO donde se mueve: tilemaps — niveles hechos de piezas repetidas (tiles), como los de Mario. Verás cómo definir un nivel entero con una cuadrícula de números, sin colocar cada bloque a mano.