Wonderland Engine per Sviluppatori Unity

Questa pagina fornisce corrispondenze tra Unity e Wonderland Engine per la programmazione e presenta un elenco 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 gira nel browser, che ha già un runtime JavaScript integrato. Questo lo rende la scelta migliore come linguaggio di scripting per un motore web, poiché non è necessario scaricare nulla di aggiuntivo.

Per creare uno script, fai clic con il tasto destro nel Browser delle Risorse del Wonderland Editor e crea un nuovo componente JavaScript / TypeScript. Troverai un modello base per iniziare.

Un buon IDE 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, avvicinandolo molto al C# e migliorando notevolmente l’autocompletamento del codice nel tuo IDE. Consigliamo generalmente TypeScript agli sviluppatori con esperienza in Unity.

Wonderland Engine gestisce automaticamente qualsiasi configurazione tsconfig.json per te; basta creare un componente TypeScript dal browser delle risorse.

Esportazione del progetto 

Mentre in Unity si utilizza spesso l’anteprima integrata nell’editor, in Wonderland Engine il processo di esportazione è così veloce che l’app finale nel browser può essere utilizzata come anteprima.

La pagina del browser si ricaricherà ogni volta che ripacchetti. Vai a Views > Preferences per disattivare “Force full page reloads” per cicli di ricaricamento ancora più veloci.

Per distribuire l’applicazione, carica semplicemente i contenuti 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 diversi file di progetto (.wlp). Controlla il Tutorial per il Cambio di Scene per istruzioni.

Puoi anche trasmettere parti di una scena in tempo reale; consulta il Tutorial sullo Streaming dei File .bin.

Prefab 

Wonderland Engine non ha ancora un equivalente ai prefab. Puoi invece 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 istanziarlo.

Importazione delle Risorse 

In Wonderland Engine, se un file di scena viene importato (tramite drag and drop dal browser delle risorse nel Viewer Scene o nell’Outline della Scena, o trascinando file immagine nello slot texture di un materiale), esso viene collegato e monitorato per i cambiamenti. Le risorse risultanti nel file di scena saranno disponibili nel progetto e visibili nella vista “Risorse”.

Fino a quando un file non viene importato dal browser delle risorse, non è disponibile per l’uso nel progetto. Il “Browser delle Risorse” può essere considerato un file browser, che potrebbe differire da quello 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 dell’esportazione del progetto.
• static contiene i file copiati nella cartella deploy così come sono.
• cache contiene i risultati della compilazione delle risorse memorizzati, come immagini compresse. Può generalmente essere cancellato in sicurezza, ma richiederà tempo per rigenerarsi.

Queste impostazioni si trovano nella vista “Risorse”.

Animazioni 

Le animazioni vengono riprodotte tramite il tipo di componente animation. Le animazioni con pelle sono ritargetizzate con l’opzione retarget se il componente è attaccato a uno dei segmenti/giunture della pelle target.

La modifica dei keyframe e la creazione di keyframe per eventi personalizzati sono supportate nell’Editor delle Animazioni (vedi Views > Animation Editor). Il blending delle tracce non è ancora supportato.

Fisica 

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

Networking 

La rete Peer-to-Peer può essere realizzata grazie al supporto della comunità con 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 multiuso.

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 è elencata una serie di pattern di codice comuni e i loro equivalenti in Wonderland Engine:

Comportamento Personalizzato 

In Wonderland Engine usiamo “Component” invece di “MonoBehaviour”. Per scriverne uno, estendi semplicemente 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', this.myName, this.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', this.myName, this.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 

1gameObject.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.setDiffuseColor([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, quindi è buona pratica evitare di aggiungere memoria allo heap sotto forma di liste/vettori o oggetti, che non vengono raccolti facilmente.

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

Libreria Matematica 

Ti consigliamo di usare glMatrix, una libreria matematica consapevole delle performance e della raccolta dei rifiuti per JavaScript/TypeScript. È già installata con i nostri modelli predefiniti e con i nostri componenti predefiniti, quindi probabilmente non sarà necessario installarla tu stesso.

Invece di restituire un vettore appena allocato, le funzioni di glMatrix che calcolano un vettore o un quaternione si aspettano che il primo parametro sia il luogo in cui scrivere il risultato. Le funzioni che restituiscono un primitivo restituiscono 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ù rilevanti quando si proviene da C# includono:

• Sempre usare this. per accedere alle variabili membro.
• var crea una “variabile globale”, che non è limitata all’ambito corrente. È buona pratica evitarlo e usare let o const al suo posto, che creano variabili limitate all’ambito.