El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Gestió de múltiples escenes

Següent ►
►

En aquest tema aprendràs com gestionar diverses escenes dins d’un joc creat amb Phaser. Les escenes són una part fonamental de l’arquitectura d’un joc, ja que permeten separar diferents parts del joc (menú principal, nivell de joc, pantalla de puntuació, etc.) de manera organitzada i modular.

Conceptes clau

  • Què és una escena?

    • Una escena (scene) és una secció independent del teu joc, amb la seva pròpia lògica, gràfics i comportament.
    • Exemples habituals: menú principal, pantalla de joc, pantalla de Game Over, crèdits, etc.

  • Avantatges d’utilitzar múltiples escenes:

    • Millor organització del codi.
    • Facilita la reutilització i manteniment.
    • Permet transicions i gestió d’estats del joc de manera clara.

  • Cicle de vida d’una escena:

    • init(): Inicialització de dades.
    • preload(): Carrega d’actius (imatges, sons, etc.).
    • create(): Creació d’objectes i configuració inicial.
    • update(): Lògica que s’executa cada frame.

Com crear i gestionar múltiples escenes

  1. Definir escenes com a classes

Cada escena es defineix com una classe que hereta de Phaser.Scene.

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

  create() {
    this.add.text(100, 100, 'Menú Principal', { fontSize: '32px', fill: '#fff' });
    this.input.once('pointerdown', () => {
      this.scene.start('GameScene');
    });
  }
}

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

  create() {
    this.add.text(100, 100, 'Joc en marxa!', { fontSize: '32px', fill: '#fff' });
  }
}

Explicació:

  • Cada classe representa una escena diferent.
  • El constructor defineix una clau única (key) per identificar l’escena.
  • El mètode create() s’utilitza per afegir elements i configurar la lògica inicial.

  1. Afegir escenes a la configuració del joc

Les escenes es registren a la configuració principal de Phaser.

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

const game = new Phaser.Game(config);

Explicació:

  • L’array scene conté totes les escenes que el joc pot utilitzar.
  • Phaser les inicialitza i les gestiona automàticament.

  1. Canviar d’escena

Phaser proporciona diversos mètodes per gestionar la transició entre escenes:

Mètode Descripció
this.scene.start(key) Atura l’escena actual i inicia una altra escena.
this.scene.stop(key) Atura una escena específica.
this.scene.pause(key) Pausa una escena (es pot reprendre més tard).
this.scene.resume(key) Reprèn una escena pausada.
this.scene.switch(key) Atura l’escena actual i inicia una altra, però sense reinicialitzar-la.
this.scene.launch(key) Inicia una nova escena sense aturar l’actual (ambdues actives alhora).

Exemple pràctic:

// Dins de MenuScene
this.scene.start('GameScene'); // Passa directament a l'escena de joc

// Dins de GameScene
this.scene.start('MenuScene'); // Torna al menú principal

  1. Passar dades entre escenes

Pots passar dades d’una escena a una altra utilitzant el segon paràmetre de scene.start o scene.launch.

// Dins de GameScene, per tornar al menú amb una puntuació
this.scene.start('MenuScene', { score: 150 });

// Dins de MenuScene
init(data) {
  if (data.score) {
    this.add.text(100, 200, `Puntuació: ${data.score}`, { fontSize: '24px', fill: '#fff' });
  }
}

Exercicis pràctics

Exercici 1: Crear dues escenes i alternar entre elles

Enunciat:
Crea dues escenes: una de benvinguda i una de joc. Quan l’usuari faci clic a la pantalla de benvinguda, ha de passar a l’escena de joc. A l’escena de joc, mostra un text i, després de 3 segons, torna automàticament a la pantalla de benvinguda.

Solució:

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

  create() {
    this.add.text(200, 250, 'Benvingut! Fes clic per començar.', { fontSize: '24px', fill: '#fff' });
    this.input.once('pointerdown', () => {
      this.scene.start('PlayScene');
    });
  }
}

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

  create() {
    this.add.text(200, 250, 'Estàs jugant!', { fontSize: '24px', fill: '#fff' });
    this.time.delayedCall(3000, () => {
      this.scene.start('WelcomeScene');
    });
  }
}

const config = {
  type: Phaser.AUTO,
  width: 640,
  height: 480,
  scene: [WelcomeScene, PlayScene]
};

const game = new Phaser.Game(config);

Explicació:

  • WelcomeScene mostra un missatge i espera un clic per passar a PlayScene.
  • PlayScene mostra un text i, després de 3 segons, torna a WelcomeScene automàticament.

Errors comuns:

  • Oblidar afegir totes les escenes a la configuració.
  • Utilitzar una clau (key) incorrecta o no coincident.
  • No utilitzar this.scene dins del context de la classe de l’escena.

Exercici 2: Passar dades entre escenes

Enunciat:
Modifica l’exercici anterior perquè, en tornar a la pantalla de benvinguda, es mostri un missatge amb el nombre de vegades que s’ha jugat.

Solució:

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

  init(data) {
    this.playCount = data.playCount || 0;
  }

  create() {
    this.add.text(200, 200, 'Benvingut! Fes clic per començar.', { fontSize: '24px', fill: '#fff' });
    this.add.text(200, 250, `Has jugat ${this.playCount} vegades.`, { fontSize: '20px', fill: '#fff' });
    this.input.once('pointerdown', () => {
      this.scene.start('PlayScene', { playCount: this.playCount + 1 });
    });
  }
}

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

  init(data) {
    this.playCount = data.playCount || 1;
  }

  create() {
    this.add.text(200, 250, 'Estàs jugant!', { fontSize: '24px', fill: '#fff' });
    this.time.delayedCall(3000, () => {
      this.scene.start('WelcomeScene', { playCount: this.playCount });
    });
  }
}

const config = {
  type: Phaser.AUTO,
  width: 640,
  height: 480,
  scene: [WelcomeScene, PlayScene]
};

const game = new Phaser.Game(config);

Consell:
Assegura’t de passar sempre les dades necessàries a través dels mètodes init i scene.start per mantenir l’estat entre escenes.

Resum

  • Les escenes permeten dividir el teu joc en parts lògiques i independents.
  • Cada escena es defineix com una classe i es registra a la configuració del joc.
  • Phaser ofereix mètodes potents per iniciar, aturar, pausar i reprendre escenes.
  • Pots passar dades entre escenes per mantenir l’estat del joc.
  • Una bona gestió d’escenes facilita l’organització i escalabilitat del teu projecte.

Pròxim pas:
Ara que saps gestionar múltiples escenes, podràs crear jocs més complexos i modulars. El següent tema tractarà sobre com desar i carregar l’estat del joc per oferir una experiència més completa als jugadors.

◄ Anterior
◄
Següent ►
►

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

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats