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 vs 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  start() {
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;

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

1gameObject.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 не поддерживает перегрузку операторов, что означает, что для написания математического кода мы используем другой подход.

Во многих случаях написания математического кода можно полностью избежать, так как API Object3D 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 vs C# 

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

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