Wonderland Engine per Sviluppatori Unity

Questa pagina fornisce corrispondenze tra Unity e Wonderland Engine per la programmazione e indica una lista di differenze per la costruzione di soluzioni.

Se preferisci il formato video, dai un’occhiata alla nostra guida di transizione sul nostro canale YouTube:

Programmazione 

Wonderland Engine viene eseguito nel Browser, che ha già un runtime JavaScript integrato. Questo lo rende la scelta migliore come linguaggio di scripting per un motore web, dato che non è necessario scaricare nulla di aggiuntivo.

Per creare uno script, fai clic con il tasto destro nel visualizzatore delle risorse dell’editor di Wonderland e crea un nuovo componente JavaScript / TypeScript. Include un modello base per iniziare.

Un buon IDE da usare per JS/TS è Visual Studio Code.

Per ulteriori informazioni su come l’API di Wonderland Engine differisce da quella di Unity, consulta la sezione Codice.

TypeScript vs JavaScript 

TypeScript aggiunge il controllo dei tipi statici a JavaScript, avvicinandosi molto a C# e migliorando notevolmente il completamento del codice nel tuo IDE. Raccomandiamo generalmente TypeScript agli sviluppatori che hanno familiarità con Unity.

Wonderland Engine gestisce automaticamente qualsiasi configurazione tsconfig.json per te; crea semplicemente un componente TypeScript dal visualizzatore delle risorse.

Packaging 

Mentre un flusso di lavoro Unity utilizzerà spesso l’anteprima all’interno dell’editor, in Wonderland Engine il processo di packaging finale è così veloce (meno di 1 secondo) che l’app finale nel browser può essere utilizzata come anteprima.

La pagina nel browser si ricaricherà ogni volta che ricompili, e controlla Views > Preferences per farla eseguire automaticamente dopo ogni salvataggio.

Per distribuire l’applicazione, basta caricare il contenuto della cartella deploy del tuo progetto su un server web. In alternativa, puoi caricare tramite il plugin “Wonderland Cloud Publish”, che può essere attivato in Views > Plugins.

Scene Multiple 

Wonderland Engine consente di passare tra più scene create in file di progetto multipli (.wlp). Controlla il Tutorial sul Cambio di Scene per le istruzioni.

È anche possibile trasmettere parti di una scena in tempo reale, fai riferimento al Tutorial sui File .bin in Streaming.

Prefab 

Wonderland Engine non ha ancora un equivalente ai prefab. In alternativa, puoi impostare un prototipo nella scena e usare object.clone() per duplicare la gerarchia con tutti i suoi componenti.

In alternativa, sposta l’oggetto prefab in una scena separata per caricarlo durante il runtime usando engine.loadPrefab(…) e istanziandolo.

Importazione delle Risorse 

In Wonderland Engine, se un file di scena viene importato (facendo drag and drop dal visualizzatore delle risorse nel Visualizzatore Scene o nell’Outline della Scena, o trascinando file immagine nello slot texture di un materiale), è collegato e monitorato per i cambiamenti. Le risorse risultanti nel file di scena saranno rese disponibili nel progetto e possono essere visualizzate nella vista “Risorse”.

Fino a quando un file non è importato dal Visualizzatore delle Risorse, non è disponibile per l’uso nel progetto. Il “Visualizzatore delle Risorse” può essere considerato un browser di file, che potrebbe differire da ciò a cui sei abituato in Unity.

Ottimizzazione delle Risorse 

Una volta importate, le risorse possono essere ulteriormente ottimizzate:

• Le mesh possono essere automaticamente decimate per ridurre il numero di vertici
• Le mesh possono essere scalate uniformemente
• Le immagini sono compresse automaticamente
• Le immagini possono essere ridimensionate

Queste impostazioni si trovano nella vista “Risorse”.

Directory 

• deploy contiene il risultato finale del packaging.
• static contiene i file che sono copiati nella cartella deploy così come sono.
• cache contiene i risultati della compilazione delle risorse memorizzati, ad esempio immagini compresse. Può generalmente essere eliminato in sicurezza, ma richiederà tempo per rigenerarsi.

Queste impostazioni si trovano nella vista “Risorse”.

Animazioni 

Le animazioni sono riprodotte tramite il tipo di componente animation. Le animazioni con pelle sono ritargetizzate con la casella retarget, se il componente è attaccato a uno dei segmenti/giunture della pelle target.

Il blending, l’editing dei keyframe o gli eventi keyframe non sono ancora supportati.

Fisica 

I corpi rigidi sono creati tramite il tipo di componente physx. La scena può essere simulata nell’editor con Debug > Simulate Physics (Alt + S).

Networking 

La networking Peer-to-Peer può essere realizzata con il supporto della comunità tramite Wonderland Engine PeerJS Networking.

Utilizza WebRTC, che può fino a una certa scala utilizzare l’infrastruttura del server PeerJS predefinito.

In alternativa, la comunità ha integrato Colyseus per il multiutente.

Interfaccia Utente 

L’interfaccia utente è impostata manualmente con cursor, cursor-target, e il componente collider.

Il seguente progetto di UI 2D basata su HTML5 Canvas è mantenuto dalla comunità: Lazy Widgets project.

Terminologia 

Codice 

Di seguito è riportata una lista di pattern di codice comuni e i loro equivalenti in Wonderland Engine:

Comportamento personalizzato 

In Wonderland Engine abbiamo “Component” invece di “MonoBehaviour”. Per scriverne uno, devi semplicemente estendere la classe Component.

 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  /* Le proprietà sono esposte nell'editor */
 7  static Properties = {
 8      myName: Property.string("Alice")
 9  };
10
11  privateName = "Bob";
12
13  start() {
14    console.log("Mi chiamo", myName, privateName);
15  }
16
17  update(dt) {
18    console.log("Delta time:", 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  /* Le proprietà sono esposte nell'editor */
 8  @property.string("Alice")
 9  myName!: string;
10
11  privateName = "Bob";
12
13  start() {
14    console.log("Mi chiamo", myName, privateName);
15  }
16
17  update(dt: number) {
18    console.log("Delta time:", dt);
19  }
20}

Come in Unity, alcuni elementi dell’interfaccia utente verranno generati per i parametri.

Ottenere un componente su un oggetto di gioco 

1gameObject.GetComponent<MyComponent>();

1// Preferito, poiché il tipo può essere inferito
2this.object.getComponent(MyComponent);
3
4// oppure: per nome tipo
5this.object.getComponent('my-component');

Aggiungere un componente a un oggetto 

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

1this.object.addComponent(MyComponent, {property: "set"});
2
3// oppure: per nome tipo
4this.object.addComponent('my-component', {property: 'set'});
5
6// oppure: attivazione differita
7const sc = this.object.addComponent('my-component', {active: false});
8sc.property = 'set';
9sc.active = true;

Ottenere un oggetto figlio 

1
2gameObject.transform.GetChild(0);

1this.object.children[0];

Ottenere un oggetto genitore 

1gameObject.transform.parent

1this.object.parent;

Impostare una Proprietà del Materiale 

Impostare varie proprietà del materiale come colore o texture.

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];

Matematica 

JavaScript non supporta il sovraccarico degli operatori, il che significa che adottiamo un approccio diverso al codice matematico.

In molti casi, scrivere codice matematico può essere evitato del tutto, poiché l’API di Object3D di Wonderland Engine contiene molte funzioni per manipolare trasformazioni, implementate in modo efficiente in WebAssembly:

1/* Traduce un oggetto su più assi. Per evitare garbage per il vettore, usa un vettore temporaneo come membro o una costante nell'ambito del modulo. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Ruota un oggetto attorno all'asse Y. */
5const AxisY = [0, 1, 0];
6this.object.rotateAxisAngleDegLocal(AxisY, 25);

Garbage Collection 

JavaScript è un linguaggio con garbage collection che può causare interruzioni imprevedibili a causa della raccolta automatica dei rifiuti, è buona pratica evitare di aggiungere memoria allo heap in forma di liste/vettori o oggetti, che non sono raccolti in modo banale.

È buona pratica creare vettori/quaternioni temporanei o nel costruttore o nel corpo di un componente personalizzato, e riutilizzarli, oppure se usati attentamente, nel campo del modulo del tuo componente (sopra la classe). I vettori costanti come [0, 1, 0] sono meglio dichiarati nel campo del modulo come const AxisY = [0, 1, 0].

Libreria Matematica 

Raccomandiamo l’uso di glMatrix, che è una libreria matematica consapevole della performance e della garbage collection per JavaScript/TypeScript. È già installata con i nostri modelli predefiniti e con i nostri componenti predefiniti, quindi probabilmente non hai bisogno di installarla tu stesso.

Piuttosto che restituire un vettore nuovo allocato, le funzioni di glMatrix che calcolano un vettore o un quaternione si aspetteranno che il primo parametro sia dove il risultato deve essere scritto. Le funzioni che restituiscono un primitivo restituiranno il risultato normalmente.

Trova la documentazione completa della libreria matematica glMatrix qui.

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# 

Alcune differenze più prominenti quando si proviene da C# includono:

• Precedi sempre le variabili membro con this. per accedervi.
• var crea una “globale”, che non è limitata all’ambito corrente. È buona pratica evitarlo e usare let o const al suo posto, che creano variabili a livello di ambito.