Wonderland Engine для разработчиков Unity

Эта страница предоставляет соответствия между Unity и Wonderland Engine для скриптинга и предоставляет список различий для построения решений.

Если вы предпочитаете видеоформат, обязательно ознакомьтесь с нашим руководством по переходу на нашем канале YouTube:

Скриптинг 

Wonderland Engine работает в браузере, в котором уже встроено JavaScript-окружение. Это делает его наилучшим выбором для веб-движка, так как ничего дополнительного не нужно загружать.

Чтобы создать скрипт, кликните правой кнопкой мыши в обозревателе активов Wonderland Editor и создайте новый компонент JavaScript/TypeScript. Он имеет базовый шаблон, чтобы помочь вам начать.

Хорошая IDE для JS/TS – это Visual Studio Code.

Для получения дополнительной информации о том, как API Wonderland Engine отличается от Unity, см. раздел Код.

TypeScript против JavaScript 

TypeScript добавляет статическую проверку типов в JavaScript, что приближает его к C# и значительно улучшает автодополнение кода в вашей IDE. Мы, как правило, рекомендуем TypeScript разработчикам, знакомым с Unity.

Wonderland Engine автоматически обрабатывает любую настройку tsconfig.json для вас, просто создайте компонент TypeScript из обозревателя активов.

Упаковка 

В то время как рабочий процесс Unity часто использует предварительный просмотр в редакторе, в Wonderland Engine процесс окончательной упаковки настолько быстрый (меньше 1 секунды), что конечное приложение в браузере может использоваться в качестве предварительного просмотра.

Страница в браузере будет перезагружаться при каждой перепаковке, и проверьте Views > Preferences, чтобы она запускалась автоматически после каждого сохранения.

Для развертывания приложения, вам нужно просто загрузить содержимое папки deploy вашего проекта на веб-сервер. В качестве альтернативы, вы можете загрузить через плагин “Wonderland Cloud Publish” который можно активировать в Views > Plugins.

Несколько сцен 

Wonderland Engine позволяет переключаться между несколькими сценами, созданными в множественных файлах проекта (.wlp). Ознакомьтесь с Руководством по переключению сцен для получения инструкций.

Вы также можете загружать части сцены во время выполнения, см. Руководство по потоковой передаче .bin-файлов во время выполнения.

Префабы 

В Wonderland Engine пока нет эквивалента префабов. Вместо этого, вы можете настроить прототип в сцене, и object.clone() иерархию со всеми его компонентами.

В качестве альтернативы, переместите объект префаба в отдельную сцену для загрузки во время выполнения, используя engine.loadPrefab(…) и создавая экземпляр.

Импорт активов 

В Wonderland Engine, если файл сцены импортирован (путем перетаскивания из обозревателя активов либо в просмотр сцены, либо в контур сцены, или путем перетаскивания изображений в слот текстуры материала), он связывается и отслеживается на предмет изменений. Найденные в файле сцены ресурсы будут доступны в проекте и могут быть просмотрены в окне “Ресурсы”.

Пока файл не будет импортирован из обозревателя активов, он не доступен для использования в проекте. “Обозреватель активов” может рассматриваться как файловый обозреватель, который отличается от того, к чему вы могли привыкнуть в Unity.

Оптимизация активов 

После импорта активы могут быть дополнительно оптимизированы:

• Сетки могут быть автоматически упрощены для уменьшения количества вершин.
• Сетки могут быть масштабированы равномерно.
• Изображения автоматически сжимаются.
• Изображения могут быть уменьшены.

Эти настройки находятся в окне “Ресурсы”.

Директории 

• deploy содержит итоговый результат упаковки.
• static содержит файлы, которые копируются в deploy без изменений.
• cache содержит результаты кэширования компиляции активов, например, сжатые изображения. Обычно их можно безопасно удалить, но их восстановление займет некоторое время.

Эти настройки находятся в окне “Ресурсы”.

Анимации 

Анимации проигрываются через тип компонента animation. Кожаные анимации перенаправляются с помощью флажка retarget, если компонент прикреплен к одной из костей/суставов целевой кожи.

Смешивание, редактирование ключевых кадров или событий ключевых кадров пока не поддерживается.

Физика 

Жесткие тела создаются через тип компонента physx. Сцена может быть симулирована в редакторе с помощью Debug > Simulate Physics (Alt + S).

Сетевое взаимодействие 

Peer-to-Peer сетевое взаимодействие может быть достигнуто с поддерживаемым сообществом Wonderland Engine PeerJS Networking.

Оно использует WebRTC, который в определенной мере может использовать инфраструктуру сервера по умолчанию PeerJS.

В качестве альтернативы, сообщество интегрировало Colyseus для многопользовательского режима.

Пользовательский интерфейс 

Пользовательский интерфейс настраивается вручную с помощью cursor, cursor-target и компонента collider.

Следующий 2D UI на основе HTML5 Canvas поддерживается сообществом: проект Lazy Widgets.

Терминология 

Код 

Ниже приведен список общих шаблонов кода и их эквивалентов в Wonderland Engine:

Пользовательское поведение 

В Wonderland Engine у нас есть “Component” вместо “MonoBehaviour”. Чтобы написать его, просто расширьте класс 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  /* Свойства отображаются в редакторе */
 7  static Properties = {
 8      myName: Property.string("Alice")
 9  };
10
11  privateName = "Bob";
12
13  старт() {
14    console.log("My name is", 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  /* Свойства отображаются в редакторе */
 8  @property.string("Alice")
 9  myName!: string;
10
11  privateName = "Bob";
12
13  start() {
14    console.log("My name is", myName, privateName);
15  }
16
17  update(dt: number) {
18    console.log("Delta time:", dt);
19  }
20}

Как и в Unity, некоторые элементы UI будут генерироваться для параметров.

Получить компонент на игровом объекте 

1gameObject.GetComponent<MyComponent>();

1// Предпочтительно, так как тип можно определить
2this.object.getComponent(MyComponent);
3
4// или: по имени типа
5this.object.getComponent('my-component');

Присоединить компонент к объекту 

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

1this.object.addComponent(MyComponent, {property: "set"});
2
3// или: по имени типа
4this.object.addComponent('my-component', {property: 'set'});
5
6// или: отложить активацию
7const sc = this.object.addComponent('my-component', {active: false});
8sc.property = 'set';
9sc.active = true;

Получить дочерний объект 

1
2gameObject.transform.GetChild(0);

1this.object.children[0];

Получить родительский объект 

1gameObject.transform.parent

1this.object.parent;

Установить свойство материала 

Установите различные свойства материала, такие как цвет или текстуры.

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

Математика 

JavaScript не поддерживает перегрузку операторов, что означает, что мы используем другой подход к написанию математического кода.

Во многих случаях можно полностью избежать написания математического кода, так как Object3D API Wonderland Engine содержит множество функций для манипуляций с трансформациями, эффективно реализованных в WebAssembly:

1/* Перемещение объекта по нескольким осям. Чтобы избежать создания мусора для вектора, используйте временный вектор-член или константу в области модуля. */
2this.object.translateWorld([1, 2, 3]);
3
4/* Поворот объекта вокруг оси Y. */
5const AxisY = [0, 1, 0];
6this.object.rotateAxisAngleDegLocal(AxisY, 25);

Сборка мусора 

JavaScript — язык с автоматическим управлением памятью, который может вызывать непредсказуемые прерывания из-за автоматической сборки мусора, поэтому рекомендуется избегать создания объектов, находящихся в куче, в виде списков/векторов или объектов, которые не могут быть тривиально удалены.

Лучшей практикой является создание временных векторов/кватернионов либо в конструкторе, либо в теле пользовательского компонента и их повторное использование, или, если используется осторожно, в области модуля вашего компонента (выше класса). Постоянные векторы, такие как [0, 1, 0], лучше всего объявлять в области модуля как const AxisY = [0, 1, 0].

Математическая библиотека 

Мы рекомендуем использовать glMatrix, которая является производительной и учитывающей сборку мусора библиотекой для математических вычислений в JavaScript/TypeScript. Она уже установлена в наших стандартных шаблонах и в стандартных компонентах, поэтому, скорее всего, вам не нужно устанавливать её самостоятельно.

Вместо возвращения вновь выделенного вектора, функции glMatrix, вычисляющие вектор или кватернион, ожидают, что первым параметром будет указано, куда следует записать результат. Функции, возвращающие примитив, будут возвращать результат как обычно.

Полную документацию математической библиотеки glMatrix можно найти здесь.

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 против C# 

Некоторые более заметные различия при переходе с C# включают:

• Всегда добавляйте префикс this. для доступа к переменным-членам.
• var создает “глобальную”, которая не ограничена текущей областью видимости. Рекомендуется избегать ее и использовать let или const вместо этого, которые создают переменные с областью видимости.