Wonderland Engine para Desarrolladores de Unity

Esta página proporciona correspondencias de Unity a Wonderland Engine para scripting y proporciona una lista de diferencias para la creación de soluciones.

Si prefieres el formato de 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 tiene un runtime de JavaScript incorporado. Esto lo convierte en la mejor opción de lenguaje de scripting para un motor web, ya que no se necesita 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. Viene con una plantilla básica para comenzar.

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

Para obtener más información sobre cómo la API de Wonderland Engine es diferente 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 usará la vista previa en el editor, en Wonderland Engine el proceso de empaquetado final es tan rápido (menos de 1 segundo) que la aplicación final en el navegador puede usarse como vista previa.

La página en el navegador se recargará cada vez que repaquetes, y puedes comprobar en Views > Preferences para hacer que se ejecute automáticamente después de cada guardado.

Para desplegar la aplicación, simplemente necesitas subir el contenido de la carpeta deploy de tu proyecto a un servidor web. Alternativamente, puedes subir 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 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 es importado (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 está 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 se pueden auto-decimar para reducir el conteo de vértices.
• Las mallas se pueden escalar de manera uniforme.
• Las imágenes se comprimen automáticamente.
• Las imágenes se pueden reducir de escala.

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. Por lo general, se puede eliminar de forma segura, 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 con esqueleto se refocalizan con la casilla de verificación retarget, si el componente está adjunto a uno de los huesos/articulaciones de la piel de destino.

Aún no se admite la mezcla, edición de fotogramas clave o eventos de fotogramas clave.

Física 

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

Networking 

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, objetivo de cursor 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 muestra 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("Mi nombre es", this.myName, this.privateName);
14  }
15
16  void Update()
17  {
18    Debug.Log("Tiempo delta:", 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", myName, 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", myName, 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 componente en un objeto de juego 

1gameObject.GetComponent<MyComponent>();

1// Preferido, ya que el tipo puede inferirse
2this.object.getComponent(MyComponent);
3
4// o: por nombre de 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: deferir 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 diversas 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.diffuseColor = [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 escribir código matemático, ya que la API Object3D de Wonderland Engine contiene muchas funciones para manipular transformaciones, implementadas eficientemente en WebAssembly:

1/* Traducir un objeto en múltiples ejes. Para evitar residuos para el vector, usa un miembro vector temporal o constante en el ámbito del módulo. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Rotar 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 recogidos trivialmente.

Es buena práctica crear vectores/cuaterniones temporales ya sea en el constructor o cuerpo de un componente personalizado y reutilizarlos, o si se usan con cuidado, en el ámbito del módulo de tu componente (sobre la clase). 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, que es una biblioteca de matemáticas consciente del rendimiento y la recolección de basura para JavaScript/TypeScript. Ya viene instalada con nuestras plantillas predeterminadas y con nuestros componentes predeterminados, por lo que probablemente no necesites instalarla tú 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 sea el lugar donde se debe escribir el resultado. Las funciones que devuelven un primitivo devolverán el resultado como de costumbre.

Encuentra la documentación completa de la biblioteca de matemáticas 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 más notables 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.