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

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

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

Скриптинг 

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

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

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

Страница в браузере будет перезагружаться при каждой перепаковке. Чтобы сделать живую перезагрузку еще быстрее, в Views > Preferences отключите “Force full page reloads”.

Для развертывания приложения, просто загрузите содержимое папки 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, если компонент прикреплен к одной из костей/суставов целевой кожи.

Ключевой кадр и событие ключевого кадра поддерживаются в редакторе анимации (см. Views > Animation Editor). Смешивание дорожек пока не поддерживается.

Физика 

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

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

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

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

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

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

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

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

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

Код 

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

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

В Wonderland Engine вместо “MonoBehaviour” используем “Component”. Чтобы написать его, просто расширьте класс 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', 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    /* Свойства отображаются в редакторе */
 8    @property.string('Alice')
 9    myName!: string;
10
11    privateName = 'Bob';
12
13    start() {
14        console.log('My name is', this.myName, this.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.setDiffuseColor([0.0, 1.0, 0.0, 1.0]);

Математика 

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

Во многих случаях написание математического кода можно избежать вообще, так как API Wonderland Engine Object3D содержит много функций для манипуляции трансформациями, эффективно реализованных в 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 вместо этого, которые создают переменные с локальной областью видимости.