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.
- ¿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 |
- 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).
- 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
- El tercer parámetro es una función callback que se ejecuta cuando ocurre la colisión.
Explicación paso a paso:
- Detecta cuando el jugador y la pared se tocan.
- Ejecuta la función proporcionada (en este caso, muestra un mensaje en la consola).
- 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.
- 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 |
- 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);
}
}
}
- 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
overlappara 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
staticGrouppara 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).
- Resumen
- Colisiones: Bloquean el movimiento y pueden ejecutar lógica adicional.
- Superposiciones: No bloquean, pero permiten detectar eventos como recoger objetos.
- Usa
colliderpara objetos sólidos yoverlappara 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.
Phaser - Desarrollo de Juegos con JavaScript
Módulo 1: Introducción al Desarrollo de Juegos y Phaser
- ¿Qué es el Desarrollo de Juegos?
- Descripción general de Phaser
- Configurando tu Entorno de Desarrollo
- Tu Primer Proyecto con Phaser
Módulo 2: Fundamentos de Phaser
- Entendiendo el Bucle de Juego
- Configuración del Juego y Escenas
- Cargando y Mostrando Imágenes
- Trabajando con Texto
- Manejo de Entrada (Teclado y Ratón)
Módulo 3: Sprites y Animación
- ¿Qué son los Sprites?
- Añadiendo y Moviendo Sprites
- Fundamentos de Animación de Sprites
- Grupos de Sprites y Gestión
Módulo 4: Física e Interactividad en el Juego
- Introducción a la Física en Phaser
- Habilitando Física en Sprites
- Colisiones y Superposiciones
- Objetos Interactivos y Eventos
Módulo 5: Mundo del Juego y Cámara
- Creando Tilemaps y Mundos de Juego
- Desplazamiento y Control de Cámara
- Capas y Gestión de Profundidad
Módulo 6: Audio e Interfaz de Usuario
Módulo 7: Arquitectura del Juego y Gestión de Estados
- Organizando el Código del Juego
- Gestionando Múltiples Escenas
- Guardando y Cargando el Estado del Juego
Módulo 8: Características Avanzadas de Jugabilidad
- Efectos de Partículas
- Tweens y Animaciones
- Temporizadores y Eventos Retardados
- IA y Comportamiento de Enemigos
