Widżety użytkownika są projektowane w edytorze widżetów przy użyciu widżetów UMG.
Widżety użytkownika są jak mapy, ponieważ śledzą trasę między widżetem UMG a funkcjami urządzenia. Umiejętność czytania widżetów użytkownika pomoże ci zrozumieć strukturę UI. Z poziomu edytora widżetów możesz sprawdzić:
Układ i projekt UI.
Powiązania widżetu w powiązaniach widoku.
W szablonie funkcji otwórz folder Sterownik interfejsu i kliknij dwukrotnie widżet UW_HCD01, aby dowiedzieć się więcej o tym, jak ten widżet został utworzony i powiązany z urządzeniem sterownika interfejsu.
Układ widżetów
Układ widżetów to faza projektowania niestandardowego UI. W edytorze widżetów możesz używać widżetów UMG z panelu Paleta, aby stworzyć wygląd i zaplanować funkcjonalność UI. Kolejność używania widżetów UMG określa wygląd UI.
Aby dowiedzieć się więcej o działaniu widżetów UMG, zapoznaj się z sekcją Paleta w dokumencie Edytor widżetów.
Po otwarciu widżetu UW_HCD01 zajrzyj do panelu Hierarchia. Panel Hierarchia pokazuje, które widżety UMG były używane i w jakiej kolejności zostały dodane do okna wizualizacji.
Nazwy widżetów UMG można zmienić w panelu Hierarchia po ich dodaniu do okna wizualizacji.
Wszystkie projekty widżetów muszą mieć widżet główny, który działa jako ekran. Elementem głównym projektu jest widżet Nakładka o nazwie Główny, który pełni funkcję ekranu. Okno wizualizacji jest ustawione na opcję Wypełnij ekran, co powoduje, że projekt wypełnia wyznaczony obszar widżetu głównego.
Panel siatki służy do przechowywania projektów pasków zdrowia i osłony. Panele siatki to elastyczne siatki, które organizują widżety podrzędne w wierszach i kolumnach.
Wiersze i kolumny można dalej dostosowywać, ponieważ Panel siatki dodaje do widżetów podrzędnych opcje, które regulują liczbę wierszy i kolumn, przestrzeń zajętą przez wiersze i kolumny, warstwę, jaką widżet zajmuje w projekcie, a także specjalną opcję ruchu o nazwie Przesunięcie.
Przesunięcie umożliwia przesuwanie widżetu podrzędnego wzdłuż osi X i Y bez zajmowania miejsca. Oznacza to, że przesuwana jest tylko zawartość wewnątrz kontenera, ale kontener zachowuje swoją pozycję i miejsce w układzie.
Widżet Nakładka o nazwie ShieldBarContainer jest pierwszym widżetem podrzędnym Panelu siatki. Ten widżet znajduje się w wierszu 1, kolumnie 0 i jest wyświetlany w rozstawie wierszy 1 i rozstawie kolumn 0. Widżety ShieldBarContainer są wyświetlane na warstwie Layer1.
Oznacza to, że wszystkie widżety podrzędne ShieldContainer pojawiają się z przodu projektu, ponieważ znajdują się na warstwie 1, ale znajdują się po prawej stronie widżetów znajdujących się za nim, ponieważ znajdują się w rzędzie 1. Pasek osłony obejmuje 2 rzędy (0 i 1), co określa długość paska osłony.
Przy użyciu opcji Przesuń > Y możesz przenieść widżet ShieldBarContainer o -25.0 jednostek Slate w dół z jego domyślnej pozycji, tak aby nieznacznie zakrywał znajdujący się za nim kontener zdrowia.
Widżet Nakładka o nazwie HealthBarContainer jest drugim widżetem podrzędnym Panelu siatki. Ten widżet znajduje się w wierszu 1, kolumnie 0 i jest wyświetlany w rozstawie wierszy 1 i rozstawie kolumn 0. Widżety HealthBarContainer są wyświetlane na warstwie Layer0.
Oznacza to, że wszystkie widżety podrzędne HealthBarContainer pojawiają się z tyłu projektu, ponieważ znajdują się na warstwie 0. Pasek zdrowia znajduje się w rzędzie 0, dlatego jest wyświetlany z lewej strony paska osłony. HealthBarContainer obejmuje również wiersze 0 i 1, które określają długość paska zdrowia.
Poniżej znajduje się zestawienie widżetów UMG, z których składają się paski osłony i zdrowia, oraz ich przeznaczenie w całym projekcie.
ShieldBarContainer
W ShieldBarContainer znajdują się wszystkie widżety UMG, które składają się na projekt paska osłony. Pasek osłony składa się z następujących elementów:
| Widżet UMG | Nazwa widżetu | Cel |
|---|---|---|
Obraz | ShieldBar_backing | Służy jako kontener do ominięcia całego projektu paska osłony. Jest to instancja materiału o nazwie MI_HCD01_Backplate. |
Pole stosu | ShieldContent | Organizuje swoje widżety podrzędne (ikonę paska osłony i materiał paska osłony) od lewej do prawej wewnątrz materiału ShieldBar_Backing i ShieldBarContainer. |
Obraz | ShieldIcon | Materiał ikony osłony używany jako warstwa przednia. |
Nakładka | ShieldBarContainer | Służy do umieszczania widżetów podrzędnych na warstwie w drugiej kolumnie pola stosu ShieldContent. Te widżety tworzą materiał paska osłony. |
Obraz | ShieldBarStroke | Służy jako kontener do ominięcia paska osłony. Jest to instancja materiału o nazwie MI_HCD01_BarStroke. |
Obraz | ShieldBar | Materiał M_ProgressBar_Basic to dynamiczny dwukolorowy materiał, który wykorzystuje funkcję materiału do poruszania się w lewo i w prawo po pasku osłony, w zależności od informacji, jakie widżet otrzymuje z urządzenia sterownika interfejsu. |
HealthBarContainer
W HealthContainer znajdują się wszystkie widżety UMG, które składają się na projekt paska zdrowia. Pasek zdrowia składa się z następujących elementów:
| Widżet UMG | Nazwa widżetu | Cel |
|---|---|---|
Pole stosu | Zawartość zdrowia | Organizuje swoje widżety podrzędne (projekt ikony paska zdrowia i materiał paska zdrowia) od lewej do prawej wewnątrz HealthContainer. Pole stosu rozciąga się wokół widżetu Nakładka ShieldContainer i wyśrodkowuje pasek osłony w ogólnym projekcie UI. Dzieje się tak, ponieważ pole stosu HealthContent ma większy wymiar osi X niż pole stosu ShieldContent. |
Obraz | HPIcon | Materiał ikony zdrowia używany jako warstwa przednia. |
Nakładka | HPBarContainer | Służy do tworzenia warstw widżetów podrzędnych w drugiej kolumnie pola stosu HealthContent. Te widżety tworzą materiał paska zdrowia. |
Obraz | HPBarStroke | Służy jako kontener do ominięcia paska zdrowia. Jest to instancja materiału o nazwie MI_HCD01_BarStroke. |
Obraz | HPBar | Dynamiczny dwukolorowy materiał, który wykorzystuje funkcję materiału do poruszania się w lewo i w prawo po pasku zdrowia, w zależności od informacji, jakie widżet otrzymuje z urządzenia sterownika interfejsu. |
W następnym kroku dowiesz się, jak wybrać model widoku w celu zaktualizowania materiałów UI, aby pokazywały aktualny stan zdrowia i osłony gracza w grze.
Model widoku
Model widoku kontroluje informacje o graczu za pomocą listy funkcji. Funkcje te umożliwiają kontrolowanie informacji o graczu za pośrednictwem widżetu UMG i funkcjonalności urządzenia. Modele widoku zapewniają określony sposób powiązania widżetów UMG z urządzeniami trybu kreatywnego.
Modele widoku nasłuchują funkcji wykonywanych w urządzeniu przy użyciu widżetu użytkownika, który zastępuje domyślny interfejs użytkownika. Następnie model widoku wykorzystuje funkcje urządzenia, aby zaktualizować UI za pomocą powiązań widoku.
Np. modele widoku paska osłony i zdrowia nasłuchują funkcji osłony i zdrowia sterownika interfejsu. Gdy funkcja sterownika interfejsu jest wykonywana na osłonie i zdrowiu gracza, model widoku nasłuchuje tych funkcji i przekazuje informacje przez powiązania widoku, aby zaktualizować UI.
Do wyboru jest wiele różnych modeli widoku. Zwróć uwagę, że na poniższej liście modeli widoku znajdują się modele widoku dla konkretnych urządzeń. Zawierają one funkcje specyficzne dla danego urządzenia.
Poniższe modele widoku kontrolują więcej niż jedną część UI za pomocą funkcji urządzenia na listach funkcji.
Urządzenie – sterownik interfejsu – lista informacji o graczu z drużyny/oddziału jest używane z widżetem UW_HCD01. Wykorzystuje informacje o sterującym graczu, aby pozyskiwać twoje informacje ze sterownika interfejsu, ponieważ tym szablonem może grać jeden gracz – ty!
W tej próbce UI zdrowie i osłona są kontrolowane przez ten model widoku, nasłuchując funkcji kontrolera interfejsu.
W następnym kroku dowiesz się, jak powiązać materiały UI zdrowia i osłony z funkcjonalnością sterownika interfejsu w sekcji Powiązania widoku.
Powiązania widoku
Powiązania widoku mapują funkcjonalność widżetu UMG do funkcji powiązanego urządzenia i aktualizują UI w interfejsie. W widżecie UW_HCD01 materiały ShieldBar i HPBar są powiązane z funkcjami Osłona i Zdrowie sterownika interfejsu. Funkcje te monitorują osłony i zdrowie w grze oraz aktualizują materiał paska w zależności od posiadanej osłony i zdrowia.
Zapewnienie funkcjonalności UI osłony i zdrowia rozpoczyna się od wybrania widżetu UMG i powiązania właściwości widżetu z konkretną funkcją urządzenia. Powiązania należy utworzyć w panelu Powiązania widoku.
Dodawanie widżetu UMG
Widżety obrazu (ShieldBar i HPBar) wybiera się najpierw z panelu Hierarchia, a następnie z panelu Powiązania widoku. Możesz kliknąć przycisk +Dodaj widżet, aby otworzyć listę funkcji modelu widoku. Do widżetu dodawana jest funkcja, która kontroluje informacje o właściwościach widżetu. W tym przypadku jest to funkcja pędzla do sterowania materiałami ShieldBar i HPBar.
Dodawanie powiązania urządzenia
Po określeniu, który widżet należy powiązać, wybierany jest typ powiązania urządzenia. Obok pola widżetu znajduje się puste pole. Kliknięcie w pustym polu otwiera listę dostępnych powiązań urządzeń. Opcje powiązania urządzenia automatycznie pojawiają się pod polami widżetu i powiązania urządzenia. Opcje określają sposób aktualizacji widżetu na podstawie informacji otrzymywanych z urządzenia.
Widżet UW_HCD01 używa opcji Ustaw parametr skalarny w celu zaktualizowania właściwości pędzla.
Powiązania widoku
| Właściwość pędzla ShieldBar | Właściwość pędzla HealthBar |
|---|---|
 |  |
Panel Szczegóły
| Materiał ShieldBar | Materiał HealthBar |
|---|---|
 |  |
W widżecie UW_HCD01 widżety Obraz (ShieldBar i HPBar) mają dynamiczne materiały we właściwościach pędzla (w panelu Szczegóły).
Ustawianie parametrów urządzenia
Aby materiał odzwierciedlał bieżący stan osłony i zdrowia gracza, powiązania urządzeń mają parametry, które należy ustawić w celu wysyłania informacji o urządzeniu do widżetów UMG.
W tym przykładzie widżet Obraz i jego funkcja pędzla są automatycznie dodawane do parametru pędzla sterownika interfejsu. To powiązanie określa, która właściwość pędzla widżetu Obraz ma zostać zaktualizowana.
Następnie nazwa parametru określa, który parametr zaktualizować w materiale pędzla. W tym miejscu w polu wpisywany jest postęp.
Na koniec wartość powiązania jest określana przez model widoku. W polu Wartość powiązania ustawia się funkcje HUDPlayerInfoListViewmodel > Informacji o sterującym graczu > Osłona i Zdrowie.
Funkcjonalność sterownika interfejsu aktualizuje teraz właściwość pędzla w widżecie Obraz za pomocą funkcji konwersji parametru skalarnego. Wyszukuje właściwość Postęp i przekazuje do niej wartości zdrowia oraz osłony.
Postęp to wartość, która przesuwa pasek do przodu i do tyłu między wartościami Rozpoczęcie postępu i ProgressEnd. Oznacza to, że wartość postępu jest ograniczona między 0 a 1.
| Grupy parametrów materiału ShieldBar | Grupy parametrów materiału HealthBar |
|---|---|
 |  |
Jeśli rozpoczniesz grę z pełnym zdrowiem i osłoną, zadawanie obrażeń spowoduje, że pasek przesunie się w lewo w zależności od właściwości postępu i normalizacji postępu. Właściwości te określają, jak bardzo materiał przesunie się w lewo, gdy gracz odniesie obrażenia.
Materiał będzie przesuwał się po pasku w prawo, gdy zdrowie i osłony będą przywracane w takim samym tempie, w jakim się pogarszają po zastosowaniu właściwości postępu i normalizacji postępu.
Otwórz inne widżety użytkownika i sprawdź, czy możesz je odczytać i zrozumieć kolejność dodawania widżetów UMG do hierarchii, typ modelu widoku wybranego dla widżetu użytkownika oraz sposób, w jaki parametry widżetu UMG i funkcje urządzenia są powiązane w powiązaniach widoku.
Model widoku wyposażonego przedmiotu
Tego modelu widoku można używać z urządzeniem sterownika interfejsu do śledzenia statystyk wyposażonego przedmiotu przy użyciu slotu widżetu Zastąpienie widżetu informacji wyposażonego przedmiotu. Wszystkie próbki UI używają karabinu szturmowego WID_Assault_AutoHigh_Athena_C_Ore_T03 jako wyposażonego przedmiotu.
Otwórz folder Urządzenia > Sterownik interfejsu > Widżety i kliknij dwukrotnie widżet UW_HCD03_SelectedItem. Z poziomu tego modelu widoku można śledzić w UI szereg informacji i statystyk o broni:
Ikona przedmiotu
Nazwa przedmiotu
Ikona amunicji
Licznik amunicji
Nadwyżka amunicji
Jest bronią typu magazynek
