Редактор UI
Соберите двумерный интерфейс поверх сцены: меню, кнопки, надписи и экранные индикаторы. А потом свяжите его с объектами и логикой.
Любой двумерный интерфейс в AR Clip — это карточка. Карточка верстается как обычный экран, перед 3D-видом. Её текст остаётся чётким на любом расстоянии и на любом экране.
Здесь — о том, как собрать карточку. Как карточки ведут себя в запущенном проекте, описано на странице Карточки интерфейса.
Как открыть редактор
Есть четыре способа. Все они открывают один и тот же полноэкранный редактор:
- UI сцены в левой панели открывает интерфейс текущей сцены. Если его нет, он создаётся.
- Раздел UI в настройках сцены.
- Редактировать макет в компоненте UI объекта.
- UI-файл в Ассетах проекта.
Редактировать карточку могут несколько человек одновременно. Нажмите Сохранить, чтобы сохранить изменения, и Закрыть, чтобы выйти из редактора.
Он пустой и готов к работе. Создавать его не нужно: откройте и начинайте.
Как прикрепить карточку
Карточка — это файл. К объекту её прикрепляет компонент UI:
| Настройка | Варианты |
|---|---|
| UI-ресурс | Какую карточку показывать. |
| Режим | Оверлей (на весь экран) или Привязка (закреплена на объекте). |
| Привязка по X / Y | Какой край или угол карточки находится на объекте. Только в режиме привязки. |
| Включено | Показывать карточку или нет. |
| Сохранять переменные глобально | Значения в карточке сохраняются, когда посетитель переходит в другую сцену. |
Карточка на сцене всегда показывается как оверлей. Карточка на объекте может быть любой.
Она остаётся того размера, который вы задали, и скрывается, когда её объект оказывается за камерой. Если нужно, чтобы надпись уменьшалась с расстоянием, используйте 3D-текст.
Как связать UI со сценой
Есть три способа — от самого простого к самому гибкому.
- Встроенные действия. Карточка меняет сама себя: переключает экраны, задаёт переменную или запускает таймер. Всё, что касается только интерфейса, держите здесь.
- Шаги сцены. Редактор предлагает шаги движка как действия, вместе с их настройками: перейти на сцену, открыть ссылку, проиграть анимацию. Кнопка может управлять сценой без кода.
- Именованные действия и логика. Дайте действию id и реагируйте на него. В компоненте События объекта есть триггер Действие интерфейса; оставьте id пустым, чтобы ловить любое действие. Скрипт может слушать действия напрямую:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Храните значения вроде счёта и жизней в скриптах или патчах, а карточка пусть их показывает. Переменные карточки не общие для участников и сбрасываются при перезагрузке страницы.
Дальше: Настройки пространства — фон, освещение и единицы пространства.