Twórz niestandardowe paski zdrowia i osłony w Unreal Motion Graphics (UMG), korzystając z materiałów UI, tekstur UI i różnych widżetów dostępnych w palecie do zastępowania domyślnego interfejsu użytkownika (UI) Fortnite. Paski zdrowia i osłony można dodać do etykiety z nazwą lub umieścić oddzielnie w HUD.
Wygląd oraz rozmieszczenie pasków zdrowia i osłony są unikalne dla każdej gry i uwzględniają jej typ (bijatyka, kooperacja w trybie wieloosobowym, gra fabularna itp.).
Konfiguracja instancji materiału bez modyfikowania materiałów
W tym przykładzie użyjesz różnych materiałów, które zostały utworzone w UEFN. Będzie to między innymi pasek postępu w kształcie prostokąta (pola) i okręgu. Prostokątny pasek postępu ma również opcję podziału na sekcje.
Materiały zostały skonfigurowane przy użyciu kombinacji funkcji materiału z laboratorium materiałów UI, parametrów uwidocznionych w Instancji materiału i szczypty matematyki, dzięki której wszystko zaczęło działać.
Dobrą praktyką jest stosowanie materiałów do widżetów. Materiały aktualizują się dynamicznie w oparciu o dane rozgrywki, co pomaga optymalizować UI i umożliwia dodawanie efektów specjalnych. Tekstury są używane tylko w bardziej skomplikowanych projektach, których nie da się z łatwością zrealizować za pomocą funkcji matematycznych.
Aby dowiedzieć się więcej na temat używania materiałów przy projektowaniu i implementacji UI, patrz Przydatne materiały UI. Samouczek zawiera więcej informacji na temat korzystania z pól oznaczonej odległości (SDF) do tworzenia materiałów dynamicznego paska postępu w UEFN i UE.
Instancja materiału tworzy instancje materiału o parametrach, które pozwalają z łatwością dostosować wygląd materiału bez jego ponownej kompilacji. Aby utworzyć instancję materiału, kliknij prawym przyciskiem myszy Materiał i wybierz Utwórz instancję materiału.
Więcej informacji na temat instancji materiału można znaleźć w sekcji Tworzenie i używanie instancji materiałów w dokumentacji Unreal Engine.
W UEFN uwidocznionych jest kilka parametrów. W przykładowym materiale parametr Postęp zmienia stopień wypełnienia paska. Zakres jest znormalizowany do 0-100 przy użyciu węzła ConstantBiasScale w M_CircleProgressBar, tak aby pasował do zakresu PZ w Fortnite.
Można zmienić Kolor tła (BGColor) i Kolor płynu, które są gradientami. Następnie wyświetl podgląd zmian w oknie wizualizacji podglądu z lewej strony.
Możesz utworzyć tyle instancji materiału, ile potrzebujesz do różnych celów. W tym przykładzie użyte zostały dwa materiały, jeden dla PZ, a drugi dla osłony.
Dobre praktyki dotyczące układu widżetów
W UMG panelu kanwy używa się tylko wtedy, gdy potrzebne jest położenie bezwzględne na ekranie lub aby precyzyjnie manipulować miejscem rozmieszczenia różnych widżetów.
W przypadku mniejszych widżetów skorzystaj z następujących opcji:
Nakładka
Pola stosu
Pola rozmiaru (jeśli chcesz ograniczyć widżet do określonego rozmiaru)
Panel siatki (jeśli chcesz zachować rozmiar kontenera, ale chcesz manipulować położeniem zawartych w nim widżetów podrzędnych)
Gdy materiały będą gotowe, utwórz Blueprint widżetów w Przeglądarce zawartości, a następnie kliknij dwukrotnie miniaturę widżetu, aby otworzyć Edytor UMG.
Korzystanie z panelu kanwy
W tym przykładzie panel kanwy został wykorzystany do umieszczenia pasków zdrowia i osłony w położeniu bezwzględnym w HUD poprzez zakotwiczenie widżetów do określonych części ekranu.
Dobrą praktyką w przypadku poszczególnych elementów HUD jest zastosowanie kombinacji następujących widżetów:
Nakładka – jeśli chcesz nałożyć jeden widżet na drugi
Pola stosu – jeśli chcesz ustawić widżety poziomo lub pionowo
Pola rozmiaru – jeśli chcesz ograniczyć wielkość widżetu do określonego rozmiaru
Panel siatki – jeśli chcesz zachować rozmiar kontenera, ale chcesz manipulować położeniem zawartych w nim widżetów podrzędnych
Mając to na uwadze, zacznij tworzyć układ widżetów zdrowia i osłony.
Utwórz kontener, w którym ma być osadzony cały UI HUD. W tym celu użyj panelu kanwy jako kontenera do przechowywania wszystkich poszczególnych elementów wyświetlacza HUD.
W tym przykładzie zdrowie i osłona będą zakotwiczone w środkowej dolnej części ekranu.
Ustaw widżet Pole stosu tak, aby był zagnieżdżony pod pozycją Kanwa, co pozwoli utworzyć kontener dla zdrowia i osłony. W tym projekcie elementy te będą ułożone w stos od lewej do prawej.
Jeśli chcesz rozmieścić widżety pionowo w polu stosu, zmień ustawienie Orientacja w panelu Szczegóły w sekcji Zachowanie > Orientacja.
Zmień nazwy widżetów, wybierając je i naciskając klawisz F2 podczas dodawania ich do hierarchii, aby ułatwić ich porządkowanie.
Wybierz Pole stosu w hierarchii. Wówczas w panelu Szczegóły powinna pojawić się opcja Kotwice. Otwórz opcję, używając skrótu klawiszowego Shift + Control. Zakotwicz pole stosu do środkowej dolnej części HUD, wybierając opcję w Wiersz 3, kolumna 2.
Pole stosu powinno być teraz zakotwiczone u dołu. Ikona kwiatka wskazuje, w którym miejscu w panelu kanwy jest zakotwiczony widżet.
Przesuń pole stosu w górę, aby nie przylegało do dolnej krawędzi ekranu. W tym celu zmień ustawienie opcji Pozycja Y.
Wartości dodatnie powodują przesunięcie widżetu w dół, podczas gdy wartości ujemne powodują jego przesunięcie w górę.
Zaznacz pole wyboru Dopasuj do zawartości, aby się upewnić, że kontener zawsze będzie zmieniał rozmiar zgodnie z jego zawartością.
Konfiguracja paska PZ i tekstu
Teraz, gdy kontener Zdrowie i osłona jest gotowy, skonfiguruj widżet Zdrowie i osłona.
Dokonaj zagnieżdżenia pozycji Nakładka pod pozycją Pole rozmiaru i zmień jej nazwę na HPOverlay. Spowoduje to nałożenie tekstu PZ na okrągły pasek PZ.
Dokonaj zagnieżdżenia pozycji Obraz pod pozycją HPOverlay i zmień jej nazwę na HPBar. Pozwoli to dodać utworzoną powyżej instancję materiału do widżetu.
W hierarchii wybierz HPBar, a w panelu Szczegóły wybierz kolejno opcje Pędzel> Obraz, po czym wybierz własną niestandardową instancję materiału paska zdrowia.
Aby zmienić rozmiar instancji materiału, można dostosować właściwość Rozmiar obrazu poniżej.
Dokonaj zagnieżdżenia pozycji Blok tekstowy pod pozycją HPOverlay i zmień jej nazwę na HPText. Pozwoli to dodać tekst nad okrągłym paskiem zdrowia.
Wybierz Blok tekstowy, a w panelu Szczegóły ustaw wyrównanie Poziome i pionowe na Środek. Dzięki temu tekst będzie zawsze wyrównany do środka względem HPBar.
Kliknij obraz, aby go powiększyć.
Zmień rozmiar czcionki, wybierając kolejno opcje Wygląd > Czcionka > Rozmiar, aby dopasować ją do paska PZ.
Kliknij obraz, aby go powiększyć.
Kliknij Kompiluj. Teraz masz gotowy pasek PZ i tekst PZ!
Konfiguracja paska osłony i tekstu
Aby skonfigurować pasek osłony i tekst, wykonaj raz jeszcze powyższe kroki. Tym razem dodaj odstęp między paskiem zdrowia a paskiem osłony. HPShieldsContainer jest polem stosu, dlatego automatycznie układa widżety podrzędne poziomo.
Użyj widżetu Obraz wewnątrz pola stosu, aby dodać odstęp między paskami zdrowia i osłony. Skonfiguruj pusty widżet Obraz, wykonując następujące czynności:
Ustaw pozycję Obraz tak, aby była zagnieżdżona pod widżetem Pole stosu.
We właściwościach obrazu wybierz dla opcji Rysuj jako ustawienie Brak.
Oznacza to, że w widżecie nic nie pojawi się, a widżet Obraz wciąż zajmuje miejsce w układzie! Dzięki temu możesz z łatwością zarządzać odstępami między elementami w polu stosu bez konieczności korzystania z odstępu wewnętrznego.
Skonfiguruj Widżet osłony według tej samej procedury, która została zastosowana w przypadku paska zdrowia.
Aby szybciej utworzyć pasek osłony, zduplikuj HPOverlay, klikając prawym przyciskiem myszy HPOverlay w obszarze Hierarchia i wybierając opcję Duplikuj.
Ustaw pozycję ShieldOverlay tak, aby była zagnieżdżona pod pozycją Obraz rozdzielacza, dzięki czemu będzie wyświetlana na końcu pola stosu.
Oba typy pasków zostaną wyświetlone w widżecie obok siebie!
Zmień nazwy zmiennych na ShieldOverlay, ShieldBar i ShieldText, jak na poniższym obrazie przedstawiającym hierarchię.
Teraz możesz utworzyć powiązania odpowiedzialne za funkcjonalność pasków postępu zdrowia i osłony.
Powiązania widoku
Dodawanie modelu widoku
Model widoku umożliwia dodanie funkcjonalności urządzenia do Blueprintu widżetów. Model widoku wykorzystuje powiązania widoku do identyfikacji widżetów w blueprincie i wprowadzenia w tym widżecie funkcjonalności urządzenia grafu.
Model widoku Sterownik interfejsu – informacje o graczu umożliwia zastąpienie części HUD widżetem niestandardowym.
Wybierz kolejno Okno > Modele widoku, aby otworzyć i dodać Model widoku do widżetu.
W oknie Model widoku wybierz +Model widoku. Spowoduje to otwarcie wyskakującego okna ze wszystkimi dostępnymi obecnie modelami widoku.
Dostępne są dwa typy modeli widoku sterownika interfejsu:
Wybierz model widoku Urządzenie – sterownik interfejsu — lista informacji o graczu z drużyny/oddziału z opcji HUDPlayerInfoListViewModel. Powyższe dane pozwalają wyświetlić jedynie informacje dotyczące sterującego gracza, a nie jego drużyny/oddziału.
Wybierz model widoku Urządzenie – sterownik interfejsu – informacje o graczu, jeśli chcesz utworzyć oddzielne widżety dla gracza sterującego oraz jego drużyny/oddziału. Dla każdego z tych widżetów użyj właściwości w modelu widoku Urządzenie – sterownik interfejsu – informacje o graczu. Następnie musisz utworzyć widżet stosu oddziału, który powiąże modele widoku listy informacji o graczu drużyny/oddziału z ich modelami widoku.
Model widoku Lista informacji o graczu z drużyny/oddziału zawiera te same informacje, co model widoku Sterownik interfejsu – informacje o graczu, ale w zależności od scenariusza jest używany inaczej.
Wybierz Model widoku listy informacji o graczu drużyny/oddziału kontrolera HUD spośród opcji HUDPlayerInfoListViewModel. Powyższe dane pozwalają wyświetlić jedynie informacje dotyczące sterującego gracza, a nie jego drużyny/oddziału.
Teraz czas na skonfigurowanie powiązań, które powiążą dane z modelu widoku z widżetem!
Konfiguracja powiązań widoku ToText
Wybierz kolejno Okno > Powiązania widoku, aby otworzyć okno Powiązania widoku.
Wybierz HPText w swojej Hierarchii, a następnie wybierz Dodaj widżet w sekcji Powiązania widoku, aby powiązać HPText w celu wyświetlania aktualnej wartości zdrowia. Pojawi się puste powiązanie.
Pole z lewej strony to Właściwość widżetu, a pole z prawej strony oznacza dane, które chcesz powiązać z właściwością widżetu. Kliknij pole z lewej strony, aby wyświetlić listę właściwości dla bloku tekstowego HPText. Wybierz właściwość Tekst, aby przekazać wartości PZ do tej właściwości.
Pole z prawej strony oznacza dane, które chcesz przekazać do wybranej właściwości widżetu. Jednak właściwość Text obsługuje wyłącznie dane typu Tekst. Liczba PZ w Fortnite jest wartością podwójnej precyzji (float), więc musisz przekonwertować ją na odpowiednią wartość typu Tekst. Kliknij pole z prawej strony i wybierz Funkcje konwersji > Na tekst (wartość podwójnej precyzji).
Pojawi się długa lista opcji. Najważniejsze ustawienia są zwykle u góry, podczas gdy pozostałe ustawienia umożliwiają sformatowanie końcowej wartości, która jest przekazywana do właściwości Tekst.
Kliknij ilustrację, aby ją powiększyć.
Wybierz ikonę łącza obok pola Wartość, a następnie wybierz wartość Zdrowie z modelu widoku sterownika interfejsu.
Kliknij puste pole i wybierz HUDPlayerInfoListViewmodel w lewej kolumnie, po czym rozwiń Informacje o graczu sterującym po prawej i wybierz Zdrowie.
Spowoduje to przekazanie właściwości Zdrowie będącej wartością pojedynczej (tj. podwójnej precyzji) poprzez funkcję konwersji Na tekst (wartości podwójnej precyzji). podwójnej precyzji) poprzez funkcję konwersji Na tekst (wartości podwójnej precyzji). Funkcja Na tekst (wartość podwójnej precyzji) konwertuje Zdrowie na typ Tekst, aby wartość ta była wyświetlana w widżecie. Przekonwertowana wartość Zdrowie jest następnie przekazywana do właściwości Tekst widżetu HPText.
Powtórz powyższe kroki, aby skonfigurować widżet ShieldText. Te same powiązania posłużą również do wyświetlania wartości osłony.
Ustaw parametr materiału
Więcej informacji na temat działania ustawiania parametru materiału można znaleźć w sekcji Set Material Parameter (Ustawianie parametru materiału) w dokumentacji Unreal Engine.
Nadszedł czas na skonfigurowanie okrągłego paska postępu. Postępy zmienia się w zależności od poziomów zdrowia i osłony gracza.
Skonfiguruj puste powiązanie do swojego okręgu HPBar.
W polu z lewej strony wybierz HPBar > Pędzel. Pędzel zawiera instancję materiału okrągłego paska PZ.
W polu z prawej strony wybierz Funkcje konwersji > Ustaw parametr skalarny.
W obszarze Nazwa parametru wprowadź nazwę parametru, który będzie zmieniał postęp paska postępu.
Aby wyszukać tę nazwę parametru, otwórz instancję materiału swojego paska PZ i spójrz na wartości parametrów z prawej strony.
Parametr kontrolujący pasek postępu nosi nazwę Postęp. Wpisz tę nazwę w polu Nazwa parametru.
Ważne, aby nazwa parametru była taka sama, jak parametr w instancji materiału, w przeciwnym razie materiał nie będzie działał w grze.
Wybierz ikonę łącza obok pozycji Wartość. Podobnie jak w przypadku ToText, powiąż Zdrowie gracza z opcją Wartość.
Jest to ostateczny efekt powiązania statystyk zdrowia i osłony w modelu widoku. Teraz za każdym razem, gdy stan zdrowia gracza ulegnie zmianie, właściwość zdrowia zostanie przekazana do paska PZ instancji materiału i zaktualizuje się parametr skalarny postępu.
Wykonaj te same czynności dla paska ShieldBar. Zamiast powiązania go z właściwością Zdrowie, musisz powiązać go z właściwością Osłona.
Teraz twoje powiązania PZ i osłony są skonfigurowane! Pora wyświetlić widżet na wyświetlaczu HUD.
Konfiguracja urządzenia sterownika interfejsu
Umieść urządzenie sterownika interfejsu w swoim poziomie.
W panelu Szczegóły urządzenia upewnij się, że:
Pokaż interfejs = Tak
W polu Zastąpienie widżetu danych gracza użyj widżetu, który zawiera niestandardowe zdrowie i osłony.
Kliknij ilustrację, aby ją powiększyć.
Wybierz Uruchom sesję. W HUD powinien pojawić się widżet Zdrowie i osłona! Przetestuj swój UI, odnosząc obrażenia i obserwując, jak aktualizują się statystyki na wyświetlaczu HUD.
Inne przykłady pasków postępu
Materiał Prostokąt można znaleźć, wybierając kolejno opcje Fortnite > UI > Materiał. Podstawowy prostokąt można dostosować tak, aby móc go wykorzystać jako tło w wielu formach, w dowolnym widżecie!
Utwórz na tej podstawie instancję materiału i zacznij korzystać z niej w UMG!
Wykorzystując informacje zawarte w tym artykule oraz udostępnione materiały, spróbuj utworzyć następujące paski postępu:
Zastosuj teksturę jako tło, aby utworzyć ramkę awatara gracza, nazwy wyświetlanej oraz paska PZ.
Wykorzystaj kombinację tekstur, ikon, materiałów paska postępu i materiału Prostokąt dostępnych w Fortnite > UI > Materiał, aby nadać różne style podstawowym paskom postępu.
Utwórz podzielony na odcinki pasek PZ i osłony wyświetlany wraz z awatarem gracza i nazwą wyświetlaną.
