Etykiety informacyjne w interfejsie HUD zawierają różne rodzaje informacji, takie jak obraz awatara gracza, tag gracza, zdrowie, osłony i nie tylko.
Etykiety informacyjne pełnią szereg funkcji, od identyfikacji członków drużyny w wieloosobowych grach kooperacyjnych po rozpoznawanie niskiego poziomu zdrowia i statystyk osłon.
W Unreal Editor dla Fortnite (UEFN) etykiety informacyjne tworzy się przy użyciu
Tekstury mogą jednak wymagać dużej ilości pamięci. Może to mocno nadwerężyć budżet pamięci i obniżyć wydajność działania wyspy. Tekstury i węzły Próbka tekstury w materiale zajmują dużą ilość pamięci.
Materiały najlepiej nadają się do tworzenia prostych projektów. Można nimi dodawać animowane efekty do etykiety informacyjnej. Materiały zużywają mniej pamięci, ponieważ wymagają jedynie wykonywania prostych obliczeń algebraicznych przez GPU. Dzięki temu możesz tworzyć wiele rzeczy, od prostych kształtów po animowanie złożonych interakcji w materiałach.
 |  |
Prosty projekt UI z użyciem materiałów | Projekt UI z użyciem tekstur |
Wybierając tekstury, pamiętaj, aby używać ich oszczędnie – najlepiej jest unikać tekstur UI o rozmiarach przekraczających 256 x 256 pikseli.
Materiały zużywają mniej pamięci, ponieważ używają GPU do renderowania.
Na wybór sposobu wykonania etykiet informacyjnych z awatarem będzie wpływać kilka czynników:
Osobiste preferencje dotyczące projektu UI.
Styl i wygląd UI, które będą stanowić uzupełnienie charakteru tworzonej wyspy
Planowana oszczędność pamięci
Projekt etykiety informacyjnej z awatarem w tym samouczku w projekcie podstawowym wykorzystuje trzy instancje materiału. Przy użyciu materiału M_UI_Shape_Rectangle utworzono następujące projekty etykiet informacyjnych:
Półprzezroczyste różowe tło
Różowy kontener, który otacza tekst z nazwą i półprzezroczyste tło
Błękitny krąg zawierający awatar gracza
Stwórz własny UI za pomocą materiałów! Zobacz Tworzenie niestandardowego interfejsu użytkownika za pomocą instancji materiału.
Konfigurowanie niestandardowego widżetu
Wykorzystaj przepływ pracy Widżet użytkownika dokumentu Wyskakujące okienka UI, aby wykonać poniższe czynności:
Utwórz widżet użytkownika.
Zmień nazwę miniatury na Player_Info.
Kliknij dwukrotnie miniaturę, aby otworzyć edytor widżetów UMG.
Edytor widżetów to miejsce, w którym zaprojektujesz wygląd i rozmieszczenie na ekranie swojej etykiety informacyjnej. Następnie dodasz model widoku, aby utworzyć funkcjonalność powiązania w celu przechwycenia istniejących informacji o graczu i powiązania ich z projektem etykiety informacyjnej.
W grafie zdarzeń:
Wybierz ustawienie Wypełnij ekran w prawym górnym rogu i zmień jego ustawienie na Pożądane.
Dzięki temu ustawieniu możesz zmieniać rozmiar widżetów, aby UI w trakcie rozgrywki był wyświetlany bez problemów.
Aby rozplanować projekt UI dla niestandardowego HUD, zacznij od dodania paneli do grafu zdarzeń.
W panelu Paleta przejdź do sekcji Panel i przeciągnij panel Kanwa do panelu Zdarzenie lub bezpośrednio do panelu Hierarchia. Następnie zmień nazwę panelu na HUD_Canvas.
Panel Kanwa umożliwia zakotwiczenie różnych elementów UI w konkretnych miejscach na ekranie. Zanim dodasz więcej paneli do kanwy, przygotuj plan projektu UI, aby mieć pewność, że układ projektu zostanie odzwierciedlony w panelu Kanwa.
Panelu Kanwa używaj tylko wtedy, gdy chcesz użyć konkretnych elementów UI jako części projektu. Możesz go użyć na przykład wtedy, gdy tworzysz HUD i chcesz rozmieścić różne widżety podrzędne w określonych miejscach na ekranie.
Zamiast zmieniać ustawienie Wypełnij ekran na Pożądane, możesz zmienić rozmiar panelu Kanwa na 1920 x 1080 lub 2560 x 1440, co będzie odpowiadać najczęściej stosowanym proporcjom ekranu (16:9).
W sekcji Panel panelu Paleta dokonaj zagnieżdżenia pozycji Pole stosu pod HUD_Canvas w panelu Hierarchia i zmień jego nazwę na Backplate_StackBox. Jest to kontener na UI etykiety informacyjnej, w którym będą zagnieżdżone widżety składające się na zmienne UI.
Zmienne dodawane do pola stosu będą w panelu automatycznie układane w stos od lewej do prawej.
Możesz też użyć pola stosu, aby układać elementy UI w stos od góry do dołu.
W sekcji Wspólne panelu Paleta dokonaj zagnieżdżenia pozycji Obraz pod Backplate_StackBox i Hierarchia. Następnie zmień nazwę obrazu na Avatar_Image. Obraz ten będzie zawierał obramowanie awatara.
W sekcji Panel panelu Paleta dokonaj zagnieżdżenia pozycji Nakładka pod Backplate_StackBox i zmień jej nazwę na Nameplate_Overlay. Nakładka umożliwia nakładanie widżetów na siebie.
W panelu Paleta przeciągnij dwa elementy Obraz i dokonaj ich zagnieżdżenia pod pozycją Nameplate_Overlay.
Zmień nazwy obrazów zgodnie z materiałami na Background i Border.
Przeciągnij panel Pole rozmiaru i dokonaj jego zagnieżdżenia pod Nameplate_Overlay.
Za pomocą opcji Pole rozmiaru ustaw właściwości zagnieżdżonych elementów podrzędnych. Dzięki temu żaden element zawartości Pola rozmiaru nie będzie wykraczał poza pole i nie zakryje innych elementów UI ani rozgrywki.
Przeciągnij pozycję Nakładka i dokonaj jej zagnieżdżenia pod pozycją Pole rozmiaru, po czym zmień jej nazwę na Text_Overlay.
Poza pozycją Nakładka możesz dodać tylko jeden widżet podrzędny pod pozycją Pole rozmiaru.
W sekcji Wspólne panelu Paleta przeciągnij dwa bloki tekstowe i dokonaj ich zagnieżdżenia pod Text_Overlay. Zmień nazwę bloków tekstowych na Active i Inactive.
Układ UI jest gotowy. Następnie ustawisz właściwości widżetu tak, aby rozmiar elementów UI etykiety informacyjnej był zależny od rozmiaru ekranu.
Ustawianie właściwości widżetu
Panel kontenera automatycznie dostosowuje swój rozmiar do największego znajdującego się w nim widżetu. Panel nadrzędny musi zawierać wszystkie elementy podrzędne, aby można było przystąpić do edytowania jego właściwości. W przeciwnym razie proporcje elementu nadrzędnego mogą się zmienić w miarę dodawania podrzędnych elementów UI na karcie Hierarchia.
Rozpocznij ustawianie właściwości panelu Backplate_StackBox, aby wybrać umiejscowienie etykiety informacyjnej na ekranie i jej obramowanie.
W przypadku tego projektu etykiety informacyjnej zmodyfikowano następujące właściwości:
Kliknij ilustrację, aby ją powiększyć.
| Ustawienie | Wartość |
|---|---|
Kotwice | Lewy dolny róg |
Wyrównanie | W tej pozycji należy ustawić parę współrzędnych określających odstęp widżetu od krawędzi ekranu. |
Dopasuj do zawartości | True |
Orientacja | Pozioma (wszystkie widżety podrzędne będą wyświetlane od lewej do prawej). |
Zniekształcenie X | -20.0 (Powoduje pochylenie pola stosu w kierunku ujemnym na prawo). |
Przytrzymaj kombinację klawiszy Shift + Control i kliknij w lewym dolnym rogu, aby automatycznie zaktualizować pozycję i wyrównanie widżetu.
Podstawowe elementy układu etykiety informacyjnej są na swoim miejscu. Teraz możesz dodać utworzone materiały i edytować bloki tekstowe etykiety z nazwą.
Dodawanie i edytowanie zasobów etykiety informacyjnej
Edytor widżetów zawiera ustawienia wybranych widżetów dotyczące dodawania materiałów i tekstu, a także modyfikowania właściwości zasobów używanych w ustawieniu Pędzel.
Ważne, aby zwrócić uwagę na kolejność rozmieszczenia materiału w panelu Hierarchia. Dodając zasoby, zwracaj uwagę, aby były wyświetlane prawidłowo. Zasoby tła powinny być układane warstwami u dołu, a dodatkowe zasoby na wierzchu.
Edycja instancji materiału
Wybierz widżety w panelu Hierarchia, aby rozpocząć dodawanie materiałów i tekstu.
Wybierz Obraz awatara w obszarze Pole stosu, aby wyróżnić widżet i otworzyć jego właściwości w panelu Szczegóły.
W panelu Szczegóły dodaj Materiał krawędzi awatara do ustawienia Pędzel. Dostosuj ustawienia Rozmiar obrazu tak, aby dopasować widżet Obraz do materiału.
Kliknij ilustrację, aby ją powiększyć.
Materiały są jak farby. Po dodaniu do ustawienia Pędzel materiał wypełnia przestrzeń widżetu obrazu.
Jeśli masz konkretne awatary do swojej przygody, wykonaj następujące czynności:
* Utwórz nakładkę, aby umieścić obraz awatara na warstwie pod materiałem obramowania.
* Dodaj zaimportowane obrazy awatarów do warstwy tła Obraz.
* Użyj materiału obramowania na górnej warstwie.
Wybierz Obraz tła w panelu Hierarchia, aby otworzyć opcje Nakładka w panelu Szczegóły.
W panelu Szczegóły ustaw Wyrównanie poziome i Wyrównanie pionowe na Wyrównanie do środka, a następnie dodaj Materiał tła do ustawienia Pędzel. Dostosuj ustawienia Rozmiar obrazu, aby dopasować widżet Obraz i kolor materiału tła.
Kliknij ilustrację, aby ją powiększyć.
Wybierz Obraz obramowania w obszarze Nameplate_Overlay, aby wyróżnić widżet i otworzyć jego właściwości w panelu Szczegóły.
W panelu Szczegóły ustaw Wyrównanie poziome i Wyrównanie pionowe na Wyrównanie do środka, a następnie dodaj Materiał obramowania do ustawienia Pędzel. Dostosuj ustawienia Rozmiar obrazu tak, aby obramowanie otaczało kolor tła.
Kliknij ilustrację, aby ją powiększyć.
Etykieta informacyjna przybiera podstawowy wygląd i możesz teraz edytować bloki tekstowe.
Edycja etykiety z nazwą
Na etykiecie z nazwą wyświetlane są tagi gracza. Zaprojektowana powyżej etykieta informacyjna zawiera zarówno pole rozmiaru, jak i bloki tekstowe.
Edytując właściwości pola rozmiaru, możesz zapobiec wychodzeniu tekstu poza jego granice na inne elementy UI lub zasłanianiu graczowi widoku.
Wybierz Pole rozmiaru w panelu Hierarchia, aby otworzyć jego właściwości w panelu Szczegóły.
W panelu Szczegóły ustaw Wyrównanie poziome i Wyrównanie pionowe na Wyrównanie do środka. Spowoduje to automatyczne wyśrodkowanie bloków tekstowych na obrazach etykiety z nazwą. Ustaw opcje Szerokość i Zastąpienie wysokości widżetu Pole rozmiaru na True, a następnie ustaw żądany rozmiar Nameplate_Overlay.
Zielona ramka wyznacza granicę pola rozmiaru.
Kliknij ilustrację, aby ją powiększyć.
W panelu Hierarchia kliknij prawym przyciskiem myszy Pole rozmiaru i wybierz kolejno Zawijaj z… > Pole rozmiaru dla pozycji Bloki tekstowe, aby zawijać tekst gracza zgodnie z właściwościami pola rozmiaru.
Podstawowa konfiguracja UI etykiety z nazwą została zakończona. Wszystkie elementy podrzędne przyjmują właściwości swoich elementów nadrzędnych, więc widżety te wymagają edycji jedynie w minimalnym stopniu.
W panelu Szczegóły będziesz edytować bloki tekstowe Active i Inactive, ustawiając wyrównanie oraz rozmiar czcionki, kolor, pociągnięcie i inne parametry.
Upewnij się, że tekst bloku Active ma kolor inny niż tekst bloku Inactive. W tym przykładzie czcionka bloku tekstowego Active ma rozmiar 145, kolor biały i pociągnięcie 6, a czcionka Inactive ma rozmiar 145, kolor SlateGrey i pociągnięcie 6.
Skonfiguruj ustawienie Widoczność pola tekstowego Inactive na Ukryty. Dzięki temu tekst nie będzie wyświetlany, dopóki nie zostanie wyzwolone powiązanie z widżetem w grze.
Spowoduje to zebranie wszystkich elementów razem, etykiety z nazwą i etykiety informacyjnej z awatarem.
Dodawanie widoku powiązań
Po utworzeniu projektu UI czas dodać powiązania do pól tekstowych i Avatar_Image z uwzględnieniem danych, jakie muszą otrzymać te elementy w trakcie sesji na żywo.
Model widoku Sterownik interfejsu – informacje o graczu umożliwia zastąpienie części HUD widżetem niestandardowym. Aby wykorzystać to ustawienie, musisz utworzyć model widoku swojej etykiety informacyjnej.
Tekst nazwy 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 HUDPlayerInfoViewModelBase:
1. Otwórz okno Modele widoku, wybierając Okno > Modele widoku.
1. Przejdź do +Model widoku i wybierz Baza modeli widoku Sterownik interfejsu – lista informacji o graczu z drużyny/oddziału.
Sterownik interfejsu – lista informacji o graczu z drużyny/oddziału umożliwia wyświetlanie informacji o sterującym graczu bez jego oddziału lub drużyny.
1. Kliknij Wybierz.
Wybierz Blok tekstowy z listy Hierarchia lub klikając obszar Nazwa gracza na ekranie podglądu UI.
Na karcie Powiązania widoku kliknij + Dodaj widżet Active_Name.
Wybierz aktywne pole "PlayerName", a następnie wybierz kolejno opcje Tekst > Wybierz.
W pustym polu po prawej stronie wybierz HUDPlayerInfoViewModel > Informacje o graczu sterującym > Nazwa gracza > Wybierz z listy rozwijanej.
Końcowe powiązanie powinno wyglądać następująco:
Powtórz kroki od 2 do 3 dla elementu Inactive_Name.
Aby zmodyfikować ustawienia widoczności dla nieaktywnej nazwy, dodaj nowy widżet do Inactive_Name. Dokonaj wyboru w pierwszym polu, a następnie wybierz kolejno opcje Widoczność > Wybierz z menu rozwijanego.
Kliknij puste pole po prawej stronie i wybierz kolejno opcje Funkcje konwersji > Na widoczność (wartość logiczna) > Wybierz.
Wybranie tej opcji powoduje wyświetlenie trzech nowych pól. Kliknij ikonę łącza obok pozycji Jest widoczny. W menu wybierz HUDPlayerInfoViewModel > Informacje o graczu sterującym > Jest zlikwidowany > Wybierz.
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łączy się, nazwa zastąpi Active_Name, ale gdy gracz żyje, pozostanie ona zwinięta.
Końcowe powiązanie Inactive_Name powinno wyglądać następująco:
Kliknij ilustrację, aby ją powiększyć.
Kliknij Kompiluj, aby przesłać zmiany. To koniec pracy nad nazwami graczy!
Ikona awatara gracza
Wybierz Avatar_Image z Hierarchii lub kliknij obszar ikony gracza na ekranie podglądu UI.
Kliknij + Dodaj widżet Profile_Image.
Przejdź do Avatar_Image > Pędzel i naciśnij Wybierz. To powiązanie zasadniczo sprawdza wybrane ustawienie opcji Pędzel z panelu Szczegóły Avatar_Image.
Kliknij w pustym polu z prawej strony i wybierz Funkcje konwersji > Utwórz pędzel obrazu z materiału > Wybierz.
W pustych polach Rozmiar obrazu ustaw rozmiar materiału obramowania ikony w widżecie. W tym przykładzie materiał obramowania ma rozmiar X=50 i Y=45.
Ukończone powiązanie powinno wyglądać następująco:
Kliknij ilustrację, aby ją powiększyć.
Kliknij Kompiluj, aby zapisać widżet.
Następnie przeciągnij urządzenie sterownika interfejsu do projektu i dodaj widżet UMG do urządzenia w polu Zastąpienie widżetu informacji o graczu.
Przetestuj wygląd niestandardowej etykiety informacyjnej z awatarem. Powinno to wyglądać mniej więcej tak, jak na poniższym obrazie.
Kliknij ilustrację, aby ją powiększyć.
