Ciclo de vida de una escena

Uno de los puntos más importantes para saber como funciona una librería o framework, es conocer su ciclo de vida. Estemos hablando de componentes (React, Vue, Angular, Lit...) o de escenas (Phaser), en ambos casos tenemos un ciclo de vida por donde pasa, y que conviene tener claro.

Fases del ciclo de vida

Cuando creamos un juego con Phaser, el elemento principal son las escenas. Una vez creamos una escena, esta pasa por una serie de fases desde su creación hasta su finalización. Estas fases son init(), preload(), create() y update(). ¿Para que sirven cada uno de estos métodos?

Fase del ciclo de vida	Descripción
1️⃣ `constructor()`	Es el primer método llamado en la escena. Aquí se inicializan los datos internos de tu clase.
2️⃣ `init(data)`	Inicialización de la escena. Es el primer método que se llama.
3️⃣ `preload()`	Aquí debes precargar los recursos que vayas a utilizar (imágenes, sonidos, música, etc...).
4️⃣ `create(data)`	Aquí ya tienes disponibles los recursos. Sirve para crear elementos visuales para la escena.
5️⃣ `update(time, delta)`	Se llama continuamente mientras la escena está activa. Se usa para realizar cambios y variaciones.

Veamos ahora, como implementaríamos esto en una escena de clase de nuestro juego. De momento, son métodos vacíos a los que le iremos añadiendo código. Observa que además, también tenemos constructor() que forma parte del funcionamiento de OOP en Javascript:

import Phaser from "phaser";

export class Screen extends Phaser.Scene {
  constructor() {
    super({ key: "screen" });
  }

  init() { /* ... */ }
  preload() { /* ... */ }
  create() { /* ... */ }
  update() { /* ... */ }
}

Antes de nada, no te olvides de añadir el super() en el constructor() de nuestra clase. Este super() simplemente llama al constructor del padre, en este caso, la escena padre Phaser.Scene. Como buena práctica, se suele pasar como parámetro un objeto con la propiedad key, dándole un nombre a nuestra escena. En Phaser es muy común dar un nombre o id a todo, para identificarlo rápidamente.

Los métodos del ciclo de vida de Phaser se añaden sólo si los necesitas. Por ejemplo, si no tenemos que inicializar ni precargar recursos, simplemente añadimos el método create() y update(). Lo mismo ocurre con los parámetros, si no los necesitamos, no los utilizaremos.

Un buen ejercicio es añadir un console.log() en cada método para comprobar hasta donde está llegando al arrancar el juego y la escena.

Orden de carga

Recordemos que en el artículo anterior, en la configuración inicial añadimos una propiedad scene donde colocamos una escena Screen dentro de un array. Lo normal, al hacer un juego, es que tengamos varias escenas y no una sola.

En este array, podemos añadir múltiples escenas (pantalla de presentación, menú del juego, pantalla del juego, pantalla de fin del juego):

const config = {
  /* ... */
  scene: [Start, Menu, Game, GameOver],
};

En este caso, Phaser se encargará de arrancar la primera escena, Start donde irá pasando por las fases de su ciclo de vida: constructor -> init -> preload -> create y se mantendrá ejecutando continuamente el método update. Por otro lado, el resto de escenas sólo ejecutarán el constructor, ya que no han sido inicializadas.

Ya veremos más adelante que podemos controlar las escenas de forma manual a nuestra voluntad, pero el funcionamiento por defecto es el que acabamos de comentar.

Manager de escenas

Cómo es complicado saber el estado de cada escena, existe un manager llamado phaser-plugin-scene-watcher que es muy interesante para visualizar el estado de nuestras escenas.

Para instalarlo, vamos a escribir lo siguiente desde una terminal:

$ npm install -D phaser-plugin-scene-watcher

Una vez instalado, nos movemos al fichero index.js donde tenemos nuestro objeto de configuración y añadimos el plugin:

import SceneWatcherPlugin from 'phaser-plugin-scene-watcher';

const config = {
  /* ... */
  plugins: {
    global: [
      { key: "SceneWatcher", plugin: SceneWatcherPlugin, start: true }
    ]
  }
}

Ahora, en la parte superior de la pantalla, nos aparecerá un recuadro que nos indicará los datos de nuestras escenas:

1️⃣ El id de la escenas (indicado en el key del super)
2️⃣ El estado de la escena (si está ejecutándose o no)
3️⃣ El número de elementos que tiene cargados la escena
4️⃣ El número de elementos que está actualizando la escena
5️⃣ Si la escena está activa a, visible v y/o transicionando: t
6️⃣ Si la escena es interactiva y puedes interactuar con ella: i
7️⃣ Si la escena puede recibir información de teclado: k

Observarás algo similar a lo siguiente:

* Start        running       0    0 a v    i k
  Menu         init          0    0   v    i k
  Game         init          0    0   v    i k
  GameOver     init          0    0   v    i k

Todo esto lo iremos viendo en posteriores artículos, pero es un panel que nos va a servir para ver el estado de nuestras escenas y conocer como funciona.