Utwórz niestandardowy UI z materiałem bazowym M_UI_Shape_Rectangle, tworząc instancje materiału z materiału bazowego i używając ich w widżetach UMG. Kształt materiału umożliwia też tworzenie płaskich kształtów, które można wykorzystać do tworzenia niepowtarzalnych projektów UI. Materiał prostokąta M_UI_Shape_Rectangle znajduje się w Przeglądarce zawartości w folderze Fortnite w sekcji UI > Materiały.
Instancje materiału mogą służyć do wypełniania widżetów, podobnie jak farba. Do widżetów lepiej jest dodawać tekstury materiałowe, ponieważ materiały zużywają mniej pamięci niż importowane tekstury. Materiał jest również lepszym sposobem projektowania UI w UEFN i UE, szczególnie w przypadku projektu płaskiego UI, ponieważ łatwiej się go renderuje, a poza tym przy wykorzystaniu materiałów dynamicznych i 3D można uzyskać znakomite efekty.
Do widżetów UMG istnieją odwołania w specjalnych ustawieniach UI w niektórych urządzeniach w Unreal Editor for Fortnite (UEFN). Widżety UMG zastępują domyślny UI Fortnite w wyświetlaczu przeziernym (HUD).
Więcej samouczków na temat korzystania z materiałów do tworzenia UI można znaleźć w poniższych artykułach:
Tworzenie niestandardowych kształtów UI
Zanim utworzysz niestandardowy kształt UI, zdecyduj, jak ma wyglądać UI, a następnie użyj materiału prostokąta M_UI_Shape_Rectangle, aby zaprojektować wygląd widżetu UI. Może to być coś prostego, jak spersonalizowany kwadrat, lub coś bardziej złożonego, jak kształt kwiatu. Projekty mogą wymagać wielu kształtów, które można umieścić razem podczas tworzenia widżetu.
Aby utworzyć kształty, musisz najpierw utworzyć instancję materiału oryginalnego materiału M_UI_Shape_Rectangle.
Kliknij prawym przyciskiem myszy miniaturę materiału i wybierz opcję Utwórz instancję materiału.
W oknie Zapisz zasób jako nadaj nazwę instancji materiału, która zostanie zapisana w folderze zawartości projektu. Zasobom nadaj nazwy w taki sposób, aby je razem grupować. Np. materiały dostarczane domyślnie w UEFN rozpoczynają się od „M_UGC_” i kończą „_Inst”. Twoja nazwa instancji materiału powinna wyglądać np. tak: M_UGC_Cyrk_Inst.
Kliknij dwukrotnie nową instancję materiału, aby otworzyć Edytor instancji materiału. Możesz też uzyskać dostęp do edytora, klikając zasób PPM i wybierając Edytuj.
Panel Szczegóły edytora instancji materiału zawiera narzędzia, których potrzebujesz, aby w pełni spersonalizować instancje materiału. Narzędzia są umieszczone w następujących sekcjach:
[1] Wypełnienie
[2] Pociągnięcie
[3] Kolory
[4] Stan (Po najechaniu/Z fokusem/Naciśnięte/Wyłączone)
Uzupełnij
Opcje w sekcji Wypełnienie mają wpływ na kształt materiału. W przypadku wielu opcji, takich jak Przezroczystość wypełnienia, wartość 0.0 wyłączy ustawienie, a wartość 1.0 je aktywuje. Zawsze pamiętaj, aby aktywować opcję Przezroczystość wypełnienia, aby kształt był widoczny w Oknie wizualizacji.
Na powyższym obrazie widać dostosowane ustawienia użyte, aby utworzyć kształt.
Wiosło
Opcje w sekcji Pociągnięcie można dostosować, aby utworzyć możliwe do personalizacji obramowanie. Dzięki wstępnie ustawionemu niebieskiemu kolorowi obramowania widzisz swój projekt w miarę dostosowywania wartości opcji Pociągnięcia.
Na ilustracji powyżej widać opcję Przezroczystość pociągnięcia ustawioną na 1.0, aby wyświetlać niebieskie obramowanie.
Kolory
Opcje na karcie Kolor można zmieniać, aby jeszcze bardziej spersonalizować tworzone kształty. Te opcje można dostosować dopiero po ustawieniu opcji na "Wł." poprzez kliknięcie odpowiedniego pola z wartością logiczną.
Możesz nawet tworzyć gradienty dla kształtów i obramowań. W oknie wizualizacji możesz wyświetlać podgląd gradientów w trakcie ich modyfikacji.
Na powyższej ilustracji kolory są zastosowane w gradientach. Tę opcję aktywuje się, ustawiając opcję Gradient wł./wył. powyżej 0.0.
Stan
Ta opcja znajduje się w sekcji Kolor, można ją modyfikować, aby ustawiać kolory kształtu w różnych stanach. Możesz ustawiać niestandardowe kolory dla różnych akcji gracza, takich jak najechanie kursorem, umieszczenie fokusu, naciśnięcie lub wyłączenie kształtu UI.
Jeśli nie ustawisz materiału na opcję Materiał fizyczny, twój kształt będzie miał przezroczyste obramowanie po zaimportowaniu do tworzonego widżetu. Aby tego uniknąć, ustaw materiał fizyczny jako Drewno, aby się renderował jak rzeczywisty materiał.
Pamiętaj, aby po spersonalizowaniu kształtu UI zapisać pracę, klikając ikonę dyskietki w prawym górnym rogu. Spersonalizowana instancja materiału zostanie zapisana w folderze z zawartością projektu.
W przykładzie w samouczku używa się kształtów, które łączą się, aby utworzyć słonecznik z tłem przycisku.
Tworzenie widżetów UI
Teraz musisz utworzyć widżety, z którymi gracze będą mogli wchodzić w interakcję. Przeczytaj dokument Edytor widżetów UI, aby dowiedzieć się więcej o tworzeniu widżetów i organizowaniu karty Hierarchia.
W tym momencie masz utworzone instancje materiału dla każdego elementu swojego projektu.
Przykład w samouczku składa się z wielu instancji płatka kwiatu i tarczy kwiatu. Przycisk składa się z bazy i dwóch obrazów, wykorzystywanych jako ikony przycisku.
Te instancje materiału będą ułożone w blueprinty widżetów, aby utworzyć niestandardowy projekt. Blueprint widżetów to coś, co zostanie zaimportowane do urządzenia okna dialogowego, aby zastąpić domyślny UI dostarczany z programem.
Utwórz nowy blueprint widżetu, który będzie przechowywał instancje materiału i widżety przycisku, z których razem składa się twój niestandardowy UI. Będzie to blueprint widżetu dodawany do ustawień urządzenia.
W tym widżecie połączysz wszystkie niestandardowe instancje materiału, aby utworzyć własny projekt. W trakcie tworzenia widżetu UI przeciągaj zasoby z Zwykłe, Zwykły UI, Panel, UIKIT i Utworzone przez użytkownika pod nazwą widżetu.
Na powyższej ilustracji zasoby są zorganizowane na karcie Hierarchia i poprzestawiane w oknie wizualizacji tak, aby utworzyć kształt kwiatu dla niestandardowego UI.
Gdy skończysz tworzenie projektu, zapisz blueprint i przejdź z powrotem do Przeglądarki zawartości. Blueprint będzie teraz zaimportowany do urządzenia wyskakującego okna dialogowego, które wyświetli się w niestandardowym UI.
Dodawanie widżetów do urządzeń
Gdy projekt będzie gotowy, umieść urządzenie wyskakującego okna dialogowego, aby wyświetlać swój widżet.
Przeciągnij widżet do Szczegóły > Widżet modalny > Klasa zastąpienia szablonu.
Możesz obejrzeć i przetestować swoje dzieło w uruchomionej sesji.