Wonderland Engine für Unity-Entwickler

Diese Seite bietet Zuordnungen von Unity zur Wonderland Engine für Skripting und eine Liste von Unterschieden für den Aufbau von Lösungen.

Wenn Du lieber Videos ansiehst, schau Dir gerne unseren Umstiegsleitfaden auf unserem YouTube-Kanal an:

Skripting 

Wonderland Engine läuft im Browser, der bereits über eine integrierte JavaScript-Laufzeitumgebung verfügt. Das macht es zur besten Wahl für eine Web-Engine, da nichts zusätzlich heruntergeladen werden muss.

Um ein Skript zu erstellen, klicke mit der rechten Maustaste im Asset-Browser des Wonderland Editors und erstelle eine neue JavaScript / TypeScript-Komponente. Sie enthält eine grundlegende Vorlage, um Dir den Start zu erleichtern.

Ein gutes IDE für JS/TS ist Visual Studio Code.

Für weitere Informationen darüber, wie sich die API der Wonderland Engine von Unity unterscheidet, siehe den Abschnitt Code.

TypeScript vs JavaScript 

TypeScript fügt JavaScript statische Typüberprüfung hinzu, was es viel näher an C# bringt und die Codevervollständigung in Deinem IDE erheblich verbessert. Wir empfehlen im Allgemeinen TypeScript für Entwickler, die mit Unity vertraut sind.

Wonderland Engine übernimmt automatisch jede tsconfig.json-Einrichtung für Dich, einfach eine TypeScript-Komponente aus dem Asset-Browser erstellen.

Verpacken 

Während ein Unity-Workflow oft die Vorschau im Editor nutzt, ist in Wonderland Engine der finale Verpackungsprozess so schnell (weniger als 1 Sekunde), dass die endgültige App im Browser als Vorschau verwendet werden kann.

Die Seite im Browser wird immer neu geladen, wenn Du umpackst, und überprüfe Ansichten > Präferenzen, um sie nach jedem Speichern automatisch ausführen zu lassen.

Um die Anwendung bereitzustellen, musst Du einfach den Inhalt des deploy-Ordners Deines Projekts auf einen Webserver hochladen. Alternativ kannst Du auch das “Wonderland Cloud Publish”-Plugin verwenden, das in Ansichten > Plugins aktiviert werden kann.

Mehrere Szenen 

Wonderland Engine ermöglicht das Umschalten zwischen mehreren Szenen, die in mehreren Projektdateien (.wlp) erstellt wurden. Schau Dir das Anleitung zum Szenenwechsel für Anweisungen an.

Du kannst auch Teile einer Szene zur Laufzeit streamen, siehe Tutorial zu Streaming .bin-Dateien zur Laufzeit.

Prefabs 

Wonderland Engine hat noch keine Entsprechung für Prefabs. Stattdessen kannst Du ein Prototyp im Szene-Editor erstellen und die Hierarchie mit all ihren Komponenten klonen.

Alternativ kannst Du das Prefab-Objekt in einer separaten Szene verschieben, um es während der Laufzeit mit engine.loadPrefab(…) zu laden und zu instanziieren.

Importieren von Assets 

In der Wonderland Engine, wenn eine Szenendatei importiert wird (durch Drag-and-Drop aus dem Asset-Browser entweder in die Szenenansicht oder Szenenstruktur oder durch das Ziehen von Bilddateien in einen Material-Texturslot), wird sie verbunden und auf Änderungen überwacht. Die resultierenden Ressourcen, die in der Szenendatei gefunden wurden, werden im Projekt verfügbar gemacht und können in der “Ressourcen”-Ansicht angesehen werden.

Bis eine Datei aus dem Asset-Browser importiert wird, steht sie im Projekt nicht zur Verfügung. Der “Asset-Browser” kann als Dateibrowser betrachtet werden, der sich von dem unterscheidet, was Du möglicherweise aus Unity kennst.

Optimierung von Assets 

Sobald Assets importiert sind, können sie weiter optimiert werden:

• Meshes können automatisch dezimiert werden, um die Anzahl der Eckpunkte zu reduzieren
• Meshes können gleichmäßig skaliert werden
• Bilder werden automatisch komprimiert
• Bilder können herunterskaliert werden

Diese Einstellungen sind in der “Ressourcen”-Ansicht zu finden.

Verzeichnisse 

• deploy enthält das Endergebnis des Verpackungsprozesses.
• static enthält Dateien, die unverändert nach deploy kopiert werden.
• cache enthält zwischengespeicherte Ergebnisse der Asset-Kompilierung, z.B. komprimierte Bilder. Kann normalerweise sicher gelöscht werden, wird aber Zeit benötigen, um neu zu generieren.

Diese Einstellungen sind in der “Ressourcen”-Ansicht zu finden.

Animationen 

Animationen werden über den animation Komponententyp abgespielt. Haut-Animationen werden mit dem retarget Kontrollkästchen neu ausgerichtet, wenn die Komponente an einem der Knochen/Gelenke der Zielhaut angebracht ist.

Blending, Bearbeiten von Keyframes oder Keyframe-Ereignisse werden derzeit noch nicht unterstützt.

Physik 

Starre Körper werden über den physx Komponententyp erstellt. Die Szene kann im Editor mit Debug > Physik simulieren (Alt + S) simuliert werden.

Netzwerk 

Peer-to-Peer-Netzwerke können mit der community-unterstützten Wonderland Engine PeerJS-Networking erreicht werden.

Es nutzt WebRTC, das bis zu einem gewissen Grad die Standard PeerJS-Server-Infrastruktur nutzen kann.

Alternativ hat die Community Colyseus für Mehrbenutzer integriert.

Benutzeroberfläche 

Die Benutzeroberfläche wird entweder manuell mit dem cursor, cursor-target, und der collider Komponente eingerichtet.

Die folgende HTML5 Canvas basierte 2D-Benutzeroberfläche wird von der Community gepflegt: Lazy Widgets-Projekt.

Terminologie 

Code 

Nachfolgend findest Du eine Liste häufiger Code-Muster und deren Äquivalente in der Wonderland Engine:

Benutzerdefiniertes Verhalten 

In der Wonderland Engine haben wir “Komponenten” anstelle von “MonoBehaviour”. Um eine zu schreiben, erweiterst Du einfach die Komponentenklasse:

 1using UnityEngine;
 2using System.Collections;
 3
 4public class MainPlayer : MonoBehaviour
 5{
 6  [field: SerializeField]
 7  public string myName;
 8
 9  string privateName;
10
11  void Start()
12  {
13    Debug.Log("My name is", this.myName, this.privateName);
14  }
15
16  void Update()
17  {
18    Debug.Log("Delta time:", Time.deltaTime);
19  }
20}

 1import {Component, Property} from '@wonderlandengine/api';
 2
 3export class MainPlayer extends Component {
 4  static TypeName = 'main-player';
 5
 6  /* Properties sind im Editor sichtbar */
 7  static Properties = {
 8      myName: Property.string("Alice")
 9  };
10
11  privateName = "Bob";
12
13  start() {
14    console.log("Mein Name ist", myName, privateName);
15  }
16
17  update(dt) {
18    console.log("Delta Zeit:", dt);
19  }
20}

 1import {Component} from '@wonderlandengine/api';
 2import {property} from '@wonderlandengine/api/decorators.js';
 3
 4export class MainPlayer extends Component {
 5  static TypeName = 'main-player';
 6
 7  /* Properties sind im Editor sichtbar */
 8  @property.string("Alice")
 9  myName!: string;
10
11  privateName = "Bob";
12
13  start() {
14    console.log("Mein Name ist", myName, privateName);
15  }
16
17  update(dt: number) {
18    console.log("Delta Zeit:", dt);
19  }
20}

Wie in Unity werden einige UI-Elemente für die Parameter generiert.

Komponente am Spielobjekt erhalten 

1gameObject.GetComponent<MyComponent>();

1// Bevorzugt, da der Typ abgeleitet werden kann
2this.object.getComponent(MyComponent);
3
4// oder: nach Typname
5this.object.getComponent('my-component');

Eine Komponente an ein Objekt anhängen 

1MyComponent sc = gameObject.AddComponent<MyComponent>();
2sc.property = "set";

1this.object.addComponent(MyComponent, {property: "set"});
2
3// oder: nach Typname
4this.object.addComponent('my-component', {property: 'set'});
5
6// oder: Aktivierung aufschieben
7const sc = this.object.addComponent('my-component', {active: false});
8sc.property = 'set';
9sc.active = true;

Ein Kindobjekt erhalten 

1
2gameObject.transform.GetChild(0);

1this.object.children[0];

Übergeordnetes Objekt erhalten 

1gameObject.transform.parent

1this.object.parent;

Eine Materialeigenschaft setzen 

Setze verschiedene Materialeigenschaften wie Farbe oder Texturen.

1var mesh = gameObject.GetComponent<MeshRenderer>();
2mesh.material.SetColor("_Color", Color.green);

1const mesh = this.object.getComponent(MeshComponent);
2mesh.material.diffuseColor = [0.0, 1.0, 0.0, 1.0];

Mathematik 

JavaScript unterstützt kein Operator-Überladung, was bedeutet, dass wir einen anderen Ansatz für Math-Operationen wählen.

In vielen Fällen kann das Schreiben von Math-Code vollständig vermieden werden, da die Object3D API der Wonderland Engine viele Funktionen zur Manipulation von Transformationen enthält, die effizient in WebAssembly implementiert sind:

1/* Verschiebe ein Objekt auf mehreren Achsen. Um Garbage für den Vektor zu vermeiden, verwende ein temporäres Vektorelement oder eine Konstante im Modulumfang. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Rotier ein Objekt um die Y-Achse. */
5const AxisY = [0, 1, 0];
6this.object.rotateAxisAngleDegLocal(AxisY, 25);

Garbage Collection 

JavaScript ist eine Garbage-collected Sprache, die zu ungeplanten Unterbrechungen aufgrund der automatischen Garbage Collection führen kann. Daher ist es Best Practice, das Hinzufügen von Speicher auf den Heap in Form von Listen/Vektoren oder Objekten, die nicht trivial gesammelt werden können, zu vermeiden.

Es ist Best Practice, temporäre Vektoren/Quaternionen entweder im Konstruktor oder im Körper einer benutzerdefinierten Komponente zu erstellen und wiederzuverwenden, oder, wenn sie sorgfältig verwendet werden, im Modulumfang Deiner Komponente (über der Klasse). Konstante Vektoren wie [0, 1, 0] werden am besten im Modulumfang als const AxisY = [0, 1, 0] deklariert.

Mathe-Bibliothek 

Wir empfehlen die Verwendung von glMatrix, einer mathematischen Bibliothek für JavaScript/TypeScript, die sich der Performance und Garbage Collection bewusst ist. Es ist bereits mit unseren Standardvorlagen und mit unseren Standardkomponenten installiert, sodass Du es wahrscheinlich nicht selbst installieren musst.

Anstatt einen neu zugewiesenen Vektor zurückzugeben, erwarten Funktionen in glMatrix, die einen Vektor oder Quaternion berechnen, dass der erste Parameter angibt, wo das Ergebnis geschrieben werden soll. Funktionen, die einen primitiven Wert zurückgeben, geben das Ergebnis auf normale Weise zurück.

Finde die vollständige Dokumentation der glMatrix Mathe-Bibliothek hier.

1var v = new Vector3(1, 2, 3);
2v.Set(3, 2, 1);

1const v = vec3.fromValues(1, 2, 3);
2vec3.set(v, 3, 2, 1);

1var a = new Vector3(1, 2, 3);
2var b = new Vector3(1, 2, 3);
3
4var v = a + b;
5var a = a * b;
6var a = 2.0*a;

1import {vec3} from 'gl-matrix';
2
3const a = vec3.fromValues(1, 2, 3);
4const b = vec3.fromValues(1, 2, 3);
5
6const v = vec3.add(vec3.create(), a, b);
7vec3.mul(a, a, b);
8vec3.scale(a, a, 2.0);

JavaScript vs C# 

Einige weitere auffällige Unterschiede beim Übergang von C# sind:

• Immer this. vor Mitgliedsvariablen setzen.
• var erstellt eine “globale” Variable, die nicht auf den aktuellen Umfang beschränkt ist. Es ist Best Practice, dies zu vermeiden und stattdessen let oder const zu verwenden, die Bereichsvariablen erstellen.