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

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

С помощью Редактора виджетов можно импортировать:

• Изображения

• Заготовки диалоговых окон

• Файлы шрифтов

Отличный пример создания пользовательского интерфейса с помощью Редактора виджетов приведён на странице Урок по шаблону «Черепашки-ниндзя: Аркада».

Чтобы открыть Редактор виджетов:

1. Нажмите правой кнопкой мыши в Каталоге ресурсов и выберите Пользовательский интерфейс > Схема создания виджетов.

2. Выберите Вариант модального окна диалога в окне Выбор схемы создания виджета.

3. Присвойте название своей схеме создания виджетов и дважды нажмите на миниатюру виджета, чтобы открыть Редактор виджетов.

4. При создании пользовательских полей для диалога используются рабочие процессы, описанные на странице Редактор виджетов.

Виджеты, которые, скорее всего, будут использоваться с устройством «Диалог»:

• Панель холста: панель для размещения всех виджетов с контролем выравнивания и проч.

• UEFN TextBlock для ConversationModalDialogViewModel: для текста заголовка диалога.

• TextBlock UEFN для ConversationModalDialogViewModel: для основного текста диалога.

• Кнопка UEFN для ConversationModalDialogViewModel: для всех кнопок/выбора текста.

Привязка значений

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

Привязка текстовых значений для пользовательского поля диалога начинается с панели Иерархия в Редакторе виджетов.

1. Выберите виджет на панели «Иерархия». Вы можете начать с вершины иерархии и двигаться вниз до конца списка.  

2. Нажмите на «Просмотр привязок» на нижней панели инструментов. Откроется панель «Модель просмотра».  

   

3. Выберите нужный элемент, а затем нажмите + добавить виджет на панели Модель просмотра. Это позволит автоматически добавить виджет в список модели просмотра.

   

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

   

4. Выберите свойство для привязки на виджете, нажав на значок «Редактировать» на свойстве «Текст» в UEFN и выбрав Текст > Выбрать.

   

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

   

6. Нажмите Выбрать, чтобы завершить привязку значений к виджетам.

   1. Текстовые значения включают Заголовок, Тело или Основной текст кнопки#:

   2. Заголовок — это значение, заданное в поле «Имя говорящего» в устройстве «Диалог», или значение, заданное в заголовке устройства «Всплывающее диалоговое окно».

   3. Тело — это текст, который следует за заголовком и обычно предоставляет игроку варианты выбора для начала диалога. Здесь будут узлы Speech (Речь), связанные с узлом Default Entry Point (Стандартная точка входа).

   4. Основной текст кнопки# — это текст, который отображается в узлах Response (Ответ) в том порядке, в каком они расположены в графе диалогов.

   

Значения кнопок должны быть пронумерованы в соответствии с количеством используемых виджетов кнопок. Значения задаются в том же порядке, в котором были добавлены виджеты кнопок. Кнопки — это узлы Response (Ответ) в графе диалогов. Они привязывают текст к каждой из кнопок.

Привязка кнопок

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

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

1. Нажмите на Просмотр привязок на нижней панели инструментов.

   

2. Выбирайте кнопку по одной за раз на панели Иерархия Редактора виджетов. Виджет кнопки, выбранный на панели «Иерархия», автоматически помещается в поле «Виджет».

3. Нажмите на + добавить виджет. Виджет снова будет добавлен в список.

   

4. Нажмите на поле со стрелкой и выберите В одну сторону к модели просмотра.

   

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

6. Выберите значение Ответ в модели просмотра.

7. Выберите значение Ответ для кнопки в строке ниже. Итоговая привязка должна выглядеть так:

   

Вы также можете настроить исчезновение/появление кнопок в зависимости от того, заданы ли для них значения:

1. Выберите кнопку в иерархии и добавьте виджет к кнопке.

2. Выберите значение Видимость.

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

   

4. Теперь кнопка будет видна, только если можно выбрать ответ.

Нажмите на GIF, чтобы увеличить его.

Без привязки Видимость текст исчезнет из поля ответа и игроки увидят пустое поле выбора:

Нажмите на GIF, чтобы увеличить его. Текст > Выбрать

Привязка материалов

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

Материалы можно использовать для заполнения массива Материала диалога. Вы можете создавать пользовательские материалы с помощью импортированных файлов, которые можно преобразовать в текстуры в графе материалов. Следующие типы файлов являются стандартными для импорта растровых изображений (это неполный список):

• .png

• .webp

• .jpg

В устройстве «Диалог» добавьте материалы в массив Материал диалога. В графе диалога должен появиться узел Set Material (Задать материал). К материалам можно обратиться через привязки в графе.

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

1. В Редакторе виджетов интерфейса нажмите на виджет изображения на панели «Иерархия».

   

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

   

3. Нажмите на кнопку +добавить виджет, чтобы добавить виджет изображения на панель «Просмотр привязок».

   

4. Нажмите на значок Редактировать в виджете изображения в левом поле, чтобы открыть настройки виджета.

   

5. Выберите Виджет изображения > Кисть > Выбрать. Так выбранные привязки кисти будут добавлены в поле справа.

   

6. Нажмите на значок Редактировать в поле справа, чтобы открыть настройки привязки.

   

7. Выберите Функция преобразования > Создать кисть изображения из материала > Выбрать. Так откроются расширенные настройки определения материала, который вы хотите использовать для этого виджета.

   

8. В ячейке Материал выберите значок ссылки, а затем в меню выберите Модель просмотра модального диалогового окна в творческом режиме > Материал художественного эффекта 01 > Выбрать.

   

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

   

В итоге мы получаем материал, идентифицирующий говорящего персонажа.

Создание анимации интерфейса диалога

Вы также можете использовать материал диалога в анимации интерфейса. Для параметра Тип диалога в устройстве «Диалог» должно быть задано значение Окно или Пользовательский тип. В графе материалов можно обратиться к материалу диалога через устройство «Диалог» при использовании узла Play Conversation Animation (Воспроизвести анимацию диалога).

Чтобы привязать этот узел диалога к виджету интерфейса, используйте значение Прогресс в модели просмотра для привязки к анимации интерфейса, созданной в Sequencer.  Подробнее о том, как анимировать материал: Анимация интерфейса.