El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema aprendràs com gestionar col·lisions i superposicions entre objectes dins del teu joc amb Phaser. Aquestes funcionalitats són essencials per crear interaccions realistes i mecàniques de joc, com ara recollir objectes, detectar impactes o evitar obstacles.

Conceptes clau

Col·lisió: Quan dos objectes físics xoquen i la seva interacció pot provocar un canvi en el moviment o estat (per exemple, un jugador que xoca amb una paret).
Superposició (Overlap): Quan dos objectes es creuen, però sense provocar una resposta física automàtica (per exemple, recollir una moneda sense que el jugador s’aturi).
Callbacks: Funcions que s’executen quan es produeix una col·lisió o superposició.

Comparativa: Col·lisió vs Superposició

Característica	Col·lisió (`collider`)	Superposició (`overlap`)
Resposta física	Sí (rebot, aturada, etc.)	No (només es detecta l’event)
Ús típic	Obstacles, murs, enemics	Recollir objectes, triggers
Callback disponible	Sí	Sí

Com configurar col·lisions i superposicions

3.1. Afegir física als objectes

Abans de poder detectar col·lisions, els objectes han de tenir física activada:

// Exemple: Afegir física a un sprite
this.player = this.physics.add.sprite(100, 100, 'player');
this.coin = this.physics.add.sprite(200, 100, 'coin');

3.2. Detectar col·lisions

Utilitza this.physics.add.collider per detectar i gestionar col·lisions:

// Col·lisió entre el jugador i una paret
this.physics.add.collider(this.player, this.wall, this.handlePlayerWallCollision, null, this);

Explicació:

this.player i this.wall: objectes a comprovar.
this.handlePlayerWallCollision: funció callback que s’executa quan hi ha col·lisió.
null: funció de processament addicional (opcional).
this: context de la funció callback.

3.3. Detectar superposicions

Utilitza this.physics.add.overlap per detectar quan dos objectes se superposen:

// Superposició entre el jugador i una moneda
this.physics.add.overlap(this.player, this.coin, this.collectCoin, null, this);

Explicació:

Quan el jugador toca la moneda, s’executa la funció collectCoin.

Exemple pràctic: Recollir una moneda

Codi complet

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

  preload() {
    this.load.image('player', 'assets/player.png');
    this.load.image('coin', 'assets/coin.png');
  }

  create() {
    // Afegim el jugador i la moneda amb física
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.coin = this.physics.add.sprite(200, 100, 'coin');

    // Superposició: quan el jugador toca la moneda
    this.physics.add.overlap(this.player, this.coin, this.collectCoin, null, this);

    // Controls bàsics
    this.cursors = this.input.keyboard.createCursorKeys();
  }

  update() {
    // Moviment bàsic del jugador
    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);
    }
  }

  collectCoin(player, coin) {
    coin.disableBody(true, true); // Amaga la moneda
    // Aquí pots afegir puntuació o efectes
  }
}

Explicació detallada:

Es crea un jugador i una moneda amb física.
S’afegeix una superposició perquè quan el jugador toca la moneda, s’executi collectCoin.
A la funció collectCoin, la moneda es desactiva (amaga) i pots afegir més lògica (com sumar punts).
El moviment del jugador es controla amb les fletxes del teclat.

Exercicis pràctics

Exercici 1: Col·lisió amb una paret

Enunciat:
Afegeix una paret al joc i fes que el jugador no la pugui travessar. Mostra un missatge per consola quan el jugador xoca amb la paret.

Solució:

// Afegim la paret
this.wall = this.physics.add.staticSprite(150, 100, 'wall');

// Col·lisió entre jugador i paret
this.physics.add.collider(this.player, this.wall, function() {
  console.log('Has xocat amb la paret!');
}, null, this);

Consell:
Assegura’t que la paret sigui un objecte estàtic (staticSprite) perquè no es mogui quan el jugador la toqui.

Exercici 2: Recollir múltiples monedes

Enunciat:
Crea un grup de monedes i fes que el jugador les pugui recollir totes. Mostra per consola quantes monedes ha recollit el jugador.

Solució:

// Crear grup de monedes
this.coins = this.physics.add.group({
  key: 'coin',
  repeat: 4,
  setXY: { x: 200, y: 100, stepX: 70 }
});

this.collected = 0;

// Superposició amb totes les monedes
this.physics.add.overlap(this.player, this.coins, function(player, coin) {
  coin.disableBody(true, true);
  this.collected++;
  console.log('Monedes recollides: ' + this.collected);
}, null, this);

Error comú:
Oblidar-se de passar el context (this) com a últim paràmetre pot provocar que la variable this.collected no s’actualitzi correctament.

Resum

Les col·lisions provoquen una resposta física automàtica; les superposicions només detecten el contacte.
Utilitza this.physics.add.collider per a col·lisions i this.physics.add.overlap per a superposicions.
Les funcions callback et permeten personalitzar la resposta a aquests esdeveniments.
Practica amb diferents tipus d’objectes per entendre quan utilitzar cada mètode.

Pròxim pas:
Ara que ja saps gestionar col·lisions i superposicions, podràs crear interaccions més riques i mecàniques de joc més complexes. El següent tema tractarà sobre com fer que els objectes siguin interactius i com gestionar esdeveniments dins del teu joc.

Col·lisions i superposicions

Conceptes clau

Comparativa: Col·lisió vs Superposició

Com configurar col·lisions i superposicions

3.1. Afegir física als objectes

3.2. Detectar col·lisions

3.3. Detectar superposicions

Exemple pràctic: Recollir una moneda

Codi complet

Exercicis pràctics

Exercici 1: Col·lisió amb una paret

Exercici 2: Recollir múltiples monedes

Resum

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