Niestandardowy UI WŻN: informacje o graczu w Unreal Editor dla Fortnite | Fortnite Dokumentacja

W tej sekcji dowiesz się, jak utworzyć w pełni spersonalizowane nakładki UI do swoich gier, postępując zgodnie z poniższą instrukcją, aby odtworzyć UI gracza z szablonu Arcade WŻN.

Podstawowy podział kroków jest następujący:

Pobierz pakiet tekstur Laboratorium materiałów UI za darmo i eksperymentuj z własnymi konfiguracjami UI!

Kliknij obraz, aby go powiększyć.

Zaczynajmy!

Konfigurowanie niestandardowych widżetów

W przeglądarce zawartości wybierz kolejno opcje Wszystko > [NAZWA twojego projektu > UI > Widżety i otwórz Blueprint widżetów UW_HUD_PlayerInfoBlock.

Po lewej stronie zobaczysz kartę Hierarchia, która działa podobnie jak Outliner z głównego okna edytora i wyświetla różne komponenty gotowego widżetu.

Panel tła

Górna część składa się z trzech obrazów panelu tła, które pozwalają uzyskać warstwowy efekt wizualny UI. Obejmują one:

Backplate1_Image – warstwa tła w odcieniach szarości
Backplate2_Image – warstwa pomarańczowego obrysu
Backplate3_Image – warstwa białego obrysu

Razem obrazy te tworzą przypominającą ramkę stylistykę panelu z informacjami o graczu.

Podczas importowania obrazów do UI wybierz dla opcji Grupa tekstur ustawienie UI, a dla opcji Ustawienia kompresji ustawienie UserInterface2D(RGBA8).

Nazwa gracza

Ten komponent składa się z dwóch elementów: nazwy aktywnego gracza i nazwy nieaktywnego gracza, które pojawią się, gdy gracz będzie żywy, zostanie zlikwidowany lub rozłączy się z grą.

Wybierz dwa różne kolory, które będą informować graczy, kto w ich drużynie jest obecnie aktywny, a kto został wyeliminowany.

Dla nazwy aktywnego gracza wybierz w opcji Widoczność ustawienie Widoczny, a dla nieaktywnego wybierz ustawienie Ukryty. Będzie to widoczne tylko pod pewnymi warunkami.

Ustaw Zastąpienie szerokości na 220.0, aby dłuższe nazwy graczy nie nakładały się na ikonę awatara gracza.

Ikona awatara gracza

Ten komponent wyświetla portret postaci gracza w oparciu o wybraną przez niego skórkę w grze.

Komponent jest powiązany z instancją materiału o nazwie MI_UI_PlayerCard, znajdującą się w folderze UI > Instancje materiałów.

Tę instancję materiału możesz dostosować do własnych upodobań, zmieniając ustawienia w panelu Szczegóły. Spróbuj zaimportować własny obraz i dodać kilka kolorów konturów!

W tym przykładzie wybranym obrazem jest pusty, przezroczysty obraz, który zostanie później połączony ze skórką postaci.

Zdrowia

Ten komponent zawiera regiony, które będą wyświetlać poziom zdrowia i osłony gracza.

Na poziomie nadrzędnym widać pole rozmiaru, które określa, jak duży może być cały region.

Dalej jest obraz panelu tła zdrowia o nazwie MI_UI_Health_Backplate. Ten materiał UI jest również dostępny w folderze Fortnite > UI > Materiały. Można go bardzo łatwo dostosowywać i natychmiast zapewnia on wiele opcji wyświetlania paska zdrowia gracza.

Na górze panelu tła znajduje się pole stosu składające się z dwóch komponentów: paska zdrowia i cienia o nazwach odpowiednio Health_Image i Health_Shadow.

Health_Image to konfigurowalny materiał UI paska postępu. Po otwarciu instancji materiału możesz ją powiększyć, zmieniając Rozmiar podglądu.

Spróbuj zmienić niektóre ustawienia w panelu Szczegóły, aby zobaczyć, jak wpływają one na istniejący materiał.

Wartości parametrów skalarów (stan wypełnienia paska postępu) mieszczą się w zakresie od 0 do 1, a wartości zdrowia i osłony w Fortnite zazwyczaj mieszczą się w zakresie od 0 do 100, dlatego ważne jest, aby ustawić Mnożnik na 0.01, aby wartości zdrowia i osłony były poprawnie wyświetlane graczom.

Pasek Health_Shadow to prosta cieniowana nakładka dodana ze względów estetycznych.

Osłony

Komponent osłony składa się z tła Shields_Container, które pokazuje pusty obszar osłony w kolorze ciemnoszarym, oraz Shields_Image, który zawiera materiał UI paska postępu.

Shield_Image wykorzystuje podstawową instancję materiału paska postępu, który jest uproszczoną wersją materiału Health_Image.

Dodawanie widoku powiązań

Teraz, gdy masz już zbudowane podstawowe komponenty UI dla swojej gry, poćwiczmy dodawanie widoku powiązań, które pozwolą każdemu z komponentów na aktualizację w oparciu o dane, które otrzymują z sesji na żywo.

Nazwa gracza

Postępuj zgodnie z poniższą instrukcją, aby nazwa gracza pojawiła się w odpowiednim polu:

Otwórz kartę Widok powiązań, klikając Okno > Widok powiązań lub wybierając Widok powiązań na dole ekranu i dokując go.
Aby wyświetlić listę powiązań widoku HUDPlayerInfoViewModel:
1. Otwórz okno Modele widoku, wybierając Okno > Modele widoku.
1. Przejdź do +Model widoku i wybierz Baza modeli widoku HUD – lista informacji o graczu.
1. Kliknij Urządzenie – Model widoku informacji o graczu w urządzeniu sterownika interfejsu i kliknij Wybierz.
Wybierz NameActive_Text z listy Hierarchia lub klikając obszar Nazwa gracza na ekranie podglądu UI.
Kliknij + Dodaj widżet NameActive_Text i z menu rozwijanego wybierz Tekst.
W pustym polu po prawej stronie wybierz HUDPlayerInfoViewmodel i z menu rozwijanego wybierz Nazwa gracza.
Końcowe powiązanie powinno wyglądać następująco:
Powtórz kroki od 1 do 3 dla elementu NameInactive_Text.
Aby zmodyfikować ustawienia widoczności nieaktywnej nazwy, dodaj nowy widżet do NameInactive_Text i z menu rozwijanego wybierz Widoczność.
Kliknij puste pole po prawej stronie i wybierz kolejno opcje Funkcje konwersji > Na widoczność (wartość logiczna).
Wybranie tej opcji powoduje wyświetlenie trzech nowych pól. Kliknij ikonę łącza obok pozycji Jest widoczny. Z menu wybierz HUDPlayerInfoViewModel i Jest zlikwidowany.
Ustaw opcję Widoczność – true na Nie podlega testom trafień (tylko sam) poniżej. Zostaw Widoczność – false ustawioną na Zwinięte. Gdy gracz zostanie zlikwidowany lub rozłączony, nazwa zastąpi NameActive_Text, ale gdy gracz żyje, pozostanie ona zwinięta.
Końcowe powiązanie NameInactive_Text powinno wyglądać następująco:
Naciśnij Kompiluj, aby przesłać zmiany. To koniec pracy nad nazwami graczy!

Ikona awatara gracza

Wybierz Profile_Image z Hierarchii lub kliknij obszar ikony gracza na ekranie podglądu UI.
Kliknij + Dodaj widżet Profile_Image.
Przejdź do Profile_Image > Pędzel i naciśnij Wybierz. To powiązanie zasadniczo sprawdza wybrane ustawienie opcji Pędzel z panelu szczegółów Profile_Image.
Kliknij w pustym polu z prawej strony i wybierz Funkcje konwersji > Ustaw parametr tekstury.
Wpisz Tekstura w polu Nazwa parametru. Aby znaleźć nazwę tego pola, otwórz instancję materiału awatara gracza.
W przypadku funkcji Ustaw parametr wektora/skalara/tekstury upewnij się, że nazwy parametrów instancji materiału są dokładnie dopasowane do pola Nazwa parametru.
Kliknij ikonę linku obok pola Wartość i wybierz HUDPlayerInfoViewModel > Ikona awatara gracza.
Ukończone powiązanie powinno wyglądać następująco:

Zdrowie i osłona

Wybierz Health_Image z Hierarchii lub kliknij obszar paska zdrowia na ekranie podglądu UI.
Kliknij + Dodaj widżet Health_Image.
Przejdź do Profile_Image > Pędzel i naciśnij Wybierz.
Kliknij wewnątrz pustego pola po prawej stronie i wybierz Funkcje konwersji > Ustaw parametr skalara.
Wpisz Postęp w polu Nazwa parametru. Aby znaleźć nazwę tego pola, otwórz instancję materiału awatara gracza.
Kliknij ikonę łącza obok pozycji Wartość i wybierz HUDPlayerInfoViewModel > Zdrowie.
1. Postęp określa wartość procentową pozostałego zdrowia gracza, a ponieważ Mnożnik został ustawiony na 0.1, każdy punkt procentowy przesunie pasek postępu o 1/100. Możesz to sprawdzić, dowolnie zmieniając wartość procentową w instancji materiału, aby zobaczyć przesuwający się pasek postępu.
  Wartość procentowa zdrowia
  Kliknij obraz, aby go powiększyć.
Ukończone powiązanie powinno wyglądać następująco:
W przypadku paska osłony powtórz kroki od 1 do 6, ale wybierz opcję Osłona zamiast Zdrowie.
Ukończone powiązanie osłony powinno wyglądać następująco:
Naciśnij Kompiluj, aby przesłać zmiany.

To powiązanie gwarantuje, że cały widżet zostanie wyświetlony dopiero po połączeniu gracza z grą.

Wybierz pozycję PlayerInfoBlock_Overlay z Hierarchii.
Wybierz + Dodaj widżet PlayerInfoBlock_Overlay, a następnie z menu rozwijanego wybierz Widoczność.
Kliknij puste pole po prawej stronie i wybierz kolejno opcje Funkcje konwersji > Na widoczność (wartość logiczna). Wybranie tej opcji powoduje wyświetlenie trzech nowych pól.
Kliknij ikonę łącza obok pozycji Jest widoczny. Z menu wybierz HUDPlayerInfoViewModel i Jest rozłączony.
Dla opcji Widoczność – true wybierz ustawienie Zwinięte, a dla opcji Widoczność – false ustawienie Nie podlega testom trafień (tylko sam).
Końcowe powiązanie powinno wyglądać następująco. Naciśnij Kompiluj, aby zapisać zmiany.

To wszystko – masz teraz w pełni skonfigurowany widżet UI, który będzie wyświetlał informacje w grze!

Tworzenie stosu gracza

W tej sekcji zaprezentowano, jak utworzyć widżet użytkownika, który wyświetla dodatkowych zawodników z oddziału wraz z graczem sterującym.

Aby rozpocząć, utwórz nowy Blueprint widżetów, klikając prawym przyciskiem myszy w przeglądarce zawartości i wybierając Interfejs użytkownika > Blueprint widżetów.
Wybierz Widżet użytkownika z okna dialogowego i zmień jego nazwę na HUDInfoStack.
Kliknij dwukrotnie widżet użytkownika, aby otworzyć nowe okno edytora.
Z panelu Paleta przeciągnij element Nakładka do panelu Hierarchia, aby rozpocząć.
Przeciągnij Pole stosu do poziomu poniżej elementu Nakładka i zmień jego nazwę na PlayerInfoStack.
W panelu Modele widoku naciśnij +Model widoku i wybierz Urządzenie – Lista informacji o graczu z drużyny/oddziału w sterowniku interfejsu.
Przejdź do panelu szczegółów i naciśnij +Dodaj rozszerzenie modelu widoku. Dzięki temu PlayerInfoStack może zaakceptować klasę widżetu wpisu.
Jeśli nie widzisz tych opcji, spróbuj skompilować widżet jeszcze raz.
Dla klasy widżetu wpisu wybierz utworzony wcześniej PlayerInfoBlock. Poniżej wybierz HUDPlayerInfoViewmodel jako Model widoku wpisu.
W sekcji Szablon slotu możesz dostosować odstępy między widżetami i wyrównanie, a także wyświetlić podgląd tego, jak określona liczba widżetów będzie wyglądać w grze.
Odstępy między widżetami
Kliknij GIF, aby go powiększyć.
W panelu Powiązania widoku kliknij +Dodaj widżet, a następnie wybierz HUDInfoStack. Wybierz pozycję PlayerInfoStack_Viewmodel_Extension i rozwiń ją, aby zobaczyć opcję Ustaw elementy, po czym ją wybierz. Jeśli pozycja PlayerInfoStack_Viewmodel_Extension nie pojawia się na liście, kliknij Kompiluj – wówczas powinna się pojawić.
W pustym polu po prawej stronie wybierz HUDPlayerInfoListViewModel > Tablica informacji o graczach z drużyny/oddziału. Przekazuje to tablicę modeli widoku informacji o graczu do nowo skonfigurowanego rozszerzenia za pomocą funkcji o nazwie Ustaw elementy.
Naciśnij Kompiluj, aby zapisać zmiany. Teraz możesz dodać je do swojej gry za pomocą urządzenia sterownika interfejsu.

Jeśli chcesz utworzyć widżet dla gracza sterującego, który jest oddzielony od reszty oddziału:

Utwórz nowy widżet dla gracza sterującego i skonfiguruj widok powiązań tak jak poprzednio, używając opcji Urządzenie – Model widoku informacji o graczu w urządzeniu sterownika interfejsu.
Umieść ten widżet pod widżetem nadrzędnym, w którym znajduje się pole stosu.
Utwórz powiązanie dla tego widżetu. W lewym polu wybierz Urządzenie – Model widoku informacji o graczu w urządzeniu sterownika interfejsu. W prawym polu wybierz Urządzenie - lista informacji o drużynie/oddziale gracza w sterowniku interfejsu > Informacje o graczu sterującym.

Konfiguracja urządzenia sterownika interfejsu

W przeglądarce zawartości znajdź urządzenie sterownika interfejsu i przeciągnij je do swojej sceny.
W opcjach użytkownika wybierz, co ma być widoczne dla gracza i upewnij się, że opcja Pokaż HUD jest ustawiona na Tak, a opcja Pokaż informacje o drużynie na Nie.
Przewiń w dół do pozycji Zastąpienie widżetu informacji o graczu i przeciągnij widżet HUDInfoStack do pustego pola. Upewnij się, że jest to nowo utworzony widżet stosu, a nie oryginalny utworzony widżet.
Kliknij Zapisz.