El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema aprenderás a trabajar con múltiples escenas en Phaser, una habilidad fundamental para estructurar juegos complejos y profesionales. Las escenas permiten dividir tu juego en partes lógicas y manejables, como menús, niveles, pantallas de pausa y más.

¿Qué es una Escena en Phaser?

Una escena en Phaser es una sección independiente del juego que contiene su propio conjunto de objetos, lógica y ciclo de vida. Por ejemplo:

Menú principal
Nivel de juego
Pantalla de pausa
Pantalla de Game Over

Ventajas de usar múltiples escenas:

Organización del código
Separación de responsabilidades
Facilita la reutilización y el mantenimiento

Ciclo de Vida de una Escena

Cada escena en Phaser sigue un ciclo de vida con métodos clave:

Método	Descripción
`init`	Inicializa datos antes de cargar recursos
`preload`	Carga recursos (imágenes, sonidos, etc.)
`create`	Configura objetos y lógica inicial
`update`	Lógica que se ejecuta en cada frame
`shutdown`	Limpieza antes de que la escena se detenga
`destroy`	Limpieza final antes de eliminar la escena

Creando y Registrando Escenas

Puedes definir una escena como una clase que extiende Phaser.Scene:

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

  preload() {
    // Cargar recursos del menú
  }

  create() {
    // Crear botones y texto del menú
  }
}

Para usar varias escenas, debes registrarlas en la configuración del juego:

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

const game = new Phaser.Game(config);

Nota: El orden en el array scene determina cuál se inicia primero.

Cambiando entre Escenas

Phaser proporciona varios métodos para gestionar escenas:

Método	Descripción
`this.scene.start(key)`	Detiene la escena actual e inicia otra
`this.scene.stop(key)`	Detiene una escena específica
`this.scene.pause(key)`	Pausa una escena (mantiene su estado)
`this.scene.resume(key)`	Reanuda una escena pausada
`this.scene.launch(key)`	Inicia una escena sin detener la actual
`this.scene.sleep(key)`	Suspende una escena (no actualiza ni renderiza)
`this.scene.wake(key)`	Reactiva una escena suspendida

Ejemplo: Cambiar del Menú al Juego

// Dentro de MenuScene
startGame() {
  this.scene.start('GameScene');
}

Ejemplo: Pausar y Reanudar

// Dentro de GameScene
pauseGame() {
  this.scene.launch('PauseScene');
  this.scene.pause();
}

// Dentro de PauseScene
resumeGame() {
  this.scene.stop();
  this.scene.resume('GameScene');
}

Ejemplo Práctico: Menú, Juego y Pausa

Definir las escenas

class MenuScene extends Phaser.Scene {
  constructor() { super({ key: 'MenuScene' }); }
  create() {
    this.add.text(300, 250, 'Iniciar Juego', { fontSize: '32px', fill: '#fff' })
      .setInteractive()
      .on('pointerdown', () => this.scene.start('GameScene'));
  }
}

class GameScene extends Phaser.Scene {
  constructor() { super({ key: 'GameScene' }); }
  create() {
    this.add.text(10, 10, 'Presiona P para pausar', { fontSize: '16px', fill: '#fff' });
    this.input.keyboard.on('keydown-P', () => {
      this.scene.launch('PauseScene');
      this.scene.pause();
    });
  }
}

class PauseScene extends Phaser.Scene {
  constructor() { super({ key: 'PauseScene' }); }
  create() {
    this.add.text(300, 250, 'Pausa\nHaz clic para continuar', { fontSize: '32px', fill: '#fff', align: 'center' })
      .setInteractive()
      .on('pointerdown', () => {
        this.scene.stop();
        this.scene.resume('GameScene');
      });
  }
}

Configuración del juego

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

const game = new Phaser.Game(config);

Ejercicio Práctico

Objetivo: Crea un flujo de escenas con un menú, un juego simple y una pantalla de Game Over.

Crea tres escenas: MenuScene, GameScene, GameOverScene.
En el menú, al hacer clic en "Jugar", inicia el juego.
En el juego, tras 5 segundos, muestra la pantalla de Game Over.
En Game Over, al hacer clic, vuelve al menú.

Solución Sugerida

class MenuScene extends Phaser.Scene {
  constructor() { super({ key: 'MenuScene' }); }
  create() {
    this.add.text(300, 250, 'Jugar', { fontSize: '32px', fill: '#fff' })
      .setInteractive()
      .on('pointerdown', () => this.scene.start('GameScene'));
  }
}

class GameScene extends Phaser.Scene {
  constructor() { super({ key: 'GameScene' }); }
  create() {
    this.add.text(350, 280, '¡Jugando!', { fontSize: '32px', fill: '#fff' });
    this.time.delayedCall(5000, () => {
      this.scene.start('GameOverScene');
    });
  }
}

class GameOverScene extends Phaser.Scene {
  constructor() { super({ key: 'GameOverScene' }); }
  create() {
    this.add.text(300, 250, 'Game Over\nHaz clic para volver al menú', { fontSize: '32px', fill: '#fff', align: 'center' })
      .setInteractive()
      .on('pointerdown', () => this.scene.start('MenuScene'));
  }
}

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

const game = new Phaser.Game(config);

Errores comunes y consejos:

Olvidar el key de la escena: Cada escena debe tener un identificador único.
No pausar la escena correctamente: Usa pause y resume para mantener el estado.
No limpiar recursos: Si usas recursos pesados, libera memoria en shutdown o destroy.

Resumen

Las escenas permiten dividir tu juego en partes independientes y manejables.
Puedes iniciar, pausar, reanudar y detener escenas según la lógica de tu juego.
Usar múltiples escenas mejora la organización y escalabilidad de tus proyectos.
Practica creando flujos de escenas para dominar la arquitectura de juegos en Phaser.

¡Ahora estás listo para estructurar juegos complejos usando múltiples escenas en Phaser! En el siguiente tema aprenderás cómo guardar y cargar el estado del juego para ofrecer una experiencia aún más completa a tus jugadores.

Gestionando Múltiples Escenas

¿Qué es una Escena en Phaser?

Ciclo de Vida de una Escena

Creando y Registrando Escenas

Cambiando entre Escenas

Ejemplo: Cambiar del Menú al Juego

Ejemplo: Pausar y Reanudar

Ejemplo Práctico: Menú, Juego y Pausa

Definir las escenas

Configuración del juego

Ejercicio Práctico

Solución Sugerida

Resumen

Phaser - Desarrollo de Juegos con JavaScript

Módulo 1: Introducción al Desarrollo de Juegos y Phaser

Módulo 2: Fundamentos de Phaser

Módulo 3: Sprites y Animación

Módulo 4: Física e Interactividad en el Juego

Módulo 5: Mundo del Juego y Cámara

Módulo 6: Audio e Interfaz de Usuario

Módulo 7: Arquitectura del Juego y Gestión de Estados

Módulo 8: Características Avanzadas de Jugabilidad

Módulo 9: Despliegue y Optimización

Módulo 10: Proyecto Final