Экран выбора миссии

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

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

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

1-й шаг: определение стиля выбора миссии

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

На этапе разработки советуем сразу определять, какая информация будет отображаться на вашем экране выбора миссии.

2-й шаг: разработка макета

Разработайте макет экрана миссии перед открытием UMG. Любые изменения в дизайне, которые вы сделаете на этом этапе, не являются постоянными и могут быть изменены без нарушения какой-либо функции интерфейса. Макет экрана зависит от того, какую информацию вы хотите добавить.

На данном этапе необходимо принять четыре начальных решения по макету:

• Цветовая схема: при использовании цветов в интерфейсе используйте правило 60 / 30 / 10.

• Выбор шрифта: в настоящее время есть два варианта шрифта: Burbank и HeadingNow.

• Материалы: используйте материалы шаблона функций интерфейса, чтобы придать интерфейсу уникальный вид.

• Изображения / Текстуры: текстуры следует использовать для сложных художественных объектов, которые трудно воссоздать с помощью материалов, таких как персонажи или художественные контейнеры.

После выбора цветовой схемы создайте материалы и экземпляры материалов для использования в дизайне интерфейса.

В этом примере мы использовали простой дизайн. В верхней части экрана есть призыв к действию: «Выберите миссию», — за которым следуют три изображения с 1-й, 2-й и 3-й миссией, на каждом из которых есть кнопка «НАЧАТЬ».

3-й шаг: разработка макета виджета

В примере макет виджета состоит из 4 основных частей:

1. Дизайн фона

2. Дизайн плитки для 1-й миссии

3. Дизайн плитки для 2-й миссии

4. Дизайн плитки для 3-й миссии

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

1. Создайте и откройте папку пользовательского интерфейса.

2. Внутри папки создайте виджет варианта модального диалогового окна.

3. Назовите его Mission_Select_UI.

4. Дважды нажмите на виджет Mission_Select_UI, чтобы открыть Редактор виджетов.

Дизайн фона

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

В Редакторе виджетов выполните следующие действия:

1. Перетащите виджет наложения с панели Палитра на граф виджета. Этот виджет станет корневым виджетом и будет выступать в качестве экрана, на котором отображается интерфейс.

2. В графе виджета увеличьте виджет наложения до размера 1920 x 1080.

   

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

   

4. Измените значение макета графа на Желаемый. Это позволит задать для интерфейса точный размер для отображения на любом экране.

   

   Вы можете просмотреть, как меняется интерфейс в зависимости от платформы, выбрав экран в выпадающем меню «Размер экрана».

   

5. Перетащите панель Наложение с панели Палитра под виджет Корневой и переименуйте её в Родительский контейнер. В этом виджете наложения будут находиться все части экрана выбора миссии.

   

   Этот виджет должен иметь такой же размер, что и корневой виджет. 

6. Измените значения параметров выравнивания для виджета «Родительский контейнер» на «Заполнение по горизонтали» и «Заполнение по вертикали».

   

7. Перетащите виджет изображения с панели Палитра на панель Иерархия под виджет Родительский контейнер.

8. Нажмите правой кнопкой мыши на виджет изображения, чтобы открыть контекстное меню. Выберите Переименовать из выпадающего меню и назовите виджет Цвет фона интерфейса

   

9. Выберите виджет Цвет фона интерфейса на панели Иерархия, чтобы открыть его настройки на панели Сведения.

10. В блоке Ячейка (ячейка наложения) задайте следующие настройки выравнивания:

    1. Выравнивание по горизонтали = Заполнение по горизонтали

    2. Выравнивание по вертикали = Заполнение по вертикали

    

11. В блоке Внешний вид выберите материал основного цвета с помощью выпадающего меню Кисть > Изображение. Так виджет изображения примет цвет материала.

    

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

    

13. В блоке Ячейка (ячейка наложения) задайте следующие настройки:

    1. Выравнивание по горизонтали = Выравнивание по центру

    2. Выравнивание по вертикали = Выравнивание по центру

    3. Отступ = 64.0

    

14. Перетащите стековое поле в виджет Тело и переименуйте его в Контент. В стековом поле для расположения дочерних виджетов используется выравнивание по горизонтали и вертикали.

    

15. Измените настройки выравнивания для виджета Контент на Заполнение по горизонтали и Заполнение по вертикали.

    

16. В блоке Поведение измените значение параметра Ориентация на Вертикальная.

    

Добавление текста выноски

1. Перетащите виджет Текстовое поле с панели Палитра и вложите его в виджет Контент. Он станет текстом выноски, побуждающим игроков выбрать миссию.

2. Переименуйте текстовое поле в Выберите миссию.

   

3. Выберите виджет Выберите миссию на панели Иерархия, чтобы открыть его параметры на панели Сведения.

4. В блоке Ячейка (ячейка наложения) задайте следующие настройки:

   1. Размер = Автоматический

   2. Выравнивание по горизонтали = Выравнивание по левому краю

   3. Выравнивание по вертикали = Заполнение по вертикали

   

5. Нажмите на поле «Текст», удалите текст по умолчанию и введите Выберите миссию.

   

6. В блоке Внешний вид задайте следующие настройки: 

   1. Цвет и непрозрачность = Шестн. линейное E0137CFF

   2. Семейство шрифта = HeadingNow

   3. Вид шрифта = 86Bold

   4.  Размер = 85

   5. Размер контура = 2

   6. Острые углы = Выбрано

   7. Цвет контура = Шестн. линейное FFFFFFFF

   

7. Перетащите виджет изображения в виджет Контент и переименуйте его в Разделитель. Этот виджет используется в качестве разделителя для создания пространства между надписью и плитками миссии.

   

Добавление пространства для плитки миссии

1. Перетащите виджет наложения в виджет Контент и переименуйте его в Плитки.

   

2. Перетащите виджет изображения в виджет Плитки и переименуйте его в TileBG.

   

3. Выберите виджет TileBG на панели Иерархия, чтобы открыть его параметры на панели Сведения.

4. В блоке Ячейка (ячейка наложения) задайте следующие настройки:

   1. Выравнивание по горизонтали = Заполнение по горизонтали 

   2. Выравнивание по вертикали = Заполнение по вертикали

   

5. В блоке Внешний вид задайте следующие настройки.

   1. Кисть > Изображение = Второстепенный материал фона

   2. Размер изображения:

      1. X = 1200

      2. Y = 32.0

   

6. Перетащите виджет Стековое поле в виджет Плитки и переименуйте его в Плитки миссии. Это стековое поле будет упорядочивать плитки миссии слева направо.

   

Макет фона готов. На данном этапе экран выбора миссии будет пустым.

Далее необходимо разместить три плитки выбора миссии в виджете «Стековое поле». Вы также добавите в дизайн текстуру персонажа, чтобы сделать его более интересным с визуальной точки зрения. Дизайн плитки для 1-й миссии

Дизайн плитки миссии может содержать информацию об уровне и целях, а также статистику о целях игрока, и с ее помощью можно даже отслеживать прогресс игрока в достижении этих целей. В этом примере мы использовали для плитки более упрощённый дизайн. В фоновой текстуре содержится представление уровня, номер миссии и кнопка «Начать». Использование серии стековых полей позволяет размещать виджеты слева направо или вверху и внизу. Если вы используете компоновку по вертикали или горизонтали, стековое поле помогает обеспечить единообразный вид вашей компоновки. Для всех трёх плиток миссии используется один и тот же шаблон дизайна. Следуйте указаниям ниже, чтобы создать все три плитки выбора миссии.

1. Перетащите виджет наложения на панель решётки панели Иерархия и переименуйте его в 1-я миссия. Так вы создадите участок, содержащий все элементы дизайна для плитки «1-я миссия».

   

2. Выберите виджет 1-я миссия на панели Иерархия, чтобы открыть его параметры на панели Сведения.

3. В блоке Ячейка (ячейка стекового поля) задайте следующие настройки Отступа:

   1. Слева = 0.0

   2. Сверху = 0.0

   3. Справа = 24.0

   4. Снизу = 0.0

   

4. Перетащите виджет изображения на виджет 1-я миссия на панели Иерархия и переименуйте его в Mission1Image. Этот виджет является визуальным представлением 1-й миссии.

   

5. Выберите Mission1Image на панели Иерархия, чтобы открыть его параметры на панели Сведения.

6. В блоке Ячейка (ячейка стекового поля) задайте следующие настройки:

   1. Выравнивание по горизонтали = Полностью по горизонтали

   2. Выравнивание по вертикали = Полностью по вертикали

   

7. В разделе Внешний вид измените следующие настройки:

   1. Изображение = текстура 1-й миссии

   2. Размер изображения:

      1. X = 256.0

      2. Y = 256.0

   

   Настройка размера изображения обеспечивает ещё один уровень определения дизайна плитки.

Упорядочивание содержимого плитки

1. Перетащите виджет Стековое поле в виджет 1-я миссия и переименуйте его в M1Content.

   

2. Выберите M1Content на панели Иерархия, чтобы открыть его параметры на панели Сведения.

3. В блоке Ячейка (ячейка наложения) измените следующие настройки:

   1. Выравнивание по горизонтали = Выравнивание по центру

   2. Выравнивание по вертикали = Выравнивание по центру

   

   В результате все дочерние виджеты стекового поля выровняются по центру.

4. В блоке Поведение задайте для параметра Ориентация значение Вертикальная. В результате все дочерние виджеты будут располагаться вертикально.

   

5. Перетащите виджет наложения в виджет M1Content и переименуйте его в M1Header. Это наложение выступает в качестве корзины для всех ресурсов заголовка и форматирует их в соответствии с настройками наложения.

   

6. Выберите M1Header на панели Иерархия, чтобы открыть его параметры на панели Сведения.

7. В блоке Ячейка (ячейка стекового поля) измените следующие настройки:

   1. Отступы

      1. Слева = 0.0

      2. Сверху = 0.0

      3. Справа = 0.0

      4. Снизу = 128.0

   2. Размер = Автоматический

   3. Выравнивание по горизонтали = Выравнивание по центру

   4. Выравнивание по вертикали = Полностью по вертикали

   

   Уникальные настройки отступа позволяют создать отступ справа от плитки 1-й миссии.

Стилизация текста в плитки миссии

1. Перетащите виджет изображения в M1Header и измените его имя на M1Stroke.

   

2. Выберите M1Stroke на панели Иерархия, чтобы открыть его параметры на панели Сведения.

3. В блоке Ячейка (ячейка наложения) задайте значения выравнивания Полностью по горизонтали и Полностью по вертикали.

   

4. В блоке Внешний вид задайте следующие настройки:

   1. Изображение = Материал рассечения

   2. Размер изображения:

      1. X = 200.0

      2. Y = 32.0

   

5. Перетащите текстовое поле в виджет M1Header и переименуйте виджет в Mission_1.

   

6. Выберите текстовый виджет Mission_1 на панели Иерархия, чтобы открыть его параметры на панели Сведения.

7. В блоке Ячейка (ячейка наложения) задайте следующие настройки выравнивания:

   1. Выравнивание по горизонтали = Выравнивание по центру

   2. Выравнивание по вертикали = Выравнивание поверху

   

8. Измените текст на 1-я миссия.

   

9. В инструменте Кисть > Изображение откройте палитру и выберите акцентный цвет текста.

10. Задайте следующие параметры в блоке Шрифт:

    1. Вид шрифта = Жирный

    2. Размер = 25.0

    3. Интервал между символами = 65

    4. Величина наклона = 0.28

    

11. В разделе Параметры контура задайте следующие настройки:

    1. Размер контура = 1

    2.  Альфа отдельной заливки = Выбрано

    3. Применить контур к тени = Выбрано

    4. Цвет контура = Выберите основной цвет в инструменте «Палитра»

    

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

    

Добавление кнопки «Начать»

1. Перетащите виджет «Кнопка "Заглушить"» в виджет M1Content и переименуйте его в Start_M1_Button.

   

2. Выберите START_M1_Button на панели Иерархия, чтобы открыть её параметры на панели Сведения.

3. Измените текст кнопки на НАЧАТЬ.

   

4. В разделе Ячейка (ячейка стекового поля) задайте для параметра Мин. высота значение 56. Так вы уменьшите высоту кнопки.

   

5. Установите флажок для параметра Выбор > Можно выбрать. Так игрок сможет выбрать эту кнопку.

   

6. В блоке Ввод задайте следующие настройки:

   1. Метод касания = Вниз

   2. Метод нажатия = Нажатие на кнопку

   

7. Повторите описанные выше этапы для создания макетов для 2-й миссии и 3-й миссии.

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

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

Добавление текстуры персонажа

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

1. Перетащите виджет изображения в виджет тела и переименуйте его в Персонаж.

   

2. Выберите виджет персонажа на панели Иерархия, чтобы открыть его параметры на панели Сведения.

3. В блоке Внешний вид задайте следующие настройки:

   1. Кисть > Изображение = Текстура персонажа

   2. Размер изображения:

      1. X = 700

      2. Y = 700

   

4. В блоке Ячейка (ячейка решётки) задайте следующие настройки:

   1. Выравнивание по горизонтали = Выравнивание по правому краю

   2. Выравнивание по вертикали = Полностью по вертикали

   3. Подталкивание = используйте инструменты для осей X и Y, чтобы точно разместить текстуру персонажа в нужном месте.

   

По готовности секции миссии можно привязать функции кнопок в интерфейсе.

4-й шаг: добавление модели просмотра

Модель просмотра управляет данными игрока с помощью списка функций и позволяет привязать виджеты UMG к устройствам творческого режима. Есть конкретная модель просмотра, которая работает с кнопками: CreativeModalDialogViewmodel. Эта модель просмотра работает только с виджетом варианта модального диалогового окна и предоставляет множество функций кнопки.

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

1. Откройте меню Окна в строке главного меню.

   

2. Выберите Модели просмотра из выпадающего меню. Панель CreativeModalDialogViewmodel автоматически документируется в окне Редактора виджетов.

   

Все функции кнопки добавлены в виджет. Теперь нужно добавить привязки, чтобы кнопки работали.

5-й шаг: добавление устройств

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

Устройство «Всплывающее диалоговое окно»

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

1. Перетащите устройство Всплывающее диалоговое окно в окно просмотра.

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

   1. Описание = Экран выбора миссии

   2. Автоматическое отображение = Начало игры

   3. Тип отклика = 3 кнопки

   

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

3. Задайте следующие параметры в блоке Расширенные настройки:

   1. Кнопка «Назад» по умолчанию = Нет

   2. Текст 1-й кнопки = НАЧАТЬ

   3. Текст 2-й кнопки = НАЧАТЬ

   4. Текст 3-й кнопки = НАЧАТЬ

   5. Скрыть фон = Выбрать

   6. Активно во время фазы = Только игровой процесс

   

   

4. Прокрутите вниз до пункта Модальный виджет > Класс переопределения шаблона и выберите виджет Translation_Select_UI из выпадающего меню.

   

5. Прокрутите список вверх до пункта Пользовательские настройки — функции и в блоке Показать откройте Элемент массива.

6. Добавьте Точку появления 1-го игрока в верхнее поле.

7. Выберите значение При появлении игрока для функции «Точка появления».

   

Устройства «Телепорт»

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

1. Перетащите устройство Телепорт в окно просмотра.

2. На панели Сведения в пользовательских настройках снимите флажок с пункта Отображение разлома телепорта и Воспроизвести визуальные эффекты.

   

3. Прокрутите вниз до пункта Пользовательские настройки — функции и в блоке Телепорт откройте Элемент массива.

4. Добавьте Всплывающее диалоговое окно в верхнее поле.

5. Выберите При нажатии на 1-ю кнопку.

   

6. Скопируйте устройство «Телепорт» 2 раза.

7. В каждой из функций устройства «Пользовательские настройки — функции > Телепорт > Всплывающее диалоговое окно измените функцию на соответствующую кнопку (При срабатывании 2-й кнопки, При срабатывании 3-й кнопки).

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

6-й шаг: просмотр привязок

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

В этом примере кнопки привязаны к устройствам Телепорт через функцию «Телепортация». Когда игрок выбирает миссию, нажатие кнопки НАЧАТЬ активирует подключённый телепорт и телепортирует игрока в зону этой миссии.

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

1. Выберите Start_Mission_1_Button на панели Иерархия, а затем выберите Просмотр привязок на нижней панели инструментов. Откроется окно «Просмотр привязок» с уже выбранной кнопкой «Без звука».

   

2. Выберите +добавить виджет Start_Mission_1_Button. Так вы создадите просмотр привязки.

   

3. Выберите левое поле, которое содержит Start_Mission_1_Button, а затем выберите При нажатии > Событие из выпадающего меню. Событие При нажатии будет добавлено к кнопке «Без звука».

   

4. Выберите правое поле, а затем выберите CreativeModalDialogViewmodel > Отклик > Выбрать из выпадающего меню. Это позволит добавить функцию Отклик к событию кнопки «При нажатии».

   

5. В выпадающем меню Отклик выберите 1-ю кнопку. Теперь функция привязана к первой кнопке «Без звука».

   

6. Повторите этапы, описанные выше, чтобы привязать следующие две кнопки.

   

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

Результат

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

Самостоятельная работа

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

• Вы можете заменить текстуру фоновой плитки миссии на материал. Это придаст экрану миссии другой вид.

  

• Вы можете добавить устройство «Управление заданиями», чтобы отслеживать статистику игрока или собранные объекты.

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