UI Editor
Весь двумерный интерфейс в AR Clip (HUD, меню, кнопки, подписи) — это карточка, свёрстанная как обычный интерфейс перед 3D-видом. Именно поэтому текст остаётся чётким на любом расстоянии и на любом экране.
Как карточки ведут себя во время работы — в Карточках интерфейса; эта страница о том, как её собрать.
Как открыть
Четыре входа, все ведут в один и тот же полноэкранный редактор:
- кнопка Scene UI в левой рейке — открывает интерфейс активной сцены и создаёт его, если его ещё нет;
- настройки сцены, раздел UI;
- UI-компонент объекта, через Edit layout;
- UI-файл в ассетах проекта.
Редактор совместный, у него есть Apply и Close.
Создавать его не нужно — просто откройте и начинайте.
Как привязать карточку
Карточка — это файл, а UI-компонент привязывает её к объекту:
| Настройка | Варианты |
|---|---|
| UI resource | какая карточка |
| Mode | Overlay (на весь экран) или Anchored (приколота к объекту) |
| Anchor X / Y | каким углом или краем она садится на объект — только для anchored |
| Enabled | показывать или нет |
| Keep variables | значения переживают переход между сценами |
Карточка на сцене всегда overlay. Карточка на объекте может быть любой.
Она остаётся того размера, каким вы её нарисовали, и скрывается, когда её объект уходит за камеру. Если нужно что-то, масштабирующееся с расстоянием, используйте 3D-текст.
Как связать UI со сценой
Три способа, по возрастанию возможностей.
Встроенные действия — карточка меняет саму себя: переключить экран, задать переменную, запустить таймер. Всё, что касается только интерфейса, должно остаться здесь.
Шаги сцены — шаги движка предлагаются прямо в редакторе как действия с нормальными параметрами: перейти к сцене, открыть URL, проиграть анимацию. Так кнопка управляет сценой без единой строчки кода.
Именованные действия плюс логика — дайте действию id и реагируйте на него. У компонента Events объекта есть триггер UI-действия (оставьте id пустым, чтобы ловить любое), а скрипт может слушать напрямую:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {});
ui.onAction('restart', () => {});
Обратный подход — считать переменные карточки источником правды — разваливается в тот момент, когда это значение понадобится где-то ещё: переменные карточки не общие для участников и сбрасываются при перезагрузке.
Дальше: Настройки space