El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Colisiones y Superposiciones

Siguiente ►
►

En esta lección aprenderás a manejar colisiones y superposiciones en Phaser, dos conceptos fundamentales para crear interactividad y lógica en tus juegos. Entender cómo detectar y responder a estos eventos te permitirá implementar mecánicas como recoger objetos, evitar obstáculos o derrotar enemigos.

  1. ¿Qué son las Colisiones y Superposiciones?

  • Colisión: Ocurre cuando dos objetos sólidos se encuentran y no pueden ocupar el mismo espacio. Por ejemplo, un jugador chocando contra una pared.
  • Superposición (Overlap): Sucede cuando dos objetos se cruzan, pero no necesariamente se bloquean entre sí. Por ejemplo, un jugador recogiendo una moneda.
Concepto Descripción Ejemplo típico
Colisión Objetos sólidos se bloquean entre sí Jugador choca con una pared
Superposición Objetos se cruzan, pero no se bloquean Jugador recoge una moneda

  1. Habilitando Física para Colisiones

Para que Phaser pueda detectar colisiones o superposiciones, los objetos deben tener física habilitada. Phaser soporta varios sistemas de física, pero el más común es Arcade Physics.

Ejemplo: Habilitar física en dos sprites

// Crear el sprite del jugador y un objeto
this.player = this.physics.add.sprite(100, 100, 'player');
this.wall = this.physics.add.staticSprite(200, 100, 'wall');
  • this.physics.add.sprite: Crea un sprite con física dinámica (puede moverse y ser afectado por fuerzas).
  • this.physics.add.staticSprite: Crea un sprite estático (no se mueve, pero puede colisionar).

  1. Detectando Colisiones

Phaser proporciona el método this.physics.add.collider para detectar y manejar colisiones entre dos objetos o grupos.

Ejemplo: Colisión entre jugador y pared

this.physics.add.collider(this.player, this.wall, () => {
  console.log('¡Colisión detectada!');
});
  • El tercer parámetro es una función callback que se ejecuta cuando ocurre la colisión.

Explicación paso a paso:

  1. Detecta cuando el jugador y la pared se tocan.
  2. Ejecuta la función proporcionada (en este caso, muestra un mensaje en la consola).

  1. Detectando Superposiciones (Overlaps)

Para detectar cuando dos objetos se superponen (sin bloquearse), usa this.physics.add.overlap.

Ejemplo: Jugador recoge una moneda

this.coin = this.physics.add.staticSprite(150, 100, 'coin');

this.physics.add.overlap(this.player, this.coin, () => {
  console.log('¡Moneda recogida!');
  this.coin.destroy(); // Elimina la moneda del juego
});
  • Aquí, cuando el jugador toca la moneda, se ejecuta la función callback y la moneda desaparece.

  1. Comparación: Collider vs Overlap

Método ¿Bloquea movimiento? ¿Ejecuta callback? Uso típico
this.physics.add.collider Sí Opcional Paredes, enemigos sólidos
this.physics.add.overlap No Sí Monedas, power-ups

  1. Ejemplo Completo

class MyGame extends Phaser.Scene {
  preload() {
    this.load.image('player', 'player.png');
    this.load.image('wall', 'wall.png');
    this.load.image('coin', 'coin.png');
  }

  create() {
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.wall = this.physics.add.staticSprite(200, 100, 'wall');
    this.coin = this.physics.add.staticSprite(150, 100, 'coin');

    // Colisión: el jugador no puede atravesar la pared
    this.physics.add.collider(this.player, this.wall, () => {
      console.log('¡Colisión con la pared!');
    });

    // Superposición: el jugador recoge la moneda
    this.physics.add.overlap(this.player, this.coin, () => {
      console.log('¡Moneda recogida!');
      this.coin.destroy();
    });

    // Movimiento simple con el cursor
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-160);
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(160);
    } else {
      this.player.setVelocityX(0);
    }

    if (this.cursors.up.isDown) {
      this.player.setVelocityY(-160);
    } else if (this.cursors.down.isDown) {
      this.player.setVelocityY(160);
    } else {
      this.player.setVelocityY(0);
    }
  }
}

  1. Ejercicios Prácticos

Ejercicio 1: Añade un grupo de monedas y haz que el jugador pueda recogerlas todas.

Instrucciones:

  • Crea un grupo de monedas en diferentes posiciones.
  • Usa overlap para que el jugador pueda recogerlas.
  • Muestra en consola cuántas monedas quedan.

Solución:

// Crear grupo de monedas
this.coins = this.physics.add.staticGroup();
this.coins.create(150, 100, 'coin');
this.coins.create(200, 150, 'coin');
this.coins.create(250, 200, 'coin');

this.physics.add.overlap(this.player, this.coins, (player, coin) => {
  coin.destroy();
  console.log('Monedas restantes:', this.coins.countActive());
});

Errores comunes y consejos:

  • Asegúrate de usar staticGroup para objetos que no se mueven.
  • Usa coin.destroy() para eliminar solo la moneda tocada.
  • Usa this.coins.countActive() para contar las monedas restantes.

Ejercicio 2: Haz que el jugador rebote al chocar con una pared.

Instrucciones:

  • Cuando el jugador colisione con la pared, invierte su velocidad.

Solución:

this.physics.add.collider(this.player, this.wall, (player, wall) => {
  player.setVelocity(-player.body.velocity.x, -player.body.velocity.y);
});

Consejo:

  • Verifica que el jugador tenga física dinámica (this.physics.add.sprite).

  1. Resumen

  • Colisiones: Bloquean el movimiento y pueden ejecutar lógica adicional.
  • Superposiciones: No bloquean, pero permiten detectar eventos como recoger objetos.
  • Usa collider para objetos sólidos y overlap para objetos recolectables o triggers.
  • Los callbacks te permiten personalizar la respuesta a estos eventos.

¡Ahora tienes las bases para crear interacciones dinámicas y lógicas en tus juegos con Phaser! En la próxima lección, aprenderás a crear objetos interactivos y manejar eventos para enriquecer aún más la jugabilidad.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados