En aquest tema aprendràs com implementar comportaments bàsics d’intel·ligència artificial (IA) per als enemics dins d’un joc creat amb Phaser. Veurem com fer que els enemics es moguin, persegueixin el jugador, reaccionin a esdeveniments i prenguin decisions senzilles. Aquestes tècniques són fonamentals per crear jocs més dinàmics i desafiants.


Conceptes clau

  • IA (Intel·ligència Artificial) bàsica: Simulació de comportaments senzills per als enemics.
  • Patrons de moviment: Caminar, patrullar, perseguir, fugir.
  • Detecció del jugador: Com l’enemic “veu” o detecta el jugador.
  • Reacció a esdeveniments: Què fa l’enemic quan detecta el jugador o rep dany.
  • Estats de comportament: Utilitzar màquines d’estats per controlar el comportament.

  1. Patrons de moviment bàsics

Els enemics poden tenir diferents patrons de moviment. Els més comuns són:

Patró Descripció Exemple visual
Estàtic L’enemic no es mou Un obstacle fix
Patrulla L’enemic es mou entre dos punts Un guàrdia caminant
Persecució L’enemic segueix el jugador si està a prop Un monstre perseguidor
Fugida L’enemic s’allunya del jugador Un animal espantadís

  1. Exemple pràctic: Enemic que patrulla i persegueix

2.1. Creació de l’enemic

Suposem que ja tens una escena amb un jugador. Afegirem un sprite d’enemic i li donarem comportament.

// Afegim l'enemic a la escena
this.enemy = this.physics.add.sprite(400, 300, 'enemy');
this.enemy.speed = 100;
this.enemy.patrolPoints = [300, 500]; // X mínim i màxim
this.enemy.direction = 1; // 1 = dreta, -1 = esquerra

Explicació:

  • this.enemy.speed: velocitat de moviment.
  • this.enemy.patrolPoints: límits de patrulla.
  • this.enemy.direction: direcció actual.

2.2. Patrulla automàtica

update() {
  // Patrulla entre dos punts
  if (this.enemy.x >= this.enemy.patrolPoints[1]) {
    this.enemy.direction = -1;
  } else if (this.enemy.x <= this.enemy.patrolPoints[0]) {
    this.enemy.direction = 1;
  }
  this.enemy.setVelocityX(this.enemy.speed * this.enemy.direction);
}

Explicació:

  • L’enemic canvia de direcció quan arriba als límits.
  • setVelocityX mou l’enemic a l’esquerra o dreta.

2.3. Detecció i persecució del jugador

update() {
  // Detecció simple: si el jugador està a prop, persegueix-lo
  const distance = Phaser.Math.Distance.Between(
    this.enemy.x, this.enemy.y,
    this.player.x, this.player.y
  );

  if (distance < 150) {
    // Persegueix el jugador
    const direction = this.player.x > this.enemy.x ? 1 : -1;
    this.enemy.setVelocityX(this.enemy.speed * direction);
  } else {
    // Patrulla normal
    if (this.enemy.x >= this.enemy.patrolPoints[1]) {
      this.enemy.direction = -1;
    } else if (this.enemy.x <= this.enemy.patrolPoints[0]) {
      this.enemy.direction = 1;
    }
    this.enemy.setVelocityX(this.enemy.speed * this.enemy.direction);
  }
}

Explicació:

  • Si el jugador està a menys de 150 píxels, l’enemic el persegueix.
  • Si no, continua patrullant.

  1. Màquina d’estats senzilla per a l’enemic

Per gestionar comportaments més complexos, pots utilitzar una màquina d’estats:

this.enemy.state = 'patrolling'; // Altres estats: 'chasing', 'idle'
update() {
  const distance = Phaser.Math.Distance.Between(
    this.enemy.x, this.enemy.y,
    this.player.x, this.player.y
  );

  switch (this.enemy.state) {
    case 'patrolling':
      if (distance < 150) {
        this.enemy.state = 'chasing';
      }
      // Patrulla
      // (mateix codi que abans)
      break;
    case 'chasing':
      if (distance >= 150) {
        this.enemy.state = 'patrolling';
      }
      // Persegueix el jugador
      // (mateix codi que abans)
      break;
  }
}

Avantatges:

  • Permet afegir més estats (atac, fugir, etc.) de manera clara.
  • Facilita la gestió de comportaments complexos.

  1. Exercicis pràctics

Exercici 1: Enemic que patrulla verticalment

Enunciat:
Modifica l’exemple perquè l’enemic patrulli amunt i avall entre dues posicions Y.

Solució:

this.enemy.patrolPoints = [200, 400]; // Y mínim i màxim
this.enemy.direction = 1;

update() {
  if (this.enemy.y >= this.enemy.patrolPoints[1]) {
    this.enemy.direction = -1;
  } else if (this.enemy.y <= this.enemy.patrolPoints[0]) {
    this.enemy.direction = 1;
  }
  this.enemy.setVelocityY(this.enemy.speed * this.enemy.direction);
}

Exercici 2: Enemic que fuig del jugador

Enunciat:
Fes que l’enemic s’allunyi del jugador si aquest s’apropa a menys de 100 píxels.

Solució:

const distance = Phaser.Math.Distance.Between(
  this.enemy.x, this.enemy.y,
  this.player.x, this.player.y
);

if (distance < 100) {
  const direction = this.player.x > this.enemy.x ? -1 : 1;
  this.enemy.setVelocityX(this.enemy.speed * direction);
} else {
  this.enemy.setVelocityX(0);
}

Consell:
Assegura’t que l’enemic no surti de la pantalla afegint límits.


  1. Errors comuns i consells

Error comú Solució/Consell
L’enemic es mou massa ràpid o lent Ajusta la propietat speed
L’enemic es queda enganxat als límits Revisa les condicions de canvi de direcció
L’enemic no detecta el jugador correctament Comprova el càlcul de la distància i la lògica
Massa codi duplicat per cada comportament Utilitza màquines d’estats per organitzar el codi

Resum

En aquesta secció has après:

  • Com implementar patrons de moviment bàsics per als enemics.
  • Com fer que els enemics detectin i reaccionin al jugador.
  • Com utilitzar una màquina d’estats per gestionar comportaments complexos.
  • Has practicat amb exercicis per reforçar aquests conceptes.

Pròxim pas:
Ara ja pots crear enemics més intel·ligents i dinàmics. A la següent secció aprendràs a optimitzar el teu joc i preparar-lo per al desplegament!

Phaser - Desenvolupament de jocs amb JavaScript

Mòdul 1: Introducció al desenvolupament de jocs i Phaser

Mòdul 2: Fonaments de Phaser

Mòdul 3: Sprites i animació

Mòdul 4: Física i interactivitat en el joc

Mòdul 5: Món del joc i càmera

Mòdul 6: Àudio i interfície d’usuari

Mòdul 7: Arquitectura del joc i gestió d’estats

Mòdul 8: Funcionalitats avançades de joc

Mòdul 9: Desplegament i optimització

Mòdul 10: Projecte final

© Copyright 2024. Tots els drets reservats