Control de escenas

En el capítulo anterior vimos las bases del ciclo de vida de una escena de Phaser. Sin embargo, aún no hemos visto como controlar las escenas, saltar de una a otra, pausarlas, etc...

Iniciar una escena

Observa el siguiente fragmento de código. Nos encontramos en la función create() de la escena Start. En este caso, estamos iniciando la escena Menu directamente porque ya la habíamos precargado en el array de escenas del objeto de configuración, pero también podríamos hacerlo de forma explícita, sin tenerla precargada:

import Menu from "@scenes/Menu.js";

export class Start extends Phaser.Scene {
  create() {

    // Método A (Menu ya estaba precargado en array de escenas)
    this.scene.start("Menu");

    // Método B (Se precarga Menu en el array de escenas)
    this.scene.stop("Start");
    this.scene.add("Menu", Menu, true);

    const currentState = this.scene.getStatus("Menu");
  }
}

Observa que en ambos casos, la escena actual (Start) pasará a shutdown y la escena Menu pasará a running. Sólo que en el Método B estamos asumiendo que la escena no había sido incluida en el array de escenas de la configuración, por lo que tenemos hacerlo manualmente. A veces interesa, porque la escena la cargamos sólo en ciertos casos que sabemos que se ejecutará en un futuro.

Métodos de control de escenas

En el ejemplo anterior hemos utilizado los métodos de escena start(), stop() y add(), pero hay muchos más, que permiten realizar otras tareas, con variaciones y moviendo a un estado diferente las escenas. Echemos un vistazo:

A estos métodos tenemos que pasarle el nombre o key de la escena scene (o la propia clase). Además, podemos pasarle otro parámetro con los datos que queramos compartir con la escena, algo que veremos más adelante.

Todas las escenas tienen un estado interno que nos indica en la fase en la que se encuentra. Puedes obtenerlo con el método getStatus(scene), como ves en la última línea superior. Esos estados son los que puedes ver en este diagrama:

Métodos avanzados

Además de estos métodos que hemos visto, tenemos algunos otros métodos que realizan algunas acciones adicionales y también pueden resultarnos interesantes. Recuerda que las escenas no tienen porque ser sólo pantallas completas, sino que pueden ser pequeñas regiones como ventanas con ítems o zonas específicas y puedes estar interesado en iniciar varias escenas a la vez:

El método launch() y run() son muy similares, aunque run() es especialmente interesante en casos donde has abierto una escena modal pausando la escena actual y quieres reanudarla.

Control de la lista de escenas

Recuerda que en nuestro objeto de configuración inicial, teníamos un con la lista de escenas inicial de nuestro juego. Como hemos dicho que las escenas pueden ser partes de una misma pantalla, nos puede interesar ordenar la lista para que algunas escenas salgan encima de otras, por ejemplo.

Podemos manipular esa lista de escenas en cualquier momento, utilizando los siguientes métodos:

Antes vimos un ejemplo de this.scene.add(), pero también tenemos todas estas funciones que, como ves, son muy sencillas de entender y manipulan el con la lista de escenas del juego.

Métodos de información

Por último, ten en cuenta que tienes algunos métodos interesantes para obtener información de una escena, así como variar algunos detalles concretos de la misma:

Veamos estos métodos en acción en algunos ejemplos donde obtenemos o modificación información:

export class Start extends Phaser.Scene {
  created() {

    const gameScene = this.scene.get("Game");
    const firstScene = this.scene.getIndex(0);
    const menuStatus = this.scene.getStatus("Menu");
    const isVisible = this.scene.isVisible("GameOver");
    this.scene.setActive(false, "GameOver");
  }
}