Создание сложных пользовательских взаимодействий

В этом кратком обзоре приведён пример дизайна UMG (Unreal Motion Graphics) и его привязок Модель просмотра, которые можно использовать для создания пользовательского интерфейса для Сложного взаимодействия.

При создании сложного пользовательского взаимодействия не забудьте настроить событие для запуска этого взаимодействия. Также можно настроить триггеры событий, которые будут выдавать игрокам предметы за успешное завершение сложного взаимодействия.

Вы можете использовать эти примеры, настраивая внутриигровые видео, как только игроки или объекты будут целиться в определённые зоны.

Из этого документа вы узнаете, как создать сложное взаимодействие через нажатие, в котором игроки смогут удерживать вход триггера, чтобы целиться в нужные зоны.

Прежде чем приступить к настройке интерфейса, необходимо создать и импортировать все ресурсы, которые вы будете использовать в своих разработках. Подробнее об использовании материалов в разработках: Создание пользовательского интерфейса с помощью материалов.

Настройка устройства

Выполните следующие действия, чтобы создать пример игры в гольф, в которой игроки будут целиться в идеальную зону для успешного попадания. При разработке интерфейса можно переименовывать панели при их размещении на панели Иерархия.

1. Разместите устройство «Сложное взаимодействие» из Каталога ресурсов в своём проекте.

2. На панели «Сведения» устройства измените следующие настройки.

   

   Параметр	Значение	Описание
   Тип интерфейса	Шкала	Определяет тип отображаемого интерфейса.
   Пользовательский виджет	Добавьте свой Пользовательский виджет	Выберите пользовательский виджет, который будет использоваться для взаимодействия.
   Тип взаимодействия	Зажать и отпустить	Анимация «Зажать и отпустить» воспроизводится при удерживании кнопки триггера; взаимодействие активируется после отпускания.
   Цвет шкалы	Выберите цвет	В данном примере используется красный цвет.
   Размер области успешного попадания	80,0	Задаёт размер области успешного попадания в виде процентной доли шкалы.
   Расположение области успешного попадания	0,0	Задаёт расположение области успешного попадания.
   Размер области идеального попадания	15,0	Задаёт размер области идеального попадания в виде процентной доли области успешного попадания.
   Расположение области идеального попадания	100,0	Задаёт расположение области идеального попадания.
   Цвет области успешного попадания	Выберите цвет	В данном примере используется темно-зелёный цвет.
   Цвет области идеального попадания	Выберите цвет	В данном примере используется зелёный лаймовый цвет.

Добавление фонового изображения

Следуйте указаниям ниже, чтобы создать фоновое изображение по контуру для панели вертикальной шкалы. В данном кратком обзоре представлен закруглённый чёрный контур с делениями поверх прочих элементов.

В данном разделе для примера руководствуйтесь изображением выше.

1. Создайте для взаимодействия Пользовательский виджет.

2. Найдите и дважды нажмите на Пользовательский виджет, прикреплённый к устройству, чтобы открыть его Редактор пользовательского виджета.

3. На панели Иерархия перетащите и вложите Наложение, чтобы сделать его общим холстом. В данном примере ему присвоено название «Наложение». Затем перетащите ещё одно Наложение, которое будет содержать фон. В данном примере ему присвоено название SID.

4. Перетащите и вложите Изображение (в данном примере ему присвоено название «Панель») в дочернее Наложение.

5. На панели Сведения Изображения задайте материал или текстуру для фона.

Настройка зон

В своём примере вы можете создать недопустимую область, при попадании в которую игрок будет автоматически терпеть неудачу. В данном примере используется только область идеального попадания, состоящая из трёх контейнеров:

• Начальная пустая область PerfectZoneStart.

• Область идеального или успешного попадания SizeBox.

• Последующая пустая область PerfectZoneEnd.

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

1. С панели Палитра перетащите и вложите Стековое поле в дочернее Наложение (в примере для него задано название SID).

2. Затем перетащите и вложите следующие дочерние элементы в Стековое поле: Поле масштабирования > Размерное поле.

   1. На панели Сведения для панели Поле масштабирования для параметра Растягивание задайте значение Задаётся пользователем. Затем задайте Пользовательский масштаб, чтобы указать пространство, которое вы хотите создать над областью идеального попадания. Для целей этого примера установите масштаб 0,27.
   2. В Размерном поле для параметра Переопределение высоты задайте значение верхнего деления шкалы.

3. Внутри того же Стекового поля перетащите Размерное поле > Поле масштабирования > Наложение > Изображение.

   1. На панели Сведения Размерного поля для параметра Переопределение высоты задайте размер области идеального попадания.

   2. На панели Сведения для панели Поле масштабирования для параметра Растягивание задайте значение Задаётся пользователем. Затем для параметра Пользовательский масштаб задайте значение 1.

   3. Наложение области PerfectZone будет содержать материал или текстуру для области идеального попадания.

4. Внутри того же Стекового поля перетащите Наложение > Размерное поле.

   1. На панели Сведения для Наложения области PerfectZoneEnd для параметра Растягивание задайте значение Задаётся пользователем. Затем задайте Пользовательский масштаб, чтобы указать пространство, которое вы хотите создать над областью идеального попадания. Для целей этого примера установите масштаб 0,49.
   
   1. На панели Сведения Размерного поля для параметра Переопределение высоты задайте значение нижнего деления шкалы.
   

5. Для большей детализации можно добавить выемки для областей фона, добавив Изображение (в данном примере ему присвоено название «Выемки») под Стековым полем.

Настройка ползунка

В этом примере ползунок находится внутри перемещающегося контейнера. Для этого нужно создать Стековое поле с двумя элементами.

Первый элемент содержит Размерное поле со значением Пользовательский масштаб, которое позже вы привяжете к параметру Масштаб шкалы сложного взаимодействия в Модели просмотра. Второй элемент будет содержать контейнер с ползунком.

1. Перетащите и вложите под SID Наложения Стековое поле с названием ScrubberStackBox, которое будет содержать две дочерние настройки: Наложение > Размерное поле и Размерное поле > Поле масштабирования > Изображение с названием «Ползунок».

   1. На панели Сведения Наложения области ScrubberMovingZone для параметра Растягивание задайте значение Задаётся пользователем. Затем для параметра Пользовательский масштаб задайте значение 0.
   
   1. На панели Сведения Размерного поля для параметра Переопределение высоты задайте значение верхнего деления шкалы.
   
   1. Для параметра Переопределение высоты Размерного поля контейнера ScrubberContainer задайте значение 0.
   
   1. Измените значение настройки Растягивание для *Наложения поля масштабирования на Задаётся пользователем. Задайте для параметра Пользовательский масштаб значение 1**.
   
   1. В параметре Изображение для ползунка Изображение задайте материал или текстуру.
   

Настройка модели просмотра

Чтобы подключить пользовательский интерфейс к устройству «Сложное взаимодействие», выполните следующие действия:

1. В Пользовательском виджете выберите Окно > Модели просмотра, чтобы открыть окно Модели просмотра.

2. Нажмите +модель просмотра. Затем выберите Устройство: модель просмотра сложного взаимодействия и нажмите Выбрать.

3. Либо на нижней панели инструментов, либо на вкладке Окно выберите Просмотр привязок.

4. Настройте Просмотр привязок, как показано на изображении ниже.

   
   1. Нажмите +добавить виджет, чтобы добавить ScrubberMovingZone.
   2. Задайте для ScrubberMovingZone значение Пользовательский масштаб, а для UEFN_SkilledInteraction_ViewModel — Текущее значение шкалы.
   3. Нажмите +добавить виджет, чтобы добавить PerfectZoneStart.
   4. Задайте для PerfectZoneStart значение Пользовательский масштаб, а для UEFN_SkilledInteraction_ViewModel — значение Мин. область идеального попадания.
   5. Нажмите +добавить виджет, чтобы добавить PerfectZoneEnd.
   6. Задайте для PerfectZoneStart значение Пользовательский масштаб и добавьте функцию преобразования для Добавить Int / Double.
   7. Задайте для A значение 1.
   8. Задайте для B значение UEFN_SkilledInteraction_Viewmodel/Макс. область идеального попадания.
   9. Задайте для Инвертировать B значение True.