Unreal Motion Graphics (UMG) to potężne narzędzie do tworzenia interfejsów użytkownika (UI). Niezależnie od tego, czy tworzysz proste wyskakujące okno, czy złożone systemy UI, zrozumienie podstawowych koncepcji pracy w UMG zapewni ci swobodę eksperymentowania z tym rozbudowanym narzędziem.
Aby doprowadzić swoje projekty UI z fazy koncepcyjnej do testu gry, musisz zrozumieć, w jaki sposób UMG tworzy UI. Aby ułatwić ci zapoznanie się z przepływami pracy przy tworzeniu UI, strona ta została podzielona na następujące sekcje:
Projektowanie systemów UI
Zaplanowanie projektu UI ma kluczowe znaczenie dla stworzenia atrakcyjnych wizualnie i użytecznych systemów UI. Przemyśl następujące kwestie:
Rodzaj tworzonej gry.
Rodzaj UI, który po pierwsze będzie wspierać graczy, a po drugie będzie uatrakcyjniać rozgrywkę i będzie zrozumiały.
Końcowy efekt wizualny UI.
Na przykład na wyświetlaczu HUD Fortnite w różnych miejscach na ekranie rozmieszczone są wszystkie informacje na temat gry, jakich potrzebuje gracz, w tym informacje o poziomie zdrowia i osłon, a nawet ogólne statystyki gry.
Naszkicuj swoje pomysły na UI. Wykorzystaj te szkice jako punkt wyjścia do tworzenia UI w UMG.
Podstawowe podejścia do projektowania elementów sieciowych mogą ułatwić zaplanowanie układu UI przed przystąpieniem do tworzenia widżetów użytkownika. Podejścia te pomogą zdecydować, które części UI muszą być sztywne, a które elastyczne. Przy projektowaniu układu UI zastosuj poniższe podejścia:
Układ bezwzględny
Układy bezwzględne zwykle wykorzystują precyzyjne obliczenia i współrzędne w celu określenia miejsca rozmieszczenia elementów na ekranie. Sprawdzają się, gdy element UI musi pozostać na miejscu wyznaczonym za pomocą współrzędnych X i Y. Element UI powinien uwzględniać, gdzie na ekranie umieszczony jest element nadrzędny, a element nadrzędny zaczyna się w lewym górnym rogu układu.
Taki styl układu jest mniej elastyczny i trudny do zachowania na ekranach o różnym rozmiarze.
Projektowanie układów bezwzględnych najlepiej sprawdza się w przypadku małych elementów, które są częścią większego projektu. Możesz na przykład zastosować położenie bezwzględne ikony. W UEFN można to skonfigurować za pomocą ustawień Wyrównanie i Odstęp wewnętrzny widżetu Obraz.
Ikona pozostaje w tym samym miejscu niezależnie od rozmieszczenia i rozmiaru otaczających ją innych elementów UI.
Układ względny
Ten typ układu najlepiej sprawdza się w przypadku gier, w które można grać na wielu platformach, ponieważ pozwala dostosować UI zarówno do dużego ekranu telewizyjnego, jak i małego ekranu telefonu komórkowego.
Odstępy wewnętrzne i odstępy między elementami
Do dostosowania małych odstępów między elementami całości można używać odstępów wewnętrznych. Zarządzanie odstępami wewnętrznymi w poszczególnych widżetach w UMG może być trudne. Zamiast tego, warto skorzystać z narzędzi Wyrównanie do konfiguracji obrazów i bloków tekstowych. Wyrównanie zapewnia większą kontrolę nad odstępem i położeniem niż odstęp wewnętrzny.
Oznacza to, że jeśli po umieszczeniu wszystkich elementów na miejscu potrzebny będzie między nimi jakiś odstęp, dostosowanie ustawień odstępu wewnętrznego poszczególnych widżetów pozwoli taki odstęp uzyskać.
Aby wymusić większe odstępy między widżetami, użyj pustego widżetu obrazu lub slotu między widżetami kontenera a widżetami użytkownika. Poniżej widać, że widżet Obraz został użyty do wymuszenia odstępu między poszczególnymi widżetami użytkownika, dzięki czemu wokół każdego widżetu jest dość miejsca, aby zawarte w nim dane były dobrze czytelne.
Omówienie widżetów UMG
UI powinno się projektować w poszczególnych sekcjach w UMG. UI tworzysz poprzez tworzenie poszczególnych widżetów użytkownika i porządkowanie ich warstwami. Gdy wszystkie elementy UI będą gotowe, poszczególne sekcje umieszczasz pod jednym nadrzędnym widżetem użytkownika. Tworzenie UI warstwami zapewnia większą kontrolę nad projektem i układem całego UI.
Aby zaplanować i utworzyć poszczególne widżety użytkownika, najpierw musisz zapoznać się z widżetami dostępnymi w panelu Paleta. Dostępne są dwa główne typy widżetów: kontenery i elementy.
Kontenery
Kontener przechowuje wiele widżetów użytkownika, elementów i innych kontenerów składających się na UI. Elementem może być obraz, materiał, tekst itp. Rozmiar widżetu kontenera jest zależny od rozmiaru największego elementu podrzędnego.
| Widżet kontenera | Cel | Ilustracja |
|---|---|---|
Siatka | Rozkłada elementy według wzoru siatki elastycznej. Dodaje opcje do elementów podrzędnych:
|  |
Siatka jednolita | Rozmieszcza elementy podrzędne w wierszach i kolumnach z zachowaniem równych odstępów. Dodaje opcje do elementów podrzędnych:
|  |
Nakładka | Układa elementy i inne widżety kontenera warstwowo, jeden na drugim. Kontenery Nakładka nie dodają dodatkowych opcji ani ustawień do swoich elementów podrzędnych. |  |
Pola stosu | Rozmieszcza elementy poziomo lub pionowo (od lewej do prawej, z góry na dół). Ten widżet kontenera sam w sobie nie radzi sobie dobrze z rozmieszczaniem elementów w odstępach. Aby uzyskać odstęp w polu stosu, użyj innego widżetu kontenera lub elementu. |  |
Pole rozmiaru | Wprowadza parametry, które ograniczają rozmiar zawartych w nim elementów podrzędnych. Kontenery pola stosu nie dodają dodatkowych opcji ani ustawień do swoich elementów podrzędnych. |  |
Pole skali | Określa sposób skalowania UI względem rozmiaru ekranu. |  |
Pole przewijania | Tworzy pole z możliwością przewijania zawierające kolekcję elementów. Kontenery pola przewijania nie dodają dodatkowych opcji ani ustawień do swoich elementów podrzędnych. |  |
Przełącznik widżetów | Umożliwia przechodzenie między widżetami za pomocą klawisza "Tab". W tym widżecie kontenera w przełączniku widoczny jest zawsze jeden widżet jednocześnie. Kontenery przełącznika widżetów nie dodają dodatkowych opcji ani ustawień do swoich elementów podrzędnych. |  |
Kanwa | Powoduje zakotwiczenie elementów w zdefiniowanym miejscu. Najlepiej używać go pod koniec procesu projektowania w charakterze kontenera nadrzędnego. Dodaje następujące opcje do swoich elementów podrzędnych:
|  |
Widżety elementów
Wszystkie widżety mają właściwości Wygląd, po których następują ustawienia specyficzne dla wybranego widżetu w panelu Szczegóły.
Rozmiar elementów podrzędnych można ustawić w panelu Szczegóły, a właściwości dziedziczyć z widżetu kontenera nadrzędnego.
| Widżet elementu | Cel | Grafiki |
|---|---|---|
Widżet akcji | Umożliwia pobieranie danych wejściowych z powiązania klawisza dla określonej akcji przy użyciu Verse. Sam w sobie widżet ma funkcję czysto kosmetyczną. |  |
Obraz | Umożliwia dodawanie tekstur (mogą to być zaimportowane obrazy lub tekstury dostępne natywnie w UEFN) oraz materiałów do tła lub pierwszego planu widżetu użytkownika. |  |
Blok tekstowy | Dodaje tekst do widżetu użytkownika. Możesz ustawić rozmiar, czcionkę, odstępy itp. |  |
Cichy przycisk | Prostokątny przycisk z przezroczystym tłem. |  |
Zwykły przycisk | Prostokątny przycisk z nieprzezroczystym tłem. |  |
Głośny przycisk | Prostokątny przycisk z żółtym tłem. |  |
Suwak | Suwak wartości, który zwiększa lub zmniejsza wartość w określonym zakresie. |  |
Aby dowiedzieć się więcej na temat widżetów w Verse, patrz: Typy widżetów.
Tworzenie i układanie w warstwy widżetów użytkownika
Widżety użytkownika to pliki UI, które zawierają całą projektowaną zawartość. Tworząc widżet użytkownika, staraj się maksymalnie fragmentaryzować projekt. Oznacza to korzystanie tylko z elementów potrzebnych w widżecie użytkownika do uzyskania pożądanego efektu wizualnego swojego elementu UI.
Na poniższej ilustracji utworzono cztery widżety użytkownika dla każdego komponentu paska gromadzonych przedmiotów. Każdy widżet użytkownika śledzi poszczególne statystyki różnych komponentów, zapewniając przy tym spójność projektu UI.
Zaprojektowanie oddzielnych widżetów użytkownika oznacza, że można je umieszczać warstwami wewnątrz nadrzędnego widżetu użytkownika, aby uzyskać bardziej spójny i kontrolowany wygląd paska gromadzenia zasobów. Ponadto urządzenie Postępometru może łatwiej śledzić statystyki poszczególnych komponentów paska gromadzenia zasobów.
Kliknij obraz, aby go powiększyć.
Projektowanie UI w ten sposób wymaga praktyki. Zapoznaj się z samouczkami Tworzenie niestandardowego interfejsu HUD i samouczkami Wojownicze Żółwie Ninja, aby poćwiczyć tworzenie poszczególnych widżetów użytkownika w celu stworzenia niestandardowej szaty graficznej dla gry.
Edytowanie układu
Możliwość wykorzystania poszczególnych widżetów użytkownika do tworzenia UI znacznie ułatwia edycję UI. Umożliwia edycję danego elementu bez wpływu na inne części projektu UI.
Zwróć uwagę, że w projekcie paska gromadzenia zasobów powyżej wszystkie etykiety elementów poza jednym są wyśrodkowane. W tym przypadku deweloper po prostu otwiera widżet użytkownika danego elementu i edytuje etykietę, nie powodując problemów we wszystkich innych elementach paska gromadzenia zasobów.
Jeśli projektujesz coś bardziej złożonego, na przykład system ekwipunku, może się okazać, że używasz niepotrzebnych widżetów kontenera lub masz problem z zapewnieniem zgodności widżetów elementów z projektem. UMG ma opcje, które ułatwiają edytowanie układu:
Zamień przy użyciu…
Zawijaj z…
Zastępowanie widżetów
Zastąp niepotrzebne widżety w panelu Hierarchia, nie psując układu. Kliknij prawym przyciskiem myszy niepotrzebny widżet, wybierz Zamień przy użyciu… i wybierz inny widżet, którym chcesz zamienić niepotrzebny widżet. Widżety zastępcze są zawsze widżetami typu kontener.
Opcje widżetów podrzędnych zmieniają się w zależności od użytego nowego kontenera nadrzędnego.
Zawijanie widżetów
Jednym ze sposobów na zmodyfikowanie układu bez wpływania na wszystkie widżety podrzędne jest użycie ustawienia Zawijaj z... w panelu Hierarchia. Kliknij prawym przyciskiem myszy widżet podrzędny i wybierz Zawijaj z…, a następnie wybierz kontener z menu rozwijanego, aby wykorzystać jego właściwości i zachować przy tym ustawienia widżetów podrzędnych.
Test gry
Gdy projekt będzie ukończony, przeprowadź test gry. Zwróć uwagę na następujące kwestie:
UI ma pełnić określone zadanie. Nie twórz UI dla samego wstawienia UI. UI ma być przydatnym elementem.
UI powinien być pomocny i przyjazny dla użytkownika, a podczas rozgrywki gracze nie powinni być zmuszani do zgadywania, do czego służą jego elementy.
UI powinien płynnie wtapiać się w środowisko gry i uzupełniać rozgrywkę.
Elementy UI nie mogą blokować rozgrywki.