Niestandardowy materiał UI dla projektu możesz utworzyć na dwa sposoby:
Kolekcja materiałów: Kolekcja materiałów, która ma wszystkie funkcje UI wstępnie wbudowane w materiał.
Niestandardowy materiał nadrzędny: Materiał utworzony od podstaw przy użyciu funkcji materiału.
Kolekcja materiałów
Kolekcja materiałów to seria wysoce konfigurowalnych materiałów wskaźników i tekstur. Kolekcję materiałów można znaleźć w przeglądarce zawartości w obszarze Fortnite > UI > Materiały. Materiały są podzielone na dwa rodzaje:
Materiały wskaźników: Zwykle używane jako paski postępu.
Tekstury: Zwykle używane w ikonografii i portretach graczy.
Urządzenie material_collection_device zawiera przykład wykorzystania kolekcji materiałów przy użyciu Verse do wyświetlania tekstur i materiałów, a także wykorzystania parametrów instancji materiałów do dynamicznej zmiany materiałów UI, gdy w grze wystąpią zdarzenia obrażeń.
Niestandardowy materiał nadrzędny
Aby utworzyć niestandardowy materiał nadrzędny dla widżetu Obraz UMG, musisz ustawić domenę materiału na interfejs użytkownika dla węzła materiału głównego. W tym materiale nadrzędnym wykorzystano funkcje materiałów, które sprawiają, że materiał jest bardziej dynamiczny.
Materiały są konwertowane na instancje materiału, aby zapewnić wydajne ponowne wykorzystanie materiału nadrzędnego oraz bardziej przyjazny interfejs, który umożliwia dostosowanie parametrów materiału. Parametry materiału są następnie aktualizowane w UI za pośrednictwem powiązanych właściwości widżetu UMG.
Wszelkie zmiany wprowadzone w materiale nadrzędnym po konwersji będą podlegać propagacji we wszystkich jego instancjach materiału.
W Przeglądarce zawartości otwórz foldery UI > Urządzenia > Sterownik interfejsu > MaterialInstances. Znajdź i otwórz materiał paska osłony o nazwie MI_HCD01_ShieldBar, klikając dwukrotnie miniaturę. Spowoduje to otwarcie instancji materiału w edytorze instancji materiału.
W poprzedniej sekcji Ustawianie parametrów urządzenia wyjaśniono, w jaki sposób właściwość postępu instancji materiału została wykorzystana do aktualizacji paska osłony w interfejsie, gdy osłona gracza otrzyma obrażenia lub zostanie naprawiona. Zmiany te są osiągane poprzez wykorzystanie informacji gracza ze sterownika interfejsu, aby na podstawie informacji o graczu poinformować instancję materiału, w którą stronę ma się przesunąć na pasku.
Materiały
Powodem, dla którego instancja materiału może nasłuchiwać funkcji urządzenia, jest to, że jej parametry są skonfigurowane w materiale nadrzędnym. Materiały interfejsu użytkownika wykorzystują funkcje materiału do tworzenia rytmów czasowych lub wzorów w materiale, które mogą być wykorzystane za pośrednictwem instancji materiału do aktualizacji informacji o graczu w interfejsie.
Ten szablon wykorzystuje te same funkcje materiału, co projekt laboratorium materiałów UI. Aby lepiej zrozumieć różne typy funkcji materiału i sposób ich użycia, patrz strona Zestawienie funkcji materiału w laboratorium materiałów UI.
Poniżej znajduje się tabela przedstawiająca różne materiały utworzone dla projektu wraz z objaśnieniem ich stosowania.
| Lista materiałów projektu | Użycie |
|---|---|
M_DropShadow | Tworzy cień wyświetlany pod kształtem. Umożliwia tworzenie kwadratów, okręgów, sześciokątów lub niestandardowych kształtów (przy użyciu tekstury). Kształty niestandardowe nie pozwalają na zmiękczanie cienia. |
M_IconWithbackground | Tworzy ikonę z tłem i konturem. |
M_Meter | Tworzy prosty miernik słupkowy dla urządzenia testu umiejętności. |
M_Notches | Tworzy ozdobne wycięcia, które są równomiernie rozmieszczone. Używany wspólnie z M_Meter do utworzenia miernika słupkowego z nacięciami dla urządzenia testu umiejętności. |
M_ProgressBar_Basic | Tworzy pasek postępu z zakrzywionymi lub ostrymi narożnikami oraz konturem i wypełnieniem gradientowym. |
M_ProgressBar_Orb | Tworzy pasek postępu w postaci kuli, który wypełnia się w miarę postępów. Pośrodku kuli znajduje się tekstura ikony. |
M_Texture_Complex | Umożliwia skalowanie i/lub zniekształcanie niestandardowej tekstury. Można go na przykład użyć do stworzenia efektu migotania lub efektu podwodnego. |
M_Texture_SImple | Umożliwia kolorowanie prostych tekstur. Można go używać z prostą czarno-białą teksturą lub teksturą z upakowaną w kanałach (przy użyciu kanałów RGB). |
M_Wave | Tworzy falę z bąbelkami unoszącymi się u góry. |
Grupy parametrów
Otwórz różne instancje materiału z szablonu, aby wyświetlić różne parametry na liście w grupach parametrów. Są to edytowalne parametry funkcji materiału, które można powiązać z urządzeniami i aktualizować w interfejsie.
Grupy parametrów mogą być edytowane w edytorze instancji materiału tylko wtedy, gdy są zaznaczone.
Aby edytować parametry w edytorze instancji materiału, otwórz Przeglądarkę zawartości i foldery UI > Urządzenia > SkilledInteraction > MaterialInstances, a następnie znajdź i otwórz instancję materiału MI_SID03_Water.
Zacznij od zmiany koloru wody, kliknij dwukrotnie parametry Kolor płynu 1 i Kolor płynu 2. Otworzy się koło kolorów. Zmień kolor wody na inny. W poniższym przykładzie kolor wody zmieniono z niebieskiego na zielony.
Przyjrzyj się uważnie bąbelkom. Jeśli wybrane jest okno edytora instancji materiału, bąbelki w materiale powinny unosić się w górę. Rozmiar bąbelków możesz zmienić, włączając parametry rozmiaru BubblesStartSize i BubblesMiddleSize, a następnie edytując ich parametry. Jeśli wartość parametru jest za duża, bąbelki wydają się znikać za ścianą.
Takie parametry można ustawić w powiązaniach widoku i mogą być one używane przez funkcje urządzenia do aktualizowania informacji o graczu.
Przeprowadź migrację instancji materiałów i zasobów tekstur, aby używać ich we własnych projektach.
Jakość tekstur
W UI tekstury używane są w celu dodania szczegółów i dopracowania, co nie jest możliwe w przypadku samych materiałów. Jeśli zdecydujesz się używać tekstur w projektach UI, pamiętaj, że tekstury wymagają dużej ilości pamięci.
Korzystając z tekstury testu umiejętności oraz połączonych próbek tekstury i materiału, możesz sprawdzić, jaka część UI jest stworzona za pomocą tekstur. W przykładowej teksturze, gdy wyłączysz widżet pola tła, jedynymi widocznymi częściami UI są komunikat, pasek zdrowia i licznik likwidacji.
Preferowaną metodą uzyskania wyglądu stylizowanych sześcianów na polu tła jest użycie tekstury. Złożoność projektu i kształtu trudno byłoby odtworzyć w UMG. Materiałów UI można używać tylko do tworzenia podstawowych kształtów, dodawania obrysu wokół kształtu materiału oraz dodawania gradientów do kształtu i obrysu materiału.
Przykładowy UI zawierający materiał i teksturę pokazuje, w jaki sposób mieszanie tekstur i materiałów pozwala uzyskać dopracowany wygląd UI. UI składa się z trzech tekstur, które razem tworzą projekt pola tła, oraz obrazu stwora.
Obraz stwora jest nałożony na widżet Obraz. Widżet Obraz nie używa instancji materiału. Zamiast tego opcja pędzla tworzy biały prostokąt na warstwie pod obrazem stwora. Rozmiar i wymiary prostokąta ustawia się w panelu Szczegóły za pomocą opcji Rozmiaru obrazu.
W panelu Hierarchia widżety poprzedzające inne na liście znajdują się na warstwie tła, a każdy dodatkowy widżet znajduje się na wierzchu poprzedniego widżetu na liście.
Instancja materiału służy jako cień dla fotografii zdjęcia stwora w projekcie.
Tekstury SDF
Oznakowane pole odległości (SDF) jest funkcją wykorzystującą pozycję jako daną wejściową, na podstawie której wyprowadzana jest wyjściowa odległość. Na przykład na poniższym obrazie środek promienia ma wartość 1, co oznacza pełną biel, jednak w miarę zbliżania się do krawędzi wartość przechodzi do 0, czyli do pełnej czerni. Wykorzystując tę koncepcję, pliki SDF umożliwiają określenie zakresu wartości z przedziału od 0 do 1 w celu zastosowania efektu.
To oznacza, że możesz:
Wybrać wartości od 0.5 do 1.0 i zastosować jednolity kolor.
Wybierać wartości z zakresu od 0.49 do 0.0 i zastosować zanikający kolor imitujący poświatę.
Normalne tekstury tego nie robią, ponieważ normalne tekstury mają wartość 1 (białą) lub 0 (czarną). SDF dostarczają wszystkich tych danych w zakresie od 0 do 1.
Powyższe koncepcje można również zastosować do fotografii. Jeśli zdjęcie zostało zapisane jako plik .png i zastosowano do niego efekty, ale obraz nie zawiera pełnej gamy kolorów i szczegółów oświetlenia, możliwości dostosowania obrazu są ograniczone, ponieważ edycja obrazu w celu rozjaśnienia lub przyciemnienia może spowodować utratę szczegółów lub ich prześwietlenie.
Jeśli to samo zdjęcie zostało zrobione lustrzanką cyfrową, wówczas plik RAW, który zawiera wszystkie informacje o kolorach i oświetleniu, można dostosować do poziomu szczegółowości, np. rozjaśnić ciemne części bez utraty szczegółów w tych ciemnych obszarach i odwrotnie.
Zajrzyj do folderów UI > Tekstura > SDF, aby skorzystać z pełnego podglądu tekstur SDF w celu stworzenia własnego, niepowtarzalnego UI.
Istnieje folder o nazwie Ikony pełen ikon SDF.
Tekstury SDF w materiałach
Większość materiałów UI to płaskie materiały 2D, które używają wartości binarnych 0 i 1 do definiowania zewnętrznej strony i środka materiału. W materiałach 2D. Gdy w węźle Próbka tekstury są używane tekstury SDF i są połączone z funkcją materiału SDF, UI można dostosować, manipulując niektórymi wartościami w materiale UI.
Zmienianie różnych wartości w materiale UI za pomocą tekstur SDF i węzłów materiału pozwala uzyskać kilka różnych efektów, takich jak:
Jakość cieni
Rozmycie
Glow
Blask
Obrys
Animacje
Skalowanie
Tekstury SDF sprawiają, że materiały UI wyglądają bardziej dynamicznie i niepowtarzalnie, ponieważ można je łatwo skalować bez utraty jakości, podczas gdy zwykłe zasoby tracą jakość po powiększeniu lub zmniejszeniu. Tekstury SDF są lepiej zoptymalizowane, dzięki czemu wszystkie efekty można łatwo uzyskać przy użyciu tylko jednej tekstury, co pozwala uzyskać bardziej przejrzysty graf materiałów.
Z drugiej strony, regularne czarno-białe tekstury nie są łatwe do manipulowania w grafach materiałów i wymagają użycia wielu tekstur. Na powyższym obrazie najprostszym sposobem dodania poświaty do tekstur jest nałożenie tekstury na gradient radialny, zamiast tworzenia rozbudowanego grafu materiałów, aby uzyskać podobny efekt.
Węzeł materiału płynnego przejścia
Węzły materiału typu przejście zwykle tworzą twarde przejście w materiałach, na przykład bezpośrednio od 0 do 0.25. Z kolei węzeł Płynne przejście wykorzystuje funkcje SDF do utworzenia płynnego przejścia w materiałach UI. Materiały UI w szablonie, które używają tekstur SDF, używają węzła materiału Płynne przejście, aby utworzyć płynne przejście od środka materiału do zewnętrznej krawędzi.
Wnioski
Poniżej przedstawiamy kilka kluczowych wskazówek dotyczących wykorzystania materiałów i tekstur w zasobach UI:
Korzystanie z funkcji materiału pozwala zaoszczędzić czas dzięki wstępnie zdefiniowanym węzłom materiału, które odwołują się do funkcji materiałów paska zdrowia i osłony oraz materiałów UI pola tła, powodując ich reakcję na zdarzenia w grze.
Materiały i tekstury SDF tworzą bardziej dynamiczny wygląd UI.
Zrozumienie nakładania warstw w widżetach Obraz pozwoli w pełni odróżnić prosty UI od bardziej interesującego wizualnie.
Tekstury powinny być stosowane w elementach projektu, które są złożone wizualnie i których nie można wykonać przy użyciu materiałów.