Materiał wskaźnika doskonale nadaje się do wykorzystania w UI. Do tego materiału można się odwoływać w widżecie obrazu UMG, aby śledzić swoje zdrowie, liczbę likwidacji lub kolekcję przedmiotów i waluty w grze. Korzystając z tego samouczka, utworzysz własny materiał wskaźnika i wykorzystasz go w projekcie niestandardowego UI.
Ten materiał może zastąpić domyślny wygląd Fortnite niestandardowym materiałem utworzonym do śledzenia zdrowia gracza, jego osłon lub innego rodzaju statystyk dotyczących gracza.
W projekcie tego materiału wykorzystano ikony. Unreal Editor dla Fortnite (UEFN) oferuje natywnie wiele ikon. Ikony można znaleźć w folderach Fortnite Tekstury > Ikony.
Utwórz materiał
Wszystkie materiały tworzy się w Przeglądarce zawartości. Aby uporządkować swój projekt, utwórz folder, w którym będą przechowywane wszystkie twoje materiały.
Kliknij prawym przyciskiem myszy w Przeglądarce zawartości, aby otworzyć Menu kontekstowe.
Wybierz Materiał z menu kontekstowego.
Nadaj materiałowi nazwę M_Meter.
Kliknij dwukrotnie miniaturę materiału, aby otworzyć Edytor materiałów.
Aby utworzyć materiał licznika, musisz pobrać laboratorium materiałów UI ze strony Fab.
Aby dowiedzieć się więcej o węzłach materiałów i sposobie ich działania, patrz Węzły i ustawienia materiału.
Węzły materiału
Poniżej znajduje się lista węzłów materiałów używanych w tym samouczku wraz z opisem ich zastosowania w produkcie końcowym. Aby pominąć to objaśnienie i przystąpić do tworzenia materiału, kliknij tutaj.
| Węzeł materiału | Cel |
|---|---|
Dodaje kolor do wypełnienia ikony i postępu. | |
Służy do dodawania maski tła pod ikoną. Używany również jako pasek postępu do maskowania tła według postępu. | |
Umożliwia dodanie tekstury do materiału UI. | |
Służy do nakładania kolorowej ikony na kolor tła, a także do tworzenia maski ikony na wierzchu tła. | |
Wyprowadza współrzędne tekstury UV ikony w postaci dwukanałowej wartości wektorowej. | |
Funkcja materiału > Skala UI | Funkcje tekstury są podkategorią węzła Funkcja materiału. Dzięki temu można skalować UV ikony. |
Funkcja materiału > Okrąg SDF UI | Umożliwia zamaskowanie paska postępu za ikoną oraz ustalenie, jaka część okręgu wypełnia kolor tła. Zwykle tej funkcji materiału używa się do rysowania okręgu w materiale. Można je zastąpić innymi funkcjami materiału kształtu SDF (np. sześcianem SDF UI) z laboratorium materiałów UI, aby wygenerować inny kształt. |
Służy do równomiernego skalowania osi X i Y ikony, gdzie stosujemy 2 parametry skalarne. 1 do skalowania X ikony, a drugi do Y ikony, a następnie połączenia ich z MF_UI_Scale. | |
UV ikony są ograniczone do wartości od 0 do 1, aby ikona nie była zawijana ani dzielona na kafelki. | |
Służy do tworzenia zakresu 0–10 dla parametru skalarnego postępu w urządzeniu Postępometru. ConstantBiasScale przejmuje ustawioną wartość z parametru i odejmuje wartość odchylenia, po czym mnoży otrzymaną wartość przez wartość skali. | |
Węzeł Pomnóż pobiera dwie wartości wejściowe, mnoży je przez siebie i zwraca wynik. W tym przykładzie kanały RGB tekstury są pomnożone przez węzeł Vector3 w celu pokolorowania tła. Ponadto wartość LinearGradient jest mnożona przez Vector3 w celu pokolorowania ikony. | |
Krok | Tworzy próg dla współrzędnych X i Y. Próg tworzy kontener na materiał tła w UI. Węzły Krok zmieniają wartości powyżej progu na 1, a poniżej progu na 0. Powoduje to uzyskanie maski paska postępu, na którym wyraźnie widać podział na obszar wypełniony i niewypełniony. |
Powoduje zastosowanie wartości UGradient gradientu liniowego, zaokrąglenie ich w górę do najbliższej liczby całkowitej i wygenerowanie wyniku. Dzięki temu możemy z łatwością utworzyć podstawowe jednolite tło. | |
Stała | Umożliwia dodanie wartości do atrybutu materiału. |
Przygotowanie węzła materiału głównego
Przed dodaniem jakichkolwiek węzłów materiału przygotuj materiał do użycia w UI, zmieniając ustawienia w węźle materiału głównego (MMN). Ustawienia w węźle materiału głównego określają, które wejścia są dostępne w tym węźle i gdzie można użyć materiału.
Wybierz węzeł materiału głównego.
W panelu Szczegóły w Edytorze materiałów wybierz dla opcji Domena materiału ustawienie Interfejs użytkownika.
Zmiana Trybu mieszania na Półprzezroczysty.
Kliknij ilustrację, aby ją powiększyć.
Konfiguracja koloru postępu
Rozpocznij tworzenie materiału wskaźnika od skonfigurowania parametru Kolor postępu, który można zidentyfikować w UMG za pomocą widżetu Obraz. Możesz wykorzystać to ustawienie Kolor postępu, aby utworzyć niestandardowy projekt UI.
Kliknij prawym przyciskiem myszy Graf materiału, aby otworzyć menu węzła.
W pasku wyszukiwania wpisz Gradient liniowy. Wybierz LinearGradient z menu rozwijanego. Węzeł pojawi się na grafie.
Powtórz kroki pierwszy i drugi, aby dodać do Grafu materiału następujące węzły:
Ceil
Pomnóż
Constant3Vector
Wyciągnij białe gniazdo z węzła Constant3Vector i wetknij je do wejścia A na węźle Pomnóż. Kształt w oknie wizualizacji zmieni kolor.
Wybierz węzeł materiału Constant3Vector w Grafie materiału. Węzeł na grafie zostaje wyróżniony, co oznacza, że został on wybrany.
Kliknij czarny kwadrat na węźle, aby otworzyć koło kolorów. Wybierz kolor materiału z koła kolorów.
Wyciągnij gniazdo UGradient z węzła Gradient liniowy i wetknij je do lewego wejścia na węźle Ceil.
Wyciągnij prawe gniazdo z węzła Ceil i wetknij je do wejścia B na węźle Pomnóż.
Konfiguracja tego węzła określa kolor kontenera UI.
Kliknij prawym przyciskiem myszy w obszarze grafu i dodaj węzeł LinearInterpolate do grafu.
Wyciągnij węzeł Pomnóż i wetknij go do wejścia A na pierwszym węźle LinearInterpolate.
Ta część materiału jest używana do śledzenia postępu na wskaźniku poprzez wypełnianie tła kontenera.
Aby zgrupować węzły i przeciągać je zbiorczo jako grupę, wykonaj następujące czynności:
Kliknij lewym przyciskiem myszy i rozciągnij ramkę wokół grupy węzłów. Wszystkie zaznaczone węzły zostaną wyróżnione.
Chwyć węzeł i przeciągnij po grafie, wszystkie wybrane węzły zostaną przesunięte razem jako jeden element.
Konfiguracja skalowania i koloru ikon
W przypadku tej sekcji materiału wybierzesz i przeskalujesz ikonę, a także wybierzesz kolor ikony w materiale i w UI. Ikony znajdują się w folderach Fortnite > Tekstury > Ikony.
Kliknij prawym przyciskiem myszy w obszarze grafu i dodaj do grafu następujące węzły:
TextureCoordinate
AppendVector
Limit
TextureSample
Constant3Vector
Pomnóż
Stała
Wybierz węzeł Stała w grafie, kliknij prawym przyciskiem myszy i wybierz opcję Duplikuj z menu rozwijanego. Na pierwszym węźle pojawi się kolejny węzeł Stała. Przenieś duplikat pod oryginał.
Zduplikuj węzeł Pomnóż.
Zduplikuj węzeł LinearInterpolate (Lerp).
Wybierz górny węzeł Stała w grafie i dodaj ustawienie Wartość domyślna wynoszące 0.7.undefined
Kliknij węzeł prawym przyciskiem myszy i wybierz Konwertuj na parametr z menu rozwijanego. Nadaj parametrowi nazwę IconScaleX. Ten węzeł będzie sterował skalowaniem rozmiaru współrzędnych X ikony.
Wybierz dolny węzeł Stała w grafie i dodaj ustawienie Wartość domyślna wynoszące 0.7.
Kliknij węzeł prawym przyciskiem myszy i wybierz Konwertuj na parametr z menu rozwijanego. Nadaj parametrowi nazwę IconScaleY. Ten węzeł będzie sterował skalowaniem rozmiaru współrzędnych Y ikony.
Wyciągnij węzeł parametru IconScaleX i wetknij go do wejścia A na węźle AppendVector.
Wyciągnij węzeł parametru IconScaleY i wetknij go do wejścia B na węźle AppendVector.
Wartościami X i Y IconScale ustawionymi w węźle parametru można sterować poza materiałem po przekształceniu go w instancję materiału.
Następnie musisz utworzyć węzeł Funkcja materiału, aby dodać do materiału funkcję skalującą UV ikony.
Konfiguracja Funkcji materiału: UI_Scale
W tym kroku dowiesz się, jak utworzyć Funkcję materiału i wyszukać funkcje, których można użyć z węzłem.
Kliknij graf prawym przyciskiem myszy i wpisz MaterialFunction w pasku wyszukiwania. Wybierz MaterialFunctionCall z menu rozwijanego. Na grafie pojawi się węzeł MaterialFunctionCall.
W panelu Szczegóły kliknij menu rozwijane Funkcja materiału, w pasku wyszukiwania wpisz UI_Scale, a następnie z menu rozwijanego wybierz MF_UI_Scale. Węzeł MaterialFunctionCall zamieni się w węzeł Skala UI.
Funkcja UI_Scale umożliwia zwiększenie lub zmniejszenie skali UV ikony przy użyciu Funkcji materiału. Funkcji materiału można używać w materiale tylko za pośrednictwem węzła Funkcja materiału.
Konfiguracja UV ikony
Następnie dodasz ikonę oraz kolor ikony do materiału, który będzie skalowany podczas pobierania informacji z parametrów i skalowania UI.
Wyciągnij węzeł TextureCoordinate i wetknij go do wejścia UV (V2) na węźle MF_UI_Scale.
Wyciągnij węzeł AppendVector i wetknij go do wejścia Skala (V2) na węźle MF_UI_Scale.
Wyciągnij gniazdo Wynik z węzła MF_UI_Scale i wetknij je do białego wejścia na węźle Ograniczenie.
Wybierz węzeł Próbka tekstury, aby otworzyć jego opcje w panelu Szczegóły.
Otwórz menu rozwijane Tekstura.
W pasku wyszukiwania wpisz „ikona”.
Wybierz ikonę z listy rozwijanej.
Wyciągnij białe gniazdo z węzła Ogranicznik i wetknij je do wejścia UV na węźle Próbka tekstury.
Wyciągnij gniazdo RGB z węzła Próbka tekstury i wetknij je do wejścia A na pierwszym węźle Pomnóż.
Wyciągnij gniazdo A z węzła Próbka tekstury i wetknij je do wejścia B na pierwszym węźle Pomnóż.
Ponownie wyciągnij gniazdo A z węzła Próbka tekstury i wetknij je do wejścia Alfa na drugim węźle LinearInterpolate (Lerp).
Wyciągnij pierwszy węzeł Pomnóż i wetknij go do wejścia B na drugim węźle Pomnóż.
Wybierz węzeł Constant3Vector, aby otworzyć jego opcje w panelu Szczegóły.
Kliknij pole Stała, aby otworzyć koło kolorów.
Wybierz kolor ikony z koła kolorów.
Wyciągnij białe gniazdo węzła Constant3Vector i wetknij je do wejścia A na drugim węźle Pomnóż.
Wyciągnij białe gniazdo z drugiego węzła Pomnóż i wetknij je do wejścia B na pierwszym węźle LinearInterpolate (Lerp).
Wyciągnij białe gniazdo z pierwszego węzła Pomnóż i wetknij je do wejścia Alfa na pierwszym węźle LinearInterpolate (Lerp).
Wyciągnij białe gniazdo z pierwszego węzła Pomnóż i wetknij je do wejścia B na drugim węźle LinearInterpolate (Lerp).
Wyciągnij białe gniazdo z pierwszego węzła LinearInterpolate (Lerp) i wetknij je do wejścia Kolor końcowy na węźle Materiał główny.
W oknie podglądu materiału pojawi się teraz ikona.
Następnie skonfigurujesz maskę paska postępu. Zasada działania polega na odsłonięciu tylko tej części materiału, która odpowiada wzrostowi liczby likwidacji, jak na poniższym gifie.
Konfiguracja maski paska postępu
Ostatnim krokiem tworzenia materiału jest utworzenie maski dla paska postępu, którą można wywołać w widżecie lub w Sequencerze, aby animować materiał UI, powodując wypełnianie paska postępu kolorem materiału w miarę likwidacji wrogów przez gracza.
Musisz zrobić miejsce na następną serię węzłów. Zaznacz wszystkie dotychczasowe węzły, klikając lewym przyciskiem i rozciągając wokół nich ramkę zaznaczenia, a następnie przesuń je w lewo jako jedną grupę.
Musisz wetknąć skonfigurowaną maskę do drugiego węzła LinearInterpolate (Lerp). Wybierz drugi węzeł LinearInterpolate (Lerp) i przesuń go w prawo w kierunku węzła Materiał główny. Konfiguracja węzłów w tym momencie powinna wyglądać tak, jak poniżej.
Kliknij ilustrację, aby ją powiększyć.
W przypadku tej sekcji materiału musisz zamaskować właściwości materiału na podstawie ich współrzędnych X i Y w kontenerze. Współrzędne te będą również używane do odsłaniania materiału w miarę zwiększania liczby likwidacji zaliczonych przez gracza.
Kliknij prawym przyciskiem myszy w obszarze grafu i dodaj do grafu następujące węzły:
Stała
ConstantBiasScale
LinearGradient
Krok
Pomnóż
Wybierz węzeł Stała, kliknij węzeł prawym przyciskiem myszy i wybierz z menu rozwijanego opcję Duplikuj.
Wybierz pierwszy węzeł Stała i nadaj mu wartość 5.0.
Kliknij węzeł prawym przyciskiem myszy i wybierz opcję Przekształć w parametr.
Nadaj parametrowi nazwę TrackerProgress.
Ten parametr będzie używany w UMG i Sequencerze do śledzenia liczby likwidacji zaliczonych przez gracza i powodowania odsłonięcia materiału w kontenerze.
Wyciągnij białe gniazdo z węzła Postęp postępometru i wetknij je do węzła ConstantBiasScale.
Wybierz węzeł ConstantBiasScale i w panelu Szczegóły ustaw wartość Odchylenie na 0, a skalę na 0.1. To pozwala znormalizować TrackerProgress do wartości 0–10 Postępometru.
Wyciągnij węzeł ConstantBiasScale i wetknij go do wejścia Y na węźle Krok.
Wyciągnij gniazdo VGradient z węzła LinearGradient i wetknij je do wejścia X na węźle Krok.
Wyciągnij białe gniazdo z węzła Krok i wetknij je do wejścia B na węźle Pomnóż.
Wybierz drugi węzeł Stała i nadaj mu wartość 0.9.
Kliknij graf prawym przyciskiem myszy i wpisz MaterialFunctionCall w pasku wyszukiwania.
Wybierz węzeł Funkcja materiału, aby otworzyć jego opcje w panelu Szczegóły.
W pasku wyszukiwania wpisz UI_SDF_Circle.
Wybierz UI_SDF_Circle z menu rozwijanego.
Ta funkcja materiału steruje rozmiarem kontenera za pomocą węzła Stała i określa kształt kontenera materiału. W tym przypadku jest to kontener okrągły.
Wyciągnij drugi węzeł Stała i wetknij go do wejścia Rozmiary na węźle MF_UI_SDF_Circle.
Wyciągnij gniazdo Wypełnienie z węzła MF_UI_SDF_Circle i wetknij je do wejścia A na węźle Pomnóż.
Wyciągnij białe gniazdo z węzła Pomnóż i wetknij je do wejścia A na drugim węźle LinearInterpolate (Lerp).
Wyciągnij białe gniazdo z drugiego węzła LinearInterpolate (Lerp) i wetknij je do wejścia Nieprzezroczystość na węźle Materiał główny.
Materiał jest gotowy. Cała konfiguracja węzłów powinna wyglądać tak, jak na poniższym obrazie.
Kliknij ilustrację, aby ją powiększyć.
Aby użyć tego materiału z UMG, przekształć go w instancję materiału. Parametry instancji materiału można zastępować, włączać i wyłączać oraz wywoływać w UMG i Sequencerze w celu animowania UI, z którym materiał jest używany.
Aby utworzyć instancję materiału:
Kliknij prawym przyciskiem myszy miniaturę materiału w Przeglądarce zawartości.
Wybierz Utwórz instancję materiału z menu rozwijanego.