Szenenwechsel

Sobald dein Spiel eine gewisse Größe erreicht, möchtest du wahrscheinlich zwischen verschiedenen Szenen wechseln. Das könnte ein Wechsel von einem Intro oder Menü zum Spiel oder von einem Level zum nächsten sein.

Die wichtigste Funktion, die du hier kennen solltest, ist engine.loadMainScene(), die die aktuelle Szene durch einen .bin Dateinamen oder eine URL ersetzt, die du zum Laden übergibst.

Hier ist ein Beispiel für eine Komponente, die nach einer bestimmten Zeit zu einer anderen Szene wechselt:

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

Szenen Vorladen

Während die Szene noch weiterläuft, während die nächste geladen wird, gibt es trotzdem eine Verzögerung zwischen dem Start des Ladevorgangs und dem Erscheinen der nächsten Szene für den Benutzer.

Um diese Verzögerung zu minimieren, kannst du die folgenden HTML-Tags in den <head> deiner index.html einfügen:

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

Du kannst diese Tags auch dynamisch über JavaScript hinzufügen.

Hinweise

Das Laden einer Szene löscht Event-Listener nicht automatisch. Dazu gehören Event-Listener auf DOM-Elementen und Callbacks, die zu Emittern hinzugefügt wurden. Du bist dafür verantwortlich, Event-Listener zu entfernen. Es ist eine gute Praxis, dies in onDeactivate deiner Komponente zu tun.

onDeactivate wird vor onDestroy aufgerufen. Beide werden aufgerufen, wenn eine Szene entladen wird.

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

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

  onDeactivate() {
      /* Listener entfernen für Szenen-Neuladen, sonst wird der Tastendruck
       * mehrfach oder auch in der nächsten Szene behandelt */
      this.engine.canvas.removeEventListener('keyup', keyUpHandler);
  }