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

HOME

En aquest tema aprendràs com es configura un projecte de Phaser i com s’organitzen les diferents parts del teu joc mitjançant el concepte d’"escenes". Aquest és un pas fonamental per estructurar qualsevol joc, ja que et permet dividir la lògica en parts manejables i modulars.

Configuració bàsica del joc

Conceptes clau

Configuració del joc: És un objecte JavaScript que defineix les propietats bàsiques del teu joc (amplada, alçada, tipus de renderitzat, escenes, etc.).
Tipus de renderitzat: Phaser pot utilitzar WebGL o Canvas per dibuixar el joc.
Escenes: Són com "pantalles" o "estats" del teu joc (menú principal, nivell, pantalla de Game Over, etc.).

Exemple d’objecte de configuració

const config = {
  type: Phaser.AUTO, // Phaser tria automàticament WebGL o Canvas
  width: 800,        // Amplada de la pantalla del joc
  height: 600,       // Alçada de la pantalla del joc
  backgroundColor: '#3498db', // Color de fons
  scene: [MyScene]   // Llista d’escenes a carregar
};

const game = new Phaser.Game(config);

Explicació

type: Defineix el motor de renderitzat. Phaser.AUTO deixa que Phaser triï el millor disponible.
width i height: Dimensions de la pantalla del joc.
backgroundColor: Color de fons inicial.
scene: Array d’escenes que el joc utilitzarà.

Què és una escena a Phaser?

Conceptes clau

Escena: Un contenidor per a tot el que passa en una part concreta del joc.
Cicle de vida de l’escena: Cada escena té mètodes especials (preload, create, update) que Phaser crida automàticament.

Mètode	Quan s’executa?	Què fa?
preload	Abans de crear l’escena	Carrega recursos (imatges, àudio, etc.)
create	Un cop els recursos estan carregats	Inicialitza objectes i lògica
update	En cada frame del joc (bucle principal)	Actualitza la lògica del joc

Creació d’una escena bàsica

Exemple pràctic

class MyScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MyScene' }); // Identificador únic de l’escena
  }

  preload() {
    // Aquí carregaríem recursos, per exemple:
    // this.load.image('logo', 'assets/logo.png');
  }

  create() {
    // Aquí inicialitzem objectes, per exemple:
    this.add.text(100, 100, 'Hola, món!', { font: '32px Arial', fill: '#fff' });
  }

  update(time, delta) {
    // Aquí aniria la lògica que s’actualitza cada frame
  }
}

Explicació

constructor(): Defineix la clau de l’escena.
preload(): Carrega recursos abans de començar l’escena.
create(): Inicialitza objectes i lògica.
update(): Actualitza la lògica del joc contínuament.

Afegir múltiples escenes

Pots definir tantes escenes com vulguis i afegir-les a la configuració del joc.

Exemple

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [MenuScene, GameScene, GameOverScene]
};

Escena	Funció principal
MenuScene	Menú principal
GameScene	Nivell de joc
GameOverScene	Pantalla de fi de partida

Exercicis pràctics

Exercici 1

Crea una escena anomenada HelloScene que mostri el text "Benvingut a Phaser!" al centre de la pantalla.

Solució

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

  create() {
    this.add.text(400, 300, 'Benvingut a Phaser!', {
      font: '32px Arial',
      fill: '#ffffff'
    }).setOrigin(0.5); // Centra el text
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [HelloScene]
};

const game = new Phaser.Game(config);

Consell: Recorda utilitzar .setOrigin(0.5) per centrar el text respecte a la seva posició.

Exercici 2

Afegeix una segona escena anomenada GameScene i configura el joc perquè comenci amb HelloScene i després canviï a GameScene després de 3 segons.

Solució

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

  create() {
    this.add.text(400, 300, 'Benvingut a Phaser!', {
      font: '32px Arial',
      fill: '#ffffff'
    }).setOrigin(0.5);

    // Passa a GameScene després de 3 segons
    this.time.delayedCall(3000, () => {
      this.scene.start('GameScene');
    });
  }
}

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

  create() {
    this.add.text(400, 300, 'Aquesta és la GameScene!', {
      font: '32px Arial',
      fill: '#ff0000'
    }).setOrigin(0.5);
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: [HelloScene, GameScene]
};

const game = new Phaser.Game(config);

Error comú: Oblidar-se d’afegir totes les escenes a l’array scene de la configuració farà que Phaser no pugui trobar-les quan intentis canviar d’escena.

Resum

La configuració del joc defineix les propietats bàsiques i les escenes que utilitzarà el teu joc.
Una escena és una unitat lògica del teu joc, amb el seu propi cicle de vida (preload, create, update).
Pots tenir múltiples escenes per organitzar millor el teu projecte.
El canvi d’escenes et permet controlar el flux del joc (menús, nivells, pantalles de fi de partida, etc.).

Ara que entens com configurar el teu joc i treballar amb escenes, estàs preparat per començar a carregar i mostrar imatges a la següent secció!

Configuració del joc i escenes

Configuració bàsica del joc

Conceptes clau

Exemple d’objecte de configuració

Explicació

Què és una escena a Phaser?

Conceptes clau

Creació d’una escena bàsica

Exemple pràctic

Explicació

Afegir múltiples escenes

Exemple

Exercicis pràctics

Exercici 1

Solució

Exercici 2

Solució

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