Wonderland Engine para Desarrolladores de Unity

Esta página ofrece correspondencias de Unity a Wonderland Engine para script y una lista de diferencias para construir soluciones.

Si prefieres el formato en video, no dudes en consultar nuestra guía de cambio en nuestro canal de YouTube:

Scripting 

Wonderland Engine se ejecuta en el navegador, que ya cuenta con un motor de JavaScript incorporado. Esto lo convierte en la mejor opción de lenguaje de script para un motor web, ya que no es necesario descargar nada adicional.

Para crear un script, haz clic derecho en el Navegador de Activos del Editor de Wonderland y crea un nuevo componente de JavaScript / TypeScript. Incluye una plantilla básica para ayudarte a comenzar.

Un buen IDE para usar con JS/TS es Visual Studio Code.

Para más información sobre cómo la API de Wonderland Engine difiere de la de Unity, consulta la sección de código.

TypeScript vs JavaScript 

TypeScript añade verificación de tipos estáticos a JavaScript, lo que lo acerca mucho más a C# y mejora enormemente la autocompletación de código en tu IDE. Generalmente recomendamos TypeScript a desarrolladores familiarizados con Unity.

Wonderland Engine maneja automáticamente cualquier configuración de tsconfig.json por ti, simplemente crea un componente TypeScript desde el navegador de activos.

Empaquetado 

Mientras que un flujo de trabajo de Unity a menudo usa la vista previa en el editor, en Wonderland Engine el proceso de empaquetado es lo suficientemente rápido como para que la aplicación final en el navegador pueda usarse como vista previa.

La página en el navegador se recarga cada vez que empaquetas nuevamente. Consulta Views > Preferences para desactivar “Forzar recarga de página completa” y obtener ciclos de recarga en vivo aún más rápidos.

Para desplegar la aplicación, simplemente sube los contenidos de la carpeta deploy de tu proyecto a un servidor web. Alternativamente, puedes subirlo a través del plugin “Wonderland Cloud Publish”, que se puede activar en Views > Plugins.

Múltiples Escenas 

Wonderland Engine permite cambiar entre múltiples escenas creadas en múltiples archivos de proyecto (.wlp). Consulta el Tutorial para Cambiar Escenas para obtener instrucciones.

También puedes transmitir partes de una escena en tiempo de ejecución, consulta el Tutorial de Transmisión de Archivos .bin.

Prefabs 

Wonderland Engine todavía no tiene un equivalente a los prefabs. En su lugar, puedes configurar un prototipo en la escena y usar object.clone() para duplicar la jerarquía con todos sus componentes.

Alternativamente, mueve el objeto del prefab a una escena separada para cargarlo durante la ejecución usando engine.loadPrefab(…) e instanciarlo.

Importación de Activos 

En Wonderland Engine, si un archivo de escena se importa (arrastrando y soltando desde el navegador de activos ya sea en la Vista de Escena o en el Esquema de Escena, o arrastrando archivos de imagen en la ranura de textura de un material), se vincula y se monitorea para detectar cambios. Los recursos resultantes que se encontraron en el archivo de escena estarán disponibles en el proyecto y se pueden ver en la vista “Resources”.

Hasta que un archivo sea importado desde el Navegador de Activos, no estará disponible para su uso en el proyecto. El “Navegador de Activos” podría considerarse un explorador de archivos, lo cual es diferente de lo que podrías estar acostumbrado en Unity.

Optimización de Activos 

Una vez importados, los activos pueden optimizarse aún más:

• Las mallas pueden ser auto-reducidas para disminuir la cantidad de vértices.
• Las mallas se pueden escalar de manera uniforme.
• Las imágenes se comprimen automáticamente.
• Las imágenes pueden reducirse de tamaño.

Estas configuraciones se encuentran en la vista “Resources”.

Directorios 

• deploy contiene el resultado final del empaquetado.
• static contiene archivos que se copian a deploy tal cual.
• cache contiene resultados de compilación de activos en caché, por ejemplo, imágenes comprimidas. Puede ser eliminado con seguridad, pero tomará tiempo regenerar.

Estas configuraciones se encuentran en la vista “Resources”.

Animaciones 

Las animaciones se reproducen a través del tipo de componente animation. Las animaciones esqueléticas se refocalizan con la casilla de verificación retarget si el componente está unido a uno de los huesos/articulaciones de la piel objetivo.

La edición de fotogramas clave y los eventos “Evento Personalizado” de fotograma no están soportados todavía en el Editor de Animación (consulta Views > Animation Editor). La mezcla de pistas aún no es compatible.

Física 

Los cuerpos rígidos se crean a través del tipo de componente physx. La escena puede ser simulada en el editor con Debug > Simulate Physics (Shift + Alt + S).

Redes 

La red de Peer-to-Peer se puede lograr con el soporte comunitario de Wonderland Engine PeerJS Networking.

Usa WebRTC, que hasta cierto punto puede aprovechar la infraestructura de servidor predeterminada de PeerJS.

Alternativamente, la comunidad ha integrado Colyseus para multiusuario.

Interfaz de Usuario 

La interfaz de usuario se configura manualmente con el cursor, cursor-target y el componente collider.

La siguiente UI 2D basada en HTML5 Canvas es mantenida por la comunidad: Proyecto Lazy Widgets.

Terminología 

Código 

A continuación, se presenta una lista de patrones de código comunes y sus equivalentes en Wonderland Engine:

Comportamiento Personalizado 

En Wonderland Engine tenemos “Component” en lugar de “MonoBehaviour”. Para escribir uno, simplemente extiende la clase 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    /* Las propiedades se exponen en el editor */
 7    static Properties = {
 8        myName: Property.string('Alice'),
 9    };
10
11    privateName = 'Bob';
12
13    start() {
14        console.log('Mi nombre es', this.myName, this.privateName);
15    }
16
17    update(dt) {
18        console.log('Tiempo delta:', 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    /* Las propiedades se exponen en el editor */
 8    @property.string('Alice')
 9    myName!: string;
10
11    privateName = 'Bob';
12
13    start() {
14        console.log('Mi nombre es', this.myName, this.privateName);
15    }
16
17    update(dt: number) {
18        console.log('Tiempo delta:', dt);
19    }
20}

Como en Unity, se generarán algunos elementos de la interfaz de usuario para los parámetros.

Obtener un componente en un objeto de juego 

1gameObject.GetComponent<MyComponent>();

1// Preferido, ya que el tipo puede deducirse
2this.object.getComponent(MyComponent);
3
4// o: por nombre del tipo
5this.object.getComponent('my-component');

Adjuntar un componente a un objeto 

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

1this.object.addComponent(MyComponent, {property: 'set'});
2
3// o: por nombre de tipo
4this.object.addComponent('my-component', {property: 'set'});
5
6// o: posponer activación
7const sc = this.object.addComponent('my-component', {active: false});
8sc.property = 'set';
9sc.active = true;

Obtener un objeto hijo 

1
2gameObject.transform.GetChild(0);

1this.object.children[0];

Obtener objeto padre 

1gameObject.transform.parent

1this.object.parent;

Establecer una Propiedad de Material 

Establecer varias propiedades de material como color o texturas.

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

Matemáticas 

JavaScript no soporta sobrecarga de operadores, lo que significa que tomamos un enfoque diferente para el código matemático.

En muchos casos, se puede evitar completamente el uso de código matemático, ya que la API Object3D de Wonderland Engine contiene muchas funciones para manipular transformaciones, implementadas eficientemente en WebAssembly:

1/* Traslada un objeto en múltiples ejes. Para evitar residuos en el vector, usa un miembro vector temporal o constante en el ámbito del módulo. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Rota un objeto alrededor del eje Y. */
5const AxisY = [0, 1, 0];
6this.object.rotateAxisAngleDegLocal(AxisY, 25);

Recolección de Basura 

JavaScript es un lenguaje con recolección de basura que puede causar interrupciones no planificadas debido a la recolección automática de basura. Es buena práctica evitar agregar memoria al heap en forma de listas/vectores u objetos, que no son recolectados de manera trivial.

Es buena práctica crear vectores/cuaterniones temporales ya sea en el constructor o en el cuerpo de un componente personalizado y reutilizarlos, o si se usan con cuidado, en el ámbito del módulo de tu componente (arriba de la clase). Los vectores constantes como [0, 1, 0] se declaran mejor en el ámbito del módulo como const AxisY = [0, 1, 0].

Biblioteca Matemática 

Recomendamos usar glMatrix, una biblioteca matemática que tiene en cuenta el rendimiento y la recolección de basura para JavaScript/TypeScript. Ya viene instalada con nuestras plantillas y componentes predeterminados, por lo que probablemente no necesites instalarla por ti mismo.

En lugar de devolver un vector recién asignado, las funciones de glMatrix que calculan un vector o cuaternión esperarán que el primer parámetro señale dónde deben escribir el resultado. Las funciones que devuelven un primitivo devolverán el resultado como de costumbre.

Encuentra la documentación completa de la biblioteca matemática glMatrix aquí.

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# 

Algunas diferencias importantes al venir de C# incluyen:

• Siempre prefija this. para acceder a variables miembro.
• var crea una “global”, que no está restringida al alcance actual. Es buena práctica evitarlo y usar let o const en su lugar, que crean variables de ámbito.