Cambiare Scene

Una volta che il tuo gioco raggiunge una certa dimensione, vorrai iniziare a cambiare tra le scene. Questo potrebbe significare passare da un’introduzione o menu al gioco o da un livello a un altro.

La funzione più importante da conoscere qui è engine.loadMainScene(), che sostituirà la scena attuale con un filename .bin o URL che gli passi per il caricamento.

Ecco un esempio di un componente che passa a un’altra scena dopo un certo periodo di tempo:

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);
    }
});

Precaricamento delle Scene

Mentre la scena continuerà a funzionare mentre la prossima si sta caricando, ci sarà ancora un ritardo fra il momento in cui il caricamento è stato iniziato e quando la scena successiva appare all’utente.

Per minimizzare questo ritardo, puoi inserire i seguenti tag HTML all’interno del <head> del tuo index.html:

{/*  non necessario <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 />

Puoi anche aggiungere questi tag dinamicamente tramite JavaScript.

Avvertenze

Caricare una scena non rimuoverà automaticamente i listener degli eventi. Questo include i listener degli eventi sugli elementi DOM e i callback aggiunti agli emitter. Sei responsabile per la rimozione dei listener degli eventi. È una buona pratica farlo in onDeactivate del tuo componente.

onDeactivate è chiamato prima di onDestroy. Entrambi sono chiamati quando una scena viene scaricata.

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

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

  onDeactivate() {
      /* Rimuovi il listener per i ricaricamenti della scena, altrimenti la pressione dei tasti
       * è gestita più volte o gestita anche nella scena successiva */
      this.engine.canvas.removeEventListener('keyup', keyUpHandler);
  }