CodeForge

Maquetación Web Dinámica / Del canvas al motor: videojuegos con Phaser

Input multiplataforma: teclado, puntero y gamepad

Teoría20 min20 XP

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

input.js
// 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.