Wonderland Engine für Unity-Entwickler

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

Wenn Du das Videoformat bevorzugst, sieh 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.

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

Verpacken 

Während Du in Unity oft die Editor-Vorschau verwendest, ist der Verpackungsprozess in der Wonderland Engine schnell genug, dass die finale App im Browser als Deine Vorschau genutzt werden kann.

Die Seite im Browser wird jedes Mal neu geladen, wenn Du neu packst. Sieh unter Ansichten > Einstellungen nach, um “Erzwinge vollständige Seiten-Neuladungen” zu deaktivieren, für noch schnellere Live-Reload-Zyklen.

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

Mehrere Szenen 

Wonderland Engine ermöglicht das Wechseln 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 

Wonderland Engine hat derzeit noch kein Pendant zu Prefabs. Stattdessen kannst Du einen Prototyp in der Szene einrichten und die Hierarchie mit allen Komponenten durch object.clone() klonen.

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 die Szenenstruktur, oder durch das Ziehen von Bilddateien in einen Material-Texturslot), wird sie verlinkt und Änderungen werden überwacht. Die gefundenen Ressourcen in der Szenendatei stehen im Projekt zur Verfügung und können in der “Ressourcen”-Ansicht eingesehen werden.

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

Optimierung von Assets 

Einmal importiert, 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 endgültige Ergebnis 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, braucht aber Zeit zum Neugenerieren.

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

Animationen 

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

Keyframe-Bearbeitung und „Benutzerdefinierte Event“-Keyframes werden im Animation Editor unterstützt (siehe Ansichten > Animation Editor). Track-Blending wird derzeit noch nicht unterstützt.

Physik 

Starre Körper werden über den physx Komponententyp erstellt. Die Szene kann im Editor mit Debug > Physik simulieren (Shift + 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 Colyseus für Multi-User 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: 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', this.myName, this.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', this.myName, this.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.setDiffuseColor([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 in 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.