El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

El manejo de entrada es fundamental en cualquier juego, ya que permite a los jugadores interactuar con el mundo virtual. En Phaser, puedes capturar y responder a eventos de teclado y ratón de manera sencilla y eficiente. En esta lección aprenderás cómo detectar y utilizar estas entradas para controlar elementos de tu juego.

Conceptos Clave

Entrada de Teclado: Permite detectar cuándo el jugador presiona o suelta teclas específicas.
Entrada de Ratón: Permite detectar clics, movimientos y otras acciones del ratón.
Eventos de Entrada: Phaser proporciona eventos para reaccionar a acciones del usuario.
Acciones del Jugador: Usar la entrada para mover personajes, disparar, abrir menús, etc.

Entrada de Teclado en Phaser

Phaser ofrece varias formas de manejar la entrada de teclado. La más común es crear objetos de teclas y comprobar su estado en el bucle de actualización (update).

Ejemplo Básico: Detectar Flechas de Dirección

class MyGame extends Phaser.Scene {
  constructor() {
    super({ key: 'MyGame' });
  }

  preload() {
    // Cargar recursos si es necesario
  }

  create() {
    // Crear cursores para las flechas del teclado
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      console.log('Izquierda');
    }
    if (this.cursors.right.isDown) {
      console.log('Derecha');
    }
    if (this.cursors.up.isDown) {
      console.log('Arriba');
    }
    if (this.cursors.down.isDown) {
      console.log('Abajo');
    }
  }
}

Explicación:

this.input.keyboard.createCursorKeys() crea un objeto con las teclas de flecha.
En el método update, se comprueba si alguna tecla está presionada usando .isDown.

Crear Teclas Personalizadas

Puedes escuchar cualquier tecla usando addKey:

this.spaceKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);

Y luego comprobar su estado:

if (this.spaceKey.isDown) {
  // Acción al presionar espacio
}

Tabla de Métodos Comunes

Método/Propiedad	Descripción
`isDown`	¿La tecla está presionada?
`isUp`	¿La tecla está liberada?
`justDown`	¿La tecla acaba de ser presionada?
`justUp`	¿La tecla acaba de ser liberada?

Entrada de Ratón en Phaser

Phaser permite detectar clics y movimientos del ratón fácilmente.

Ejemplo Básico: Detectar Clics

this.input.on('pointerdown', function (pointer) {
  console.log('Clic en:', pointer.x, pointer.y);
});

Explicación:

El evento 'pointerdown' se dispara cuando el usuario hace clic.
El objeto pointer contiene información sobre la posición del clic.

Detectar Movimiento del Ratón

this.input.on('pointermove', function (pointer) {
  // pointer.x y pointer.y indican la posición actual del ratón
});

Combinando Entrada de Teclado y Ratón

Puedes usar ambos tipos de entrada para crear controles más complejos. Por ejemplo, mover un personaje con el teclado y disparar con el ratón.

Ejercicio Práctico

Objetivo: Mueve un sprite con las flechas del teclado y cambia su color cuando se hace clic sobre él.

Paso 1: Código Base

class InputExample extends Phaser.Scene {
  constructor() {
    super({ key: 'InputExample' });
  }

  preload() {
    this.load.image('player', 'ruta/a/tu/sprite.png');
  }

  create() {
    this.player = this.add.sprite(400, 300, 'player');
    this.cursors = this.input.keyboard.createCursorKeys();

    // Hacer el sprite interactivo
    this.player.setInteractive();

    // Cambiar color al hacer clic
    this.player.on('pointerdown', () => {
      this.player.setTint(0xff0000); // Rojo
    });
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.x -= 2;
    }
    if (this.cursors.right.isDown) {
      this.player.x += 2;
    }
    if (this.cursors.up.isDown) {
      this.player.y -= 2;
    }
    if (this.cursors.down.isDown) {
      this.player.y += 2;
    }
  }
}

Explicación Paso a Paso

Cargar el sprite en preload.
Agregar el sprite al juego y hacerlo interactivo con setInteractive().
Detectar clics sobre el sprite con .on('pointerdown', ...).
Mover el sprite usando las flechas del teclado en el método update.

Solución del Ejercicio

El código anterior cumple con los requisitos: mueve el sprite con las flechas y cambia su color al hacer clic.

Errores Comunes y Consejos

Olvidar llamar a setInteractive(): Si no lo haces, el sprite no responderá a los clics.
No cargar correctamente la imagen: Asegúrate de que la ruta del sprite sea correcta.
Mover el sprite fuera de los límites: Puedes agregar lógica para evitar que el sprite salga de la pantalla.

Resumen

Aprendiste a manejar la entrada de teclado y ratón en Phaser.
Viste cómo detectar teclas específicas y responder a eventos de ratón.
Practicaste combinando ambos tipos de entrada para controlar un sprite.
Estos conceptos son la base para crear controles de jugador, menús interactivos y más.

¡En la próxima lección aprenderás sobre sprites y cómo animarlos para dar vida a tus juegos!

Manejo de Entrada (Teclado y Ratón)

Conceptos Clave

Entrada de Teclado en Phaser

Ejemplo Básico: Detectar Flechas de Dirección

Crear Teclas Personalizadas

Tabla de Métodos Comunes

Entrada de Ratón en Phaser

Ejemplo Básico: Detectar Clics

Detectar Movimiento del Ratón

Combinando Entrada de Teclado y Ratón

Ejercicio Práctico

Paso 1: Código Base

Explicación Paso a Paso

Solución del Ejercicio

Errores Comunes y Consejos

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final