Cambio de Escenas

Una vez que tu juego alcanza cierto tamaño, querrás empezar a cambiar entre escenas. Eso podría significar cambiar de una introducción o menú al juego, o de un nivel a otro.

La función más importante que debes conocer aquí es engine.loadMainScene(), que reemplazará la escena actual con un nombre de archivo .bin o URL que le pases para cargar.

Este podría ser un ejemplo de un componente que cambia a otra escena después de un cierto tiempo:

import {Component, Property} from '@wonderlandengine/api';

export class LoadAfterDelay extends Component {
    static TypeName = 'load-after-delay';
    static Properties = {
        sceneFile: Property.string("AnotherScene.bin"),
        delaySeconds: Property.float(10),
    };

    start() {
        setTimeout(() => {
            this.engine.loadMainScene({ file: this.sceneFile });
        }, this.delaySeconds*1000);
    }
});

Precarga de Escenas

Aunque la escena seguirá ejecutándose mientras la siguiente se está cargando, esto provocará un retraso entre el inicio de la carga y la aparición de la siguiente escena para el usuario.

Para minimizar este tiempo, puedes colocar las siguientes etiquetas HTML en el <head> de tu index.html:

{/*  not needed <link rel="preload" href="First.bin" ... />  */}
<link rel="preload" href="Next.bin" as="fetch" crossorigin async />
<link rel="preload" href="Last.bin" as="fetch" crossorigin async />

También puedes agregar estas etiquetas dinámicamente a través de JavaScript.

Advertencias

Cargar una escena no limpiará automáticamente los event listeners. Esto incluye los event listeners en elementos DOM y las callbacks añadidas a emisores. Eres responsable de eliminar los event listeners. La mejor práctica es hacerlo en onDeactivate de tu componente.

onDeactivate se llama antes de onDestroy. Ambos se llaman cuando una escena se descarga.

  keyUpHandler = e => { /* ... */ };

  onActivate() { /* o start() */
    this.engine.canvas.addEventListener('keyup', this.keyUpHandler);
  }

  onDeactivate() {
      /* Elimina el listener para las recargas de escena, de lo contrario la pulsación de teclas se
       * manejará varias veces o también en la siguiente escena */
      this.engine.canvas.removeEventListener('keyup', keyUpHandler);
  }