Twórz dynamiczne UI, wykorzystując zmieniające się materiały aktualizowane zgodnie ze zdarzeniami w grze i danymi. Aby UI był dynamiczny, musisz użyć kombinacji materiałów UI, powiązań widoku i trzech funkcji konwersji Ustaw parametr materiału (Ustaw teksturę, Skalar i Parametr wektorowy).
W Unreal Editor dla Fortnite (UEFN) otrzymujesz podstawowy materiał z szeregiem parametrów. Możesz wykorzystać urządzenie Postępometru, aby śledzić likwidacje w widżecie w stylu paska postępu będącym przykładem materiału aktualizowanego dynamicznie w zależności od postępu likwidacji wrogów.
Tworzenie instancji materiału
Aby dowiedzieć się więcej na temat instancji materiału, patrz: Tworzenie i używanie instancji materiału w dokumentacji Unreal Engine.
Wszystkie zasoby użyte do utworzenia tych instancji materiałów można znaleźć natywnie w UEFN. Aby się dowiedzieć, jak wykonać materiał w tym przykładzie, patrz: Materiał wskaźnika w sekcji samouczków Materiał.
Utwórz instancję materiału M_Tracker, nadając instancji materiału nazwę MI_TrackerExample.
W nowej instancji materiału zmień IconScaleX i IconScaleY zgodnie z własnymi preferencjami. Dla każdego materiału w tym przykładzie ustawiono wartość 0.7.
Możesz dostosować wartość parametru ProgressColor dla likwidacji, który będzie określał kolor wypełnienia widżetu w miarę postępów. Opcje TrackerProgress, Ikona i IconColor pozostaw niezaznaczone. Będą one używane później z urządzeniem Postępometru.
Ikony znajdują się w folderze Fortnite w obszarze Tekstury > Ikony.
Konfiguracja widżetu Postępometru
Utworzysz niestandardowy widżet Postępometru w UMG, do którego będzie można tworzyć odwołania w urządzeniu Postępometru i który posłuży do śledzenia liczby likwidacji zaliczonych przez graczy w niestandardowym UI likwidacji.
Kliknij prawym przyciskiem myszy w przeglądarce zawartości i wybierz Interfejs użytkownika > Blueprint widżetów > Widżet użytkownika.
Utwórz prosty widżet Postępometru, który będzie wyświetlał materiał Postępometru oraz tytuł Postępometru, jak w poniższym przykładzie.
Przeciągnij element Nakładka do grafu widżetu. Spowoduje to warstwowe ułożenie wszystkich elementów składających się na widżet. Pozwala również określić, w którym miejscu ekranu pojawia się ten widżet.
Ustaw pozycję Pole stosu tak, aby była zagnieżdżona wewnątrz pozycji Nakładka, aby móc rozłożyć materiał P i tytuł od lewej do prawej.
Ustaw pozycję Nakładka tak, aby była zagnieżdżona wewnątrz pozycji Pole stosu, co pozwoli utworzyć materiał Postępometru i nałożyć pole stosu na proste ciemne tło.
Wewnątrz elementu Nakładka dokonaj zagnieżdżenia dwóch widżetów Obraz. Naciśnij F2, aby zmienić ich nazwy na TrackerBackground i TrackerMaterial.
Wybierz TrackMaterial, aby otworzyć jego opcje w panelu szczegółów. W panelu szczegółów wybierz kolejno Pędzel > Obraz i wyszukaj utworzony MI_TrackerExample.
Ustaw dla opcji Rozmiar obrazu poniżej wartości X=96.0, Y=96.0. Obraz powinien być na tyle duży, aby był widoczny w grze.
Po skonfigurowaniu materiału Postępometru musisz utworzyć tło dla materiału tak, aby materiał ścieżki był bardziej czytelny.
Wybierz TrackerBacking i w sekcji Hierarchia, a następnie w panelu szczegółów wybierz Pędzel > Rysuj jako > Zaokrąglone pole.
Dla lepszej czytelności ustaw w powyższej opcji Odcień kolor neutralny. W tym przykładzie odcień został ustawiony na 3A3A3AFF w polu Szesnastkowy sRGB.
Dla opcji Wyrównanie poziome i Wyrównanie pionowe wybierz ustawienie Wypełnienie. Dzięki temu TrackerBacking wypełni kontener, który zawiera TrackerMaterial.
Teraz masz tło dla TrackerMaterial, które będzie wyglądało czytelnie w każdej scenie w grze!
Konfiguracja tekstu Postępometru
Po odwołaniu do materiału Postępometru w widżecie Postępometru skonfiguruj tekst, który będzie informował gracza o tym, co właściwie śledzi UI.
Dokonaj zagnieżdżenia bloku tekstowego w polu stosu zawierającym nakładkę. Zmień nazwę bloku tekstowego na TrackerTitle.
Wybierz TrackerTitle w sekcji Hierarchia, w panelu szczegółów ustaw opcję Wyrównanie pionowe na Wyrównaj do środka w pionie. Dzięki temu tekst zawsze będzie wyśrodkowany względem materiału TrackerMaterial.
Wprowadź zmiany stylistyczne w czcionce, zmniejszając jej rozmiar, dodając kontur lub zmieniając krój czcionki, aby dopasować ją do motywu.
W tym przykładzie wprowadzono następujące zmiany: Rozmiar czcionki = 24 Krój pisma = Pogrubiony Kontur = Ciemnoczerwony
Wszystkie ustawienia związane z czcionką możesz dostosować w kategorii Wygląd.
Po ukończeniu wszystkich ostatecznych zmian w projekcie konfiguracja elementów TrackerMaterial i TrackerTitle jest gotowa.
Aby zwiększyć odstęp wewnętrzny między oboma elementami, dodaj odstęp z prawej strony do nakładki zawierającej TrackerMaterial:
Wybierz nakładkę.
W panelu szczegółów rozwiń Odstęp wewnętrzny.
Zmień Odstęp wewnętrzny z prawej na 16 pikseli.
Między obrazem a tekstem zostanie dodany odstęp.
Jeśli chcesz w prosty sposób modyfikować odstępy między wieloma obiektami, możesz wstawić widżet Obraz do pola stosu zawierającego te obiekty, ustawić dla opcji Rozmiar obrazu X tyle miejsca, ile chcesz, po czym dla opcji Rysuj jako wybrać wariant Brak. Obraz nie będzie wyświetlany, ale będzie zajmował miejsce w polu stosu!
Ułatwia to zarządzanie odstępami między obiektami, bez konieczności ustawiania odstępów wewnętrznych w każdym widżecie.
Konfiguracja ustawionych parametrów materiału
Następnie powiążesz wartości urządzenia Postępometru z parametrami materiału w widżecie Postępometru.
Dodawanie modelu widoku
Dodaj model widoku Postępometru do widżetu, wybierając opcję Okno > Model widoku z menu głównego.
W oknie Model widoku wybierz +Model widoku.
W wyskakującym oknie wybierz Model widoku urządzenia – Postępometr.
Z paska menu wybierz Okno > Powiązania widoku, aby otworzyć panel Powiązania widoku.
Teraz możesz przystąpić do powiązania danych z Postępometru w celu manipulowania widżetem.
Ustawianie parametru skalarnego
Parametr skalarny przyjmuje wartość w postaci liczby całkowitej (int) lub wartości zmiennopozycyjnej (float). Przykładowo pasek postępu wypełnia się materiałem TrackerMaterial w zależności od tego, ile likwidacji odnotował Postępometr.
Materiał jest skonfigurowany tak, aby konwertować liczbę likwidacji z urządzenia Postępometru na wypełnienie TrackerMaterial. Wystarczy, że powiążesz te dane z parametrem materiału Postęp w MI_TrackerExample.
Postęp 3.0 w porównaniu z 8.0 w MI_TrackerExample. To bardzo przydatne!
Wybierz widżet TrackerMaterial, a następnie kliknij +Dodaj widżet w oknie Powiązania widoku.
W polu z lewej strony wybierz TrackerMaterial > Pędzel.
W polu z prawej strony (zawierającym dane, które chcesz powiązać z pędzlem materiału TrackerMaterial) wybierz Funkcje konwersji > Ustaw parametr skalarny.
Spowoduje to uruchomienie funkcji o nazwie Ustaw parametr skalarny przy ustawieniu Pędzel. Pędzel ma obecnie MI_TrackerExample, dlatego będzie szukał wskazanego parametru skalarnego i przekaże do niego wartość.
Wpisz TrackerProgress w polu Nazwa parametru, aby materiał był wypełniany zgodnie z postępem na Postępometrze.
Ważne, aby nie popełnić błędów w parametrze, ponieważ nie będzie on w stanie znaleźć właściwego parametru w materiale. Jeśli nie pamiętasz, jak nazywa się parametr, otwórz Instancję materiału i poszukaj parametrów po prawej stronie.
Wybierz ikonę łącza obok pozycji Wartość, a następnie wybierz MVVM_UEFN_Tracker > Kolor z menu rozwijanego. Spowoduje to powiązanie bieżącego postępu Postępometru.
Teraz twoje bieżące postępy na Postępometrze będą podawane bezpośrednio do materiału! Materiał postępometru będzie się powoli zapełniał, gdy gracz przypisany do Postępometru zaliczy likwidację!
Ustawianie parametru wektora
Parametr wektora przyjmuje wartość Vector4. Wektorów używa się zwykle do obsługi kolorów – RGBA (cztery wektory). Użyjesz Vector4 do zmiany koloru ikony w zależności od tego, co zostało skonfigurowane w urządzeniu.
Aby dowiedzieć się więcej na temat wektorów, patrz: Wyrażenia materiału wektora w dokumentacji Unreal Engine.
Wybierz TrackerMaterial w sekcji Hierarchia, a następnie otwórz okno Powiązania widoku i wybierz +Dodaj widżet.
Wybierz właściwości TrackerMaterial > Pędzel w pustym polu po lewej stronie.
Wybierz Funkcje konwersji > Ustaw parametr wektora w pustym polu po prawej stronie.
Jak wyjaśniono powyżej, to powiązanie pobiera Pędzel z TrackerMaterial (w tym przypadku MI_TrackerExample) i ustawia Parametr wektora, który zdefiniujesz dla danej instancji materiału. Kolor ikony można dostosować do opcji ustawionych przez urządzenie Postępometru.
Wpisz IconColor w polu Nazwa parametru.
Wybierz ikonę łącza obok pozycji Wartość, a następnie wybierz MVVM_UEFN_Tracker > Kolor. Spowoduje to ustawienie w pozycji Wartość właściwości Kolor ikony z modelu widoku Postępometru.
Kolor ikony ustawiony w urządzeniu Postępometru jest przekazywany do materiału. Jeśli chcesz uzyskać pomarańczową ikonę, wystarczy, że ustawisz kolor w urządzeniu, a ono nada ikonie kolor za ciebie! Materiał użyty w tym przykładzie jest już odpowiednio skonfigurowany.
Ustaw parametr tekstury
Parametr tekstury przyjmuje wartość Texture2D. Tekstury są zwykle używane do obrazów lub ikon, więc użyjemy ich do zmiany naszej ikony w oparciu o ustawienia skonfigurowane w urządzeniu!
Aby dowiedzieć się więcej na temat tekstur, patrz: Tekstury w dokumentacji Unreal Engine.
Wybierz TrackerMaterial w sekcji Hierarchia, a następnie otwórz okno Powiązania widoku i wybierz +Dodaj widżet.
W pustym polu z lewej strony wybierz kolejno MVVM_UEFN_Tracker > Pędzel.
W pustym polu po prawej stronie wybierz Funkcje konwersji > Ustaw parametr tekstury.
Wpisz Ikona w polu Nazwa parametru.
Uważaj na błędy podczas wpisywania nazwy parametru! Jeśli zapomnisz nazwę parametru, możesz zajrzeć do MI_TrackerExample, aby wyświetlić listę parametrów do ustawienia.
Wybierz ikonę łącza obok pola Wartość, a następnie wybierz MVVM_UEFN_Tracker > Ikona z menu rozwijanego. Spowoduje to powiązanie wartości z właściwością Ikona z modelu widoku Postępometru.
Parametr tekstury został ustawiony. Teraz ikona ustawiona w urządzeniu Postępometru będzie przekazywać ją do widżetu!
Powiązanie tekstu Postępometru z jego nazwą
Następnie powiążesz utworzony tytuł Postępometru z tym samym ustawieniem w urządzeniu Postępometru.
Wybierz TrackerTitle w sekcji Hierarchia, a następnie otwórz okno Powiązania widoku i wybierz +Dodaj widżet.
W pustym polu po lewej stronie wybierz TrackerTitle > Tekst z menu rozwijanego.
W pustym polu po prawej stronie wybierz MVVM_UEFN_Tracker > Nazwa z menu rozwijanego.
To powiązanie przekazuje tytuł twojego Postępometru do bloku tekstowego.
Konfiguracja urządzenia Postępometru
Następnie odwołasz się do widżetu utworzonego w UMG w urządzeniu Postępometru. Spowoduje to wyświetlenie UI likwidacji na wyświetlaczu HUD.
Dodaj urządzenie Postępometru do swojego projektu.
Nadaj mu nazwę w pozycji Tytuł Postępometru. Ta nazwa będzie wyświetlana w tekście TrackerTitle w widżecie.
Dodaj widżet do pola Widżet HUD.
Zmień pola ikony zadania na dowolną ikonę, która ma być wyświetlana na Postępometrze. Spowoduje to zastąpienie domyślnej ikony obcego w MI_TrackerExample.
Wybierz kolor w opcji Kolor ikony. Ikona ustawiona powyżej przyjmuje wybrany kolor.
Kontynuuj konfigurację pozostałych ustawień tak, aby dodać Postępometr do odtwarzacza.
Efekt końcowy
Gotowe! W lewym górnym rogu pojawi się niestandardowy widżet Postępometru. Niezależnie od tego, czy likwidujesz zombie, czy innych graczy, widżet powoli się zapełnia! W ten sposób łączysz dane rozgrywki z własnymi niestandardowymi widżetami za pomocą opcji Ustaw parametry materiału.
