Wonderland Engine für Unity-Entwickler

Diese Seite bietet Zuordnungen von Unity zur Wonderland Engine für Scripting und eine Liste von Unterschieden beim Erstellen von Lösungen.

Wenn Du das Videoformat bevorzugst, schau Dir gerne unseren Umstiegsleitfaden auf unserem YouTube-Kanal an:

Scripting 

Die Wonderland Engine läuft im Browser, der eine JavaScript-Laufzeitumgebung bereits integriert hat. Das macht JavaScript zur besten Wahl als Skriptsprache für eine Web-Engine, da nichts zusätzlich heruntergeladen werden muss.

Um ein Skript zu erstellen, klicke im Asset-Browser des Wonderland Editors mit der rechten Maustaste und erstelle eine neue JavaScript-/TypeScript-Komponente. Eine grundlegende Vorlage hilft Dir beim Einstieg.

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 der von Unity unterscheidet, sieh Dir den Code-Abschnitt an.

TypeScript vs JavaScript 

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

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

Verpacken 

Während Du in Unity oft die Editor-Vorschau verwendest, ist der finale Verpackungsprozess in der Wonderland Engine so schnell (weniger als eine Sekunde), dass Du die endgültige App im Browser als Vorschau verwenden kannst.

Die Seite im Browser wird jedes Mal neu geladen, wenn Du neu packst. Überprüfe Ansichten > Präferenzen, um es nach jedem Speichern automatisch ausführen zu lassen.

Um die Anwendung bereitzustellen, lade einfach den Inhalt des deploy-Ordners Deines Projekts auf einen Webserver hoch. Alternativ kannst Du 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. Sieh Dir das Anleitung zum Szenenwechsel für Anweisungen an.

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

Prefabs 

Die Wonderland Engine hat noch kein Äquivalent zu Prefabs. Stattdessen kannst Du einen Prototyp in der Szene einrichten und die Hierarchie mit all ihren Komponenten object.clone().

Alternativ kannst Du das Prefab-Objekt in eine separate Szene verschieben, um es zur Laufzeit mit engine.loadPrefab(…) zu laden und zu instanziieren.

Import 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 entdeckten Ressourcen in der Szenendatei werden im Projekt verfügbar gemacht und können in der “Ressourcen”-Ansicht angezeigt werden.

Bis eine Datei aus dem Asset-Browser importiert wird, ist sie im Projekt nicht verfügbar. Der “Asset-Browser” kann als Dateibrowser betrachtet werden, der sich von dem unterscheidet, was Du möglicherweise von Unity gewohnt bist.

Optimierung von Assets 

Nach dem Import können Assets weiter optimiert werden:

• Meshes können automatisch reduziert werden, um die Anzahl der Scheitelpunkte zu verringern
• 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 umgesetzt werden.

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

Alternativ hat die Community eine Integration mit Colyseus für Multi-User.

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: das Lazy Widgets Projekt.

Terminologie 

Code 

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

Benutzerdefiniertes Verhalten 

In der Wonderland Engine haben wir “Component” anstelle von “MonoBehaviour”. Um eins zu schreiben, erweiterst Du einfach die Component-Klasse:

 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  /* Eigenschaften 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  /* Eigenschaften 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 auf 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 keine Operator-Überladung, was bedeutet, dass wir einen anderen Ansatz für mathematischen Code wählen.

In vielen Fällen kann das Schreiben von mathematischem Code vollständig vermieden werden, da die Object3D API der Wonderland Engine viele Funktionen zur effizienten Manipulation von Transformationen in WebAssembly implementiert:

1/* Verschiebe ein Objekt auf mehreren Achsen. Um Garbage für den Vektor zu vermeiden, verwende ein temporäres Vektorelement oder eine Konstante im Gültigkeitsbereich des Moduls. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Drehe 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. Es ist daher ratsam, 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 gute Praxis, 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 Gültigkeitsbereich des Moduls Deiner Komponente (über der Klasse). Konstante Vektoren wie [0, 1, 0] sollten im Gültigkeitsbereich des Moduls als const AxisY = [0, 1, 0] deklariert werden.

Mathe-Bibliothek 

Wir empfehlen die Verwendung der glMatrix, einer mathe-bewussten Bibliothek für JavaScript/TypeScript, die performance- und garbage-collection-bewusst ist. Sie ist bereits mit unseren Standardvorlagen und mit unseren Standardkomponenten installiert, sodass Du sie wahrscheinlich nicht selbst installieren musst.

Anstatt einen neu zugewiesenen Vektor zurückzugeben, erwarten glMatrix-Funktionen, 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 zur 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 Wechsel von C# sind:

• Immer this. verwenden, um auf Mitgliedervariablen zuzugreifen.
• var erstellt eine “globale” Variable, die nicht auf den aktuellen Bereich beschränkt ist. Es ist ratsam, dies zu vermeiden und stattdessen let oder const zu verwenden, die Variablen mit Gültigkeitsbereich erstellen.