Dostosowywanie tekstur UI jest czasochłonne i wymaga dogłębnej znajomości funkcji materiału i konfiguracji. Aby zwiększyć dostępność niestandardowych tekstur UI, Unreal Editor dla Fortnite (UEFN) oferuje szereg tekstur, które można w dużym stopniu dostosować.
Foldery materiałów UI
Folder materiałów UI znajduje się w przeglądarce zawartości pod Fortnite > UI > Materiały.
Folder Materiały zawiera dwa typy materiałów UI:
Materiały wskaźników: Zwykle używane do pomiaru zdrowia i osłon. (Zobacz kolekcje materiałów UI, aby uzyskać więcej informacji.)
Tekstury: Zwykle używane jako obrazek tła lub w animacjach UI.
Tekstury należą do następujących kategorii parametrów:
Tekstura SDF | Efekty teksturowe | Maska tekstury |
Kształt tekstury z rozmytym obrysem. Możesz ustawić parametry, które pozwalają dostosować:
Tekstury można również obracać i rozmywać. | Tekstura z dziewięcioma różnymi efektami specjalnymi, które można dostosować. Wszystkimi efektami sterują Funkcje materiału, które można dostosowywać za pomocą parametrów wejściowych. | Maska tekstury ukrywa części tekstury w zależności od wprowadzonych danych. Możesz ustawić parametry, które umożliwiają dostosowanie:
|
Tworzenie instancji materiału
Aby użyć tekstury z folderu UI, musisz najpierw przekształcić ją w instancję materiału. Instancje materiałów zużywają mniej pamięci niż materiały lub tekstury, a dzięki dostępnym parametrom można je znacznie lepiej dostosowywać w UMG.
Parametry można zmieniać w modelu widoku, gdzie są one powiązane z funkcją urządzenia lub kodem Verse, który manipuluje materiałem, aby zachowywał się w określony sposób.
Aby utworzyć instancję materiału, wykonaj następujące kroki:
Otwórz foldery Projekt > Fortnite > UI > Materiały.
Kliknij prawym przyciskiem myszy materiał, aby otworzyć rozwijane menu kontekstowe.
Wybierz Utwórz instancję materiału z menu rozwijanego.
Instancja materiału jest automatycznie generowana w głównym folderze projektu.
Tekstura SDF
Tekstura SDF może zastąpić domyślny obraz ikony awatara gracza lub być użyta do ikonografii. Tekstura SDF ma wiele konfigurowalnych parametrów, które można dostosować, aby określić wygląd ikony, sprawić, że będzie rozmyta lub ostra, stworzyć efekt poświaty, dzięki któremu ikona będzie wyglądała jak neon, i nie tylko.
Wszystkie parametry tekstury można używać w modelu widoku w UMG oraz w kodzie Verse za pomocą pól Verse. W poniższej tabeli znajdziesz więcej informacji na temat używania różnych parametrów.
O.X.R., baza
Podstawowe parametry tekstury SDF.
Parametr | Opis | GIF |
Tekstura | Wybierz teksturę SDF z menu rozwijanego. | |
Kolor | Wybór koloru tekstury. | |
Maks. poświata | Zwiększa i zmniejsza poświatę krawędzi kształtu. Wartości bliższe 0 utrwalają obrys kształtu. Wartości bliższe 1 zwiększają poświatę obrysu kształtu. Dodatkowe parametry GlowMax zależą od wartości GlowMax. | |
Obrót | Obraca teksturę od środka. Wartość 0,25 obraca teksturę o 90° w lewo. Wartość -0,25 oznacza obrót o 90°w prawo. | |
Ilość rozmycia tekstury | Określa poziom rozmywania, który ma być wymuszany na krawędziach tekstury SDF, gdy są używane parametry GlowMax. Wysokie wartości zwiększają stopień rozmywania, a niższe wartości zmniejszają jego poziom. |
Kolor cienia
Określa kolor cienia tekstury.
Parametr | Opis | GIF |
Maks. poświata cienia | Określa, jak intensywna jest poświata cienia tekstury. Wartości bliższe s0 utrwalają obrys kształtu. Wartości bliższe 1 zwiększają poświatę obrysu kształtu. | |
Przesunięcie X cienia | Określa wartość przesunięcia cienia tekstury wzdłuż osi X. Wyższe wartości odsuwają cień od tekstury. Niższe wartości przybliżają cień do tekstury. | |
Przesunięcie Y cienia | Określa wartość przesunięcia cienia tekstury wzdłuż osi Y. Wyższe wartości odsuwają cień od tekstury. Niższe wartości przybliżają cień do tekstury. | |
Nieprzezroczystość cienia | Określa nieprzezroczystość cienia tekstury. Wartości bliższe 1 zwiększają nieprzezroczystość wybranego koloru. Wartości bliższe 0 zmniejszają nieprzezroczystość koloru. | |
Obrót cienia | Obróć cień tekstury od środka. Wartość 0,25 obraca cień tekstury o 90° w lewo. | |
Grubość cienia | Ustala grubość cienia tekstury. Wyższe wartości zwiększają grubość cienia. Niższe wartości zmniejszają grubość. |
Wiosło
Parametry wpływające na wygląd pociągnięcia tekstury.
Parametr | Opis | GIF |
Kolor wewnętrznego pociągnięcia | Określa kolor wewnętrznego pociągnięcia tekstury. | |
Maksymalna poświata pociągnięcia wewnętrznego | Określa maksymalną wartość poświaty wewnętrznego pociągnięcia tekstury. Wartość InnerStrokeGlowMax jest zależna od wartości GlowMax. Ustawienie maksymalnej wartości GlowMax określa maksymalną wartość poświaty dla InnerStrokeGlowMax i OuterStrokeGlowMax. | |
Grubość wewnętrznego pociągnięcia | Ustala grubość wewnętrznego pociągnięcia. Wyższe wartości zwiększają grubość pociągnięcia, a niższe wartości je zmniejszają. | |
Maks. poświata grubości wewnętrznego pociągnięcia | Określa grubość poświaty wewnętrznego pociągnięcia tekstury. Wyższe wartości zwiększają grubość poświaty pociągnięcia, a niższe wartości zmniejszają grubość poświaty wewnętrznego pociągnięcia tekstury. Wartość InnerStrokeThicknessGlowMax jest zależna od wartości GlowMax. Ustawienie maksymalnej wartości GlowMax określa maksymalną wartość poświaty dla InnerStrokeGlowMax, InnerStrokeThicknessGlowMax oraz OuterStrokeGlowMax. | |
Kolor zewnętrznego pociągnięcia | Określa kolor pociągnięcia zewnętrznego. | |
Maks. poświata pociągnięcia zewnętrznego | Określa intensywność poświaty pociągnięcia zewnętrznego tekstury. Wartości bliższe 0 utrwalają obrys kształtu. Wartości bliższe 1 zwiększają poświatę obrysu kształtu. Wartość OuterStrokeGlowMax jest zależna od wartości GlowMax. Ustawienie maksymalnej wartości GlowMax określa maksymalną wartość poświaty dla InnerStrokeGlowMax, InnerStrokeThicknessGlowMax oraz OuterStrokeGlowMax. | |
Grubość zewnętrznego pociągnięcia | Ustala grubość zewnętrznego pociągnięcia tekstury. Wyższe wartości zwiększają grubość pociągnięcia, a niższe wartości zmniejszają grubość. | |
Maks. poświata grubości zewnętrznego pociągnięcia | Określa grubość poświaty zewnętrznego pociągnięcia tekstury. Wyższe wartości zwiększają grubość poświaty pociągnięcia, a niższe ją zmniejszają. |
Efekty teksturowe
Efekty Tekstury ma szereg efektów, które można dostosować, które mogą przekształcić wygląd tekstury:
Pole
Zniekształcenie
Pikselowy
Odbijanie
Półton
Gradient schodkowy
I inne...
Parametry można ze sobą łączyć i kierować do nich odwołania za pomocą modelu widoku w UMG oraz w kodzie Verse za pomocą pól Verse. W poniższej tabeli znajdziesz więcej informacji na temat różnych parametrów.
Tekstura podstawowa
Podstawowe parametry tekstury. Wybierz teksturę z menu rozwijanego.
Parametr | Opis | GIF |
Tekstura | Wybierz teksturę z menu rozwijanego. | |
Kafelkowanie w osi X | Dzieli teksturę na kafelki wzdłuż osi X. Wartość 1 nie powoduje nakładania się na teksturę. Wartości powyżej 1 dodają pola wzdłuż osi X. Aby ten parametr zawierał kompletne obrazy, najlepiej używać liczb całkowitych. | |
Kafelkowanie w osi Y | Dzieli teksturę na kafelki wzdłuż osi Y. Wartość 1 nie powoduje nakładania się na teksturę. Wartości powyżej 1 dodają kafelki do tekstury wzdłuż osi Y. Najlepiej używać liczb całkowitych, aby uzyskać kompletne obrazy | |
Przeniesienie osi X | Przesuwa teksturę wzdłuż osi X. Możesz animować teksturę, celując w parametr Przeniesienia X w Sequencerze w UMG. | |
Przeniesienie osi Y | Przesuwa teksturę wzdłuż osi Y. Możesz animować teksturę, kierując parametr Przeniesienia Y w Sequencerze w UMG. | |
Prędkość przeniesienia osi X | Określa szybkość translacji wzdłuż osi X. | |
Prędkość przeniesienia osi Y | Określa szybkość translacji wzdłuż osi Y. |
Skalowanie
Parametry, które umożliwiają zmianę skali i rozmiaru tekstury. Tworzy efekt na teksturze.
Parametr | Opis | GIF |
Jest skalowaniem | Określa efekt skalowania tekstury. Opcja ta jest widoczna tylko wtedy, gdy używane są też inne parametry skalowania. | |
Maks. szybkość skalowania | Określa maksymalną prędkość efektu skalowania na teksturze. | |
Min. szybkość skalowania | Określa minimalną prędkość efektu skalowania na teksturze. | |
Wielkość startowa | Rozmiar tekstury na początku animacji. | |
Średni rozmiar | Rozmiar tekstury w środku animacji. | |
Wielkość końcowa | Rozmiar tekstury na końcu animacji. |
Zniekształcenie
Parametry, które umożliwiają dodanie efektu zniekształcenia do tekstury.
Aby zmienić wygląd ikony, należy użyć dodatkowych parametrów zniekształcenia wraz z parametrem IsWarping.
Parametr | Opis | GIF |
Jest zniekształcaniem | Określa ilość efektu zniekształcenia tekstury. | |
Amplituda X | Stosuje efekt rozciągnięcia wzdłuż osi X. | |
Amplituda Y | Stosuje efekt rozciągnięcia wzdłuż osi Y. | |
Częstotliwość X | Stosuje efekt fali sinusoidalnej do tekstury wzdłuż osi X. | |
Częstotliwość Y | Stosuje efekt sinusoidy do tekstury wzdłuż osi Y. | |
Szybkość warpowa | Określa, jak szybko efekt zniekształcenia działa na teksturze. |
Pikselowy
Parametry, które umożliwiają pikselizację wyglądu tekstury.
Parametr | Opis | GIF |
Jest pikselowy | Dodaje efekt pikselowy do tekstury. Wartość 0 nie stosuje efektu piksela do tekstury. Wartość 1 powoduje całkowite pikselowanie tekstury. | |
Liczba pikseli | Określa liczbę pikseli w teksturze. Wartość 1 zmienia teksturę w kwadrat. Dodanie większej liczby pikseli tworzy pikselowy kształt. |
Odbijanie
Parametry, które umożliwiają dodanie efektu do tekstury.
Parametr | Opis | GIF |
Odbija się | Określa współczynnik odbicia efektu. Ta opcja jest widoczna tylko wtedy, gdy używane są inne parametry odbicia. | |
Szybkość odbicia | Określa, jak szybko tekstura się odbija. | |
Odbijanie X | Określa siłę efektu do zastosowania wzdłuż osi X. | |
Odbijanie Y | Określa siłę efektu do zastosowania wzdłuż osi Y. |
Półton
Parametry, które generują komiksowy efekt kropki atramentu na teksturze.
Parametr | Opis | GIF |
Jest półtonowy | Określa, czy efekt jest aktywny, oraz nieprzezroczystość efektu półtonów. Wyższe wartości zwiększają nieprzezroczystość efektu, podczas gdy niższe wartości zmniejszają nieprzezroczystość efektu. | |
Gęstość kropek | Zwiększa gęstość kropek w efekcie. Wyższe wartości zwiększają liczbę kropek i zmniejszają ich rozmiar. Niższe wartości zmniejszają liczbę kropek i zwiększają ich rozmiar. | |
Maks. poświata kropki | Określa maksymalną ilość poświaty nakładanej wokół kropek. Wartości dodatnie sprawiają, że kropki wyglądają jak gwiazdki, a wartości ujemne powodują, że kropki wyglądają jak okręgi. | |
Min. poświata kropki | Określa minimalną ilość poświaty wokół kropek. Za pomocą wartości można zmienić kolor tła i kropek. Wartości 5 i wyższe powodują przejście efektu do jednego koloru. Podobnie, wartości poniżej -7 powodują, że efekt przechodzi w jeden kolor. | |
Maks. rozmiar kropki | Określa maksymalny rozmiar kropek. | |
Min. rozmiar kropki | Określa minimalny rozmiar kropek. | |
Kolor gradientu 1 | Określa kolor podstawowy efektu półtonowego. | |
Kolor gradientu 2 | Określa kolor dodatkowy efektu półtonowego. | |
Szybkość panoramowania półtonów X | Określa szybkość, z jaką kropki poruszają się po osi X. | |
Szybkość panoramowania w półtonach Y | Określa szybkość, z jaką kropki poruszają się po osi Y. | |
Obrót półtonowy | Obraca kierunek przemieszczania się kropek. |
Gradient schodkowy
Parametry umożliwiające dodanie gradientu schodkowego do tekstury.
Te parametry są zależne od parametrów koloru odcienia.
Parametr | Opis | GIF |
Jest gradientem schodkowym | Określa, czy do tekstury zastosowano schodkowy efekt gradientu. | |
Wartość gradientu schodkowego | Określa stopień gradientu schodkowego stosowanego do tekstury. Aby parametr ten działał, należy włączyć funkcję IsSteppedGradient z wartością poniżej 1.0. |
Kolor odcienia
Te parametry umożliwiają dodanie kolorów do tekstury w celu uzyskania efektu gradientu na teksturze.
Parametr | Opis | GIF |
Nieprzezroczystość gradientu odcienia | Określa nieprzezroczystość kolorów gradientu. Niższe wartości zmniejszają przezroczystość tekstury, a wyższe wartości zwiększają nieprzezroczystość materiału. | |
Kolor odcienia 1 | Określa pierwszy kolor w gradiencie. | |
Pozycja odcienia koloru 1 | Określa pozycję pierwszego koloru w gradiencie. Ta opcja działa tylko wtedy, gdy wybrana jest opcja TintGradientOn i ustawiona jest wartość. | |
Kolor odcienia 2 | Określa drugi kolor w gradiencie. | |
Pozycja koloru odcienia 2 | Określa pozycję drugiego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność drugiego wybranego koloru. Ta opcja działa tylko wtedy, gdy wybrana jest opcja Tint GradientOn i ustawiona jest wartość. | |
Kolor odcienia 3 | Określa trzeci kolor w gradiencie. | |
Pozycja odcienia koloru 3 | Określa pozycję drugiego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność drugiego wybranego koloru. Ta opcja działa tylko wtedy, gdy wybrana jest opcja TintGradientOn i ustawiona jest wartość. | |
Gradient odcienia wł. | Określa, czy efekt gradientu jest stosowany do tekstury. | |
Obrót gradientu odcienia | Obraca kierunek gradientu. | |
Gradient promieniowy z odcieniem | Zmienia gradient na gradient promieniowy. | |
Rozmiar odcienia gradientu promieniowego | Określa rozmiar gradientu promieniowego. |
Kolor alfa
Parametry, które umożliwiają dodanie przezroczystości, koloru i gradientu do tekstury, która zawiera wartości alfa.
Parametr | Opis | GIF |
Nieprzezroczystość alfa | Określa nieprzezroczystość kolorów alfa na teksturze. Niższe wartości zmniejszają przezroczystość tekstury, a wyższe wartości zwiększają nieprzezroczystość materiału. | |
Kolor alfa 1 | Określa pierwszy kolor w gradiencie. | |
Pozycja koloru alfa 1 | Określa pozycję pierwszego koloru w gradiencie. Ta opcja działa tylko wtedy, gdy wybrana jest opcja AlphaGradientOn i ustawiona jest wartość. | |
Kolor alfa 2 | Określa drugi kolor w gradiencie. | |
Pozycja koloru alfa 2 | Określa pozycję drugiego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność drugiego wybranego koloru. Ta opcja działa tylko wtedy, gdy wybrana jest opcja AlphaGradientOn i ustawiona jest wartość. | |
Kolor alfa 3 | Określa trzeci kolor w gradiencie. | |
Pozycja koloru alfa 3 | Określa pozycję trzeciego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność trzeciego wybranego koloru. Ta opcja działa tylko wtedy, gdy wybrana jest opcja AlphaGradientOn i ustawiona jest wartość. | |
Gradient alfa wł. | Określa, czy gradient jest zastosowany na teksturze. | |
Obrót gradientu alfa | Obraca kierunek gradientu. | |
Gradient promieniowy alfa | Zmienia gradient na gradient promieniowy. | |
Rozmiar gradientu promieniowego alfa | Określa rozmiar gradientu promieniowego. |
Maska tekstury
Maska tekstury wykorzystuje parametry, które mogą maskować ikonę lub awatar gracza oraz dodawać elementy obrysu do ikony lub obrazka awatara.
Materiał maski tekstury ma szereg parametrów z możliwością dostosowania, których można używać z modelem widoku w UMG oraz w kodzie Verse za pośrednictwem pól Verse. W poniższej tabeli znajdziesz więcej informacji na temat używania różnych parametrów.
Tekstura
Parametry określające wygląd tekstury.
Parametr | Opis | GIF |
Tekstura | Wybierz teksturę z menu rozwijanego. | |
Alfa tekstury | Określa kolor alfa tekstury. Wartość 1 jest biała. Wartości poniżej 1 zmniejszają wartość bieli i mieszają się z kolorem tła. | |
Pozycja tekstury w osi X | Pozycjonuje teksturę wzdłuż osi X. | |
Pozycja tekstury w osi Y | Pozycjonuje teksturę wzdłuż osi Y. | |
Skala X tekstury | Skaluje teksturę wzdłuż osi X. | |
Skala Y tekstury | Skaluje teksturę wzdłuż osi Y. |
Uzupełnij
Parametry określające wygląd gradientu stosowanego do tła.
Parametr | Opis | GIF |
Niestandardowa tekstura wypełnienia | Wybierz teksturę wypełnienia z menu rozwijanego. | |
Wypełnienie alfa | Określa kolor alfa maski. Wartość 1 oznacza biel, a wartości poniżej 1 zmniejszają wartość bieli i zlewają się z kolorem tła. | |
Kolor wypełnienia 1 | Określa pierwszy kolor w gradiencie. | |
Pozycja gradientu koloru wypełnienia 1 | Określa pozycję pierwszego koloru w gradiencie. | |
Kolor wypełnienia 2 | Określa drugi kolor w gradiencie. | |
Pozycja gradientu koloru wypełnienia 2 | Określa pozycję drugiego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność drugiego wybranego koloru. | |
Kolor wypełnienia 3 | Określa trzeci kolor w gradiencie. | |
Pozycja gradientu koloru wypełnienia 3 | Określa pozycję trzeciego koloru w gradiencie. Wyższe wartości przesuwają gradient, aby rozpoczynał się po przeciwnej stronie. Niższe wartości zwiększają widoczność trzeciego wybranego koloru. | |
Rozmiar promieniowego gradientu koloru wypełnienia | Określa rozmiar gradientu w tle. | |
Rodzaj gradientu wypełnienia | Zmienia typ gradientu z promieniowego na liniowy. | |
Poświata | Określa natężenie poświaty tła. | |
Obrót wypełnienia gradientu liniowego | Obraca gradient wokół okręgu. Opcja LinearGradientFillRotation zależy od wartości ustawionych w opcji FillGradientType. | |
Kształt | Określa kształt maski wokół tekstury. | |
Obrót kształtu | Obraca kształt maski wokół tekstury. | |
Rozmiar kształtu | Określa rozmiar kształtu maski wokół tekstury. | |
Promień lewego dolnego rogu | Zmiana tego parametru powoduje dodanie zaokrąglonego lewego dolnego rogu w zależności od użytej wartości. | |
Promień prawego dolnego rogu | Zmiana tego parametru powoduje dodanie zaokrąglonego rogu w prawym dolnym rogu w zależności od użytej wartości. | |
Promień lewego górnego narożnika | Zmiana tego parametru powoduje dodanie zaokrąglonego rogu w lewym górnym rogu w zależności od użytej wartości. | |
Promień prawego górnego rogu | Zmiana tego parametru dodaje zaokrąglony róg w prawym górnym rogu w zależności od użytej wartości. |
Obrys
Parametry określające wygląd obrysu maski.
Parametr | Opis | GIF |
Grubość luki | Określa rozmiar luki między obrysem a teksturą. Opcja GapThickness jest zależna od tego, czy opcja OutlineAlpha ma ustawioną wartość większą niż 0.40. | |
Obrys alfa | Określa kolor alfa obrysu. Wartość 1 to pełny kolor alfa, wartości poniżej 1 zmniejszają wartość koloru i stapiają się z tłem. | |
Kolor 1 obrysu | Określa pierwszy kolor w gradiencie obrysu. | |
Pozycja koloru obrysu 1 | Określa pozycję pierwszego koloru w gradiencie obrysu. | |
Kolor 2 obrysu | Określa drugi kolor w gradiencie obrysu. | |
Pozycja koloru obrysu 2 | Określa pozycję drugiego koloru w gradiencie obrysu. | |
Kolor 3 obrysu | Określa trzeci kolor w gradiencie obrysu. | |
Pozycja koloru obrysu 3 | Określa pozycję trzeciego koloru w gradiencie obrysu. | |
Grubość obrysu | Określa grubość obrysu. |
Maska tekstury
Parametry do zmiany wyglądu maski tekstury.
Parametr | Opis | GIF |
Pokaż podgląd maski | Określa nieprzezroczystość podglądu maski. Wartość 0 oznacza, że podgląd jest niewidoczny, a wartość 1 oznacza, że maska jest całkowicie widoczna. Ten parametr jest widoczny tylko wtedy, gdy opcje MaskWidth i MaskHeight mają wartości większe niż 0.0. | |
Pozycja X maski | Ustaw pozycję maski wzdłuż osi X. | |
Pozycja Y maski | Ustaw pozycję maski wzdłuż osi Y. | |
Maks. wysokość | Określa wysokość maski. | |
Szerokość maski | Określa szerokość maski. |
Spadzisty
Parametry określające stopień pochylenia tła i obrysu maski.
Parametr | Opis | GIF |
Spadzisty X | Pochyla tło i obrys maski wzdłuż osi X. | |
Spadzisty Y | Pochyla tło i obrys maski wzdłuż osi Y. |