Создание Основного Меню в UMG UI Designer и Unreal Engine 4

0
138
Создание Основного Меню в UMG UI Designer ue4

Первым делом стоит создать макет нашего Основного Меню, что мы и сделаем ниже.

  1. Откройте свой Widget Blueprint MainMenu.

2. На вкладке Designer перетащите виджеты из палитры (Palette) в Иерархию, чтобы выполнить настройку ниже.Иерархия UMG UI ue4

Для справки у нас есть изображение, вертикальный блок с Текстом и 3 кнопки с Текстом на нашего Canvas Panel.

3. Выберите вертикальный блок в Иерархии , а затем кликните правой кнопкой мышки и Скопируйте его.

4. Кликните правой кнопкой мышки по Canvas Panel и выберите опцию Paste, чтобы вставить вторую копию Вертикального Блока. копию Вертикального Блока UMG UI ue4

5. В новом вертикальном блоке скопируйте правой кнопкой мышки Кнопку и вставьте ее, чтобы создать четвертый виджет Button/Text. виджет Button/Text UMG UI ue4

6. Выберите Вертикальный блок на панели Details, дайте ему новое имя MainMenu, опция isVariable должна быть включена, и установите параметр ZOrder на 1.опция isVariable UMG UI ue4

Мы называем виджет для ясности и устанавливаем его в переменную, чтобы мы могли получить к нему доступ, а также устанавливаем ZOrder так, чтобы он отображался поверх нашего изображения, которое мы установим через мгновение.

7. Выберите другой Вертикальный блок и на панели Details переименуйте его в Options, отметьте опцию isVariable и установите для ZOrder значение 1.

8. Переименуйте каждую из кнопок, как показано на рисунке ниже.переименовать кнопки UMG UI ue4

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

9. Обновите каждый из текстовых виджетов, как показано ниже, через раздел Text в разделе Content на панели Details.обновить текстовый виджет UMG UI ue4

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

10. Удерживая нажатой клавишу Ctrl, выберите каждую из кнопок, затем на панели Details установите цвет Tint для наведенного и установите для каждого Fill для Size.создать основное меню UMG UI ue4

Здесь мы корректируем размер всех наших кнопок, а также определяем цвет кнопки, которую нужно использовать при наведении на нее курсора.

11. Выберите Изображение в Иерархии, затем на панели Details внутри раздела Appearance и Brush выберите TextureSprite или Material для своего применения.1 создать основное меню UMG UI ue4

Если вы хотите использовать тот же, что и в этом руководстве, вы можете скачать его отсюда: Пример Фона. Перетащите образец фона в Unreal Engine, чтобы импортировать его (нажмите Yes в любом подтверждающем сообщении).

12. В окне Designer измените размер изображения, чтобы оно занимало весь макет.окно Designer UMG UI ue4

13. На панели Details для изображения нажмите кнопку Anchor и выберите параметр экрана заполнения. Вы также можете использовать Scalebox для хранения изображения, которое будет гарантировать, что изображение масштабируется и изменяется соответствующим образом, чтобы соответствовать пропорциям.2 создать основное меню UMG UI ue4

14. Выберите оба вертикальных блока и закрепите (Anchor) их в левом центре.закрепить блок UMG UI ue4

15. Выберите Options для Вертикального Блока и установите для параметра Visibility значение Hidden.параметры для блока UMG UI ue4

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

16. Выберите MainMenu вертикального блока, измените его размер и разместите его в окне Designer.MainMenu UMG UI ue4

17. Вы можете настроить шрифт, размер и выравнивание (FontSize, Alignment) на панели Details каждого текстового виджета.настройка виджета UMG UI ue4

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

18. Настройте параметры вертикального блока по своему усмотрению, затем переместите ее непосредственно за вертикальный блок главного меню.Создание Основного Меню в UMG UI Designer ue4

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

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите свой комментарий!
Пожалуйста, введите ваше имя: