Отображение Health, Energy & Ammo в UMG UI Designer и Unreal Engine 4

0
60
Отображение Health, Energy & Ammo в UMG UI Designer ue4

Визуальное Отображение – Здоровье, Энергия и Боеприпасы

Здесь мы начнем настраивать визуальные аспекты нашего HUD.

  1. Откройте свой HUD Widget Blueprint для доступа к редактору виджетов Widget Blueprint Editor.Отображение Health, Energy & Ammo в UMG UI Designer ue4

Внутри Widget Blueprint Editor мы можем предоставить визуальный макет и скриптовую функциональность нашего HUD.

Для дополнительной информации о каждом из различных аспектов редактора Widget Blueprint Editor прочтите раздел документации Widget Blueprints.

2. Внутри окна Palette в разделе Panel перетащите Horizontal Box (горизонтальный блок) на панель CanvasPanel в окне Hierarchy. перетащить Horizontal Box ue4

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

3. Также в разделе Panel перетащите два Vertical Boxes (вертикальных блока) на Horizontal Box (горизонтальный блок).перетащить Vertical Boxes ue4

4. В разделе Common перетащите два текстовых виджета на первый Вертикальный Блок и два Progress Bars (индикатора выполнения) на второй вертикальный блок.два индикатора выполнения ue4

5. Выберите горизонтальный блок, затем на графике измените размер блока и поместите его в верхний левый угол окна.изменить размер блока ue4

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

6. Выберите оба Progress Bars (индикатора выполнения), затем на панели Details установите оба на значения Fill для параметра Size.значения Fill для Size ue4

7. Выберите Вертикальный Блок, содержащий индикаторы выполнения, и установите для него также значение Fill.значение Fill для вертикального блока ue4

8. Снова выберите Горизонтальный Блок и измените его размер, чтобы столбцы совпали с текстом.1 изменить размер блока ue4

9. Выберите самый верхний текстовый виджет Text в окне Hierarchy, а затем на панели Details внутри раздела Content введите Health :.ввести значение Health ue4

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

10. Выберите индикатор выполнения рядом со значением Здоровья и на панели Details установите параметр Fill Color and Opacity на зеленый цвет.параметр Fill Color and Opacity ue4

Вы можете заметить, что индикатор выполнения не меняет цвет при назначении цвета. Это связано с тем, что значение Percent заполнения панели установлено на 0.0 (вы можете изменить это значение, чтобы проверить разные цвета, позже мы свяжем это со значением здоровья нашего персонажа).

11. Также установите цвет заливки для энергетической панели Energy (мы выбрали Оранжевый цвет).

12. Для отображения боеприпасов, используя методы, приведенные выше, добавьте виджеты в Hierarchy, чтобы ваши настройки были изложены, как показано ниже.панель Energy ue4

13. С горизонтального блока Horizontal Box, содержащего выбранную информацию о боеприпасах, измените его размер и поместите в верхний правый угол.2 Horizontal Box ue4

14. Если горизонтальный блок все еще выбран, на панели Details нажмите Anchors (якоря) и выберите правый верхний Якорь.Anchors в отображении Energy ue4

Это переместит Медальон Якоря в верхний правый угол экрана.двигать медальон якоря ue4

Закрепляя Виджет, вы указываете виджету, что он должен появиться в своем положении относительно положения медальона Якоря независимо от размера экрана. Другими словами, когда размер экрана изменяется, переместите виджет на то же расстояние от позиции медальона Якоря (в этом примере на то же расстояние от верхнего правого угла экрана).

Вы можете протестировать экран разных размеров, щелкнув и изменив параметр Preview Size внутри графика.

Скрипт – Здоровье, Энергия и Боеприпасы

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

1. Нажмите кнопку Graph в верхнем правом углу окна Widget Blueprint Editor.кнопка Graph ue4

2. Внутри Graph внутри узла Event Construct кликните правой кнопкой мышки и добавьте узел Get Player Character.

3. Перетащите пин Return Value и выберите Cast to FirstPersonCharacter. Cast to FirstPersonCharacter ue4

Здесь мы проверяем, является ли Blueprint персонажа, используемый персонажем игрока, действительно First Person Character Blueprint.

4. Перетащите пин As First Person Character и выберите Promote to Variable (переместить в переменную) (назовите его My Character), затем подключитесь, как показано.Promote to Variable ue4

Это позволит нам получить доступ к переменным, содержащимся в нашем FirstPersonCharacter Blueprint.

5. Нажмите Compile на панели инструментов, чтобы скомпилировать скрипт.

6. Вернитесь на вкладку Designer и выберите индикатор выполнения – Progress Bar рядом с Health.

7. На панели Details в разделе Progress выберите параметр Bind рядом с Percent и установите для него значение Health из MyCharacter.параметр Bind ue4

Это связывает значение индикатора прогресса с нашей переменной Health внутри нашего First Person Character Blueprint. Теперь, когда значение нашего Здоровья изменяется в нашем Character Blueprint, оно автоматически обновляется и в нашем HUD. Вы также можете заметить, что индикатор выполнения не изменяется после привязки. Это потому, что мы заявили, что это происходит при построении событий – Event Construct (или когда создается HUD, что происходит при запуске игры).

8. Выберите индикатор выполнения рядом с Энергией и повторите описанный выше процесс, привязав Percent к Energy из MyCharacter.энергия персонажа ue4

9. Выберите 25 после текста Ammo, затем на панели Details для Text кликните Bind и Create Binding.создать привязку ue4

Теперь, подобно тому, как мы ранее использовали Sub-Object Properties для привязки свойств того же типа, мы также можем создавать наши собственные пользовательские привязки. Здесь мы собираемся связать наше свойство Text со свойством Integer из нашего First Person Character Blueprint, что дает нам отображение наших текущих боеприпасов.

10. Внутри функции, которая создается и автоматически открывается, удерживайте Ctrl и перетащите переменную MyCharacter в график.переменная MyCharacter ue4

11. Перетащите пин MyCharacter и выберите полученный Ammo.

12. Присоедините пин Ammo к Return Value узла Return Node.узел Return Node ue4

Узел преобразования To Text будет автоматически создан для вас при подключении.

13. Повторите описанную выше процедуру для остальных 25 текстов и создайте привязку для текста “Max Ammo”.текст Max Ammo ue4

Вам, вероятно, не нужно делать это, если ваш Max Ammo останется прежним, однако это позволит вам изменить его.

14. Нажмите Compile и Save, затем нажмите кнопку Play, чтобы воспроизвести в редакторе. Наши значения Здоровья, Энергии и Боеприпасов теперь отображаются в нашем HUD и отражают наши текущие значения из нашего Character Blueprint. Нажатие пробела приведет к прыжку персонажа и истощению энергии, нажатие левой кнопки мышки выстрелит из оружия, уменьшающего наши боеприпасы, а нажатие F приведет к потере здоровья (которое вы могли бы подключить к системе урона позже).

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

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

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