Карточки интерфейса
Карточки интерфейса — это ваш 2D-интерфейс: HUD, меню, кнопки, подписи и диалоги. Здесь — как разместить карточку и связать её со сценой.
Карточка раскладывается как обычный экран приложения, поверх 3D-вида. Поэтому текст на ней остаётся чётким на любом расстоянии и на экране любого размера. Текст на плоскости в 3D-мире зависит от того, где стоит камера, поэтому всё, что людям нужно прочитать, делайте на карточке.
Карточка — это файл в вашем проекте, который вы прикрепляете к объекту.
Добавьте карточку к объекту
- Выберите объект.
- В инспекторе нажмите + новый компонент и выберите UI.
- Выберите карточку в поле Выберите UI.
- Выберите Оверлей или Привязка.
- Нажмите Редактировать макет. Откроется Редактор UI, где можно оформить карточку.
Чтобы работать с интерфейсом всей сцены, нажмите UI сцены на левой панели. Как пользоваться редактором, описано на странице Редактор UI.
Оверлей или привязка
Оверлей занимает весь экран. Используйте его для HUD, меню или окна диалога.
Привязка прикрепляет карточку к точке на экране, где находится объект. Используйте её для имени над персонажем или цены над товаром.
Она остаётся такого размера, каким вы её сделали, и прячется, когда её объект оказывается за камерой. Это подпись, прикреплённая к объекту, а не объект в мире. Если нужно, чтобы что-то уменьшалось, когда человек отходит, используйте 3D-текст.
Из чего собирать
Карточка собирается из таких блоков:
container · text · image · gif · video · separator · grid · gallery
pager · tabs · state · indicator · slider · input · select · switch
Отдельного блока для кнопки нет. Кнопка — это text или container с фоном, отступами, рамкой и
действием. Поэтому кнопка выглядит ровно так, как нужно вашему дизайну.
- Шаблоны. Для всего, что повторяется, — строки в списке, чипа, карточки в галерее — один раз сделайте шаблон и используйте его снова.
- Экраны. У карточки может быть несколько экранов, и она сама переключается между ними, без участия сцены. Так делают панель с вкладками или диалог из нескольких шагов.
Собственные компоненты и сторонние расширения, например Lottie, не отображаются.
Научите карточку что-то делать
У карточки есть свои переменные. С их помощью она может менять сама себя: показывать и прятать части, подменять текст, переключать экраны, запускать таймеры. Всё, что касается только интерфейса, держите внутри карточки.
Если карточка должна повлиять на сцену, есть три способа — от простого к гибкому:
| Способ | Для чего |
|---|---|
| Встроенное действие карточки | только изменения интерфейса: вкладка, переключатель, таймер |
| Шаг сцены в действии | запустить шаг сцены без кода: сменить сцену, проиграть анимацию |
| Именованное действие и скрипт | игровая логика |
Действие на карточке ещё и отправляет событие вверх, через родителей объекта. Поэтому событие на сцене может поймать нажатие на любой карточке внутри неё. Используйте триггер Действие интерфейса и укажите ID действия, чтобы реагировать на одну кнопку, или оставьте поле пустым, чтобы реагировать на любое нажатие.
Скрипт может читать переменные карточки, менять их и слушать нажатия:
const ui = ctx.getDivKit(entity);
ui.set('score', (v) => v + 1);
ui.subscribe('lives', (v) => {
/* значение на экране изменилось */
});
ui.onAction('restart', () => {
/* нажали кнопку перезапуска */
});
Храните состояние игры в скрипте, а карточка пусть его показывает. Не наоборот.
Изображения и видео в карточке
Внутри карточки указывайте файл из проекта, а не URL. Это работает и внутри выражений, так что изображение можно выбирать по условию.
Прежде чем начать оформлять
- Карточка видна, только пока активна её сцена, поэтому интерфейс никогда не переходит из одной сцены в другую.
- На снимке 3D-вида ваших карточек нет. Проверяйте интерфейс в предпросмотре.
- Переменные карточки не общие для людей в одной сессии и сбрасываются при перезагрузке страницы. Всё, что должно быть общим или сохраняться, делайте в скрипте.
- Визуальный редактор показывает только часть свойств. Макеты, написанные вручную, не меняются, когда вы редактируете карточку, но панели свойств у них нет.
Дальше: Графы материалов — как собрать свой материал, когда стандартных не хватает.