Render HUD za pomocą UMG

Unreal Motion Graphics (UMG) UI Designer służy do tworzenia elementów interfejsu użytkownika, takich jak ekrany i HUD w Unreal Engine 4. Aby pokazać podstawowe zastosowania UMG, stworzymy ekran tytułowy gry. W tym artykule ustawimy wygląd ekranu, aw następnym utworzymy akcje schematów potrzebne, aby to działało.


Wejdź do menu „ Plik-> Nowy projekt ”, aby utworzyć nowy projekt za pomocą szablonu „ Pojazd ”. Jeśli wolisz, możesz użyć jednego ze swoich projektów lub dowolnego innego szablonu. Poniższy obrazek przedstawia tworzenie nowego projektu.

Stwórzmy nowy poziom, który będzie odpowiedzialny za ekran tytułowy. Aby utworzyć poziom, wejdź do menu „ Plik-> Nowy poziom ” i wybierz „ Pusty poziom ”. Zapisz ten poziom pod nazwą „TitleScreen”, a następnie przenieś go do folderu „VehicleBP / Maps” projektu.
Ten nowy poziom powinien stać się domyślnym poziomem projektu, tak aby był to pierwszy poziom ładowany po uruchomieniu gry. Aby dokonać tej zmiany, wejdź do menu „ Edycja-> Ustawienia projektu ” i wybierz opcję „ Mapy i tryby ”. W kategorii „Domyślne mapy” wybierz nowy poziom „Ekran tytułu” dla Edytora i Gry.

Na powyższym obrazku, w kategorii „Tryby domyślne”, zwróć uwagę, że „Default GameMode” jest ustawiony na „VehicleGameMode”, a klasa HUD to „VehicleHUD”. Oznacza to, że nowe poziomy będą używać tych ustawień, jeśli nie zmienimy tych właściwości na poziomie. Jeśli nie zmienimy tego w naszym przykładzie, ekran tytułowy będzie wyświetlał prędkość i bieg samochodu ze względu na schemat „VehicleHUD”, a nie tego chcemy. W głównym edytorze kliknij przycisk „Ustawienia” znajdujący się na górnym pasku narzędzi i wybierz opcję „Ustawienia świata”, aby uzyskać dostęp do ustawień poziomu „Ekranu tytułowego”.

W kategorii „Game Mode”, w pozycji „GameMode Override”, wybieramy opcję „GameMode”, więc nie będziemy używać na ekranie tytułowym zmian, które zostały wprowadzone w szablonie „Vehicle”.

Na koniec zacznijmy używać UMG. Pierwszym krokiem jest stworzenie „Widget Blueprint”, w którym narysujemy nasz ekran. Aby to zrobić, kliknij przycisk „Add New” w „Search Folders”, wybierz podmenu „Interfejs użytkownika”, a następnie opcję „Widget Blueprint”, jak pokazano na poniższym obrazku. Umieść nazwę „UMG_TitleScreen” dla tego widżetu.

Ekran, który utworzę w tym przykładzie, to:

Ten ekran składa się z obrazu z tytułem „Wyścig schematów” i trzech przycisków, które wykorzystują obrazy do ich wizualnej reprezentacji. Możesz użyć dowolnego obrazu w tytule i na przyciskach.

Teraz zaimportujemy obrazy do edytora. W „Search Folders” wybierz folder „VehicleBP-> Textures”, aby obrazy zostały zapisane w tym folderze. Następnie naciśnij przycisk „Importuj” i wybierz obrazy, których chcesz użyć. Te obrazy zostaną zaimportowane jako „Tekstury”.

Aby otworzyć program UMG UI Designer, kliknij dwukrotnie widżet „UMG_TitleScreen”, który utworzymy. Poniższy obraz przedstawia projektanta interfejsu użytkownika UMG w trybie „Projektant”, z obrazami i przyciskami, które utworzymy w tym przykładzie.

Obszar, w którym umieścimy elementy, które zostaną narysowane, nazywa się „Canvas”. Dodajmy tytuł, który jest tylko obrazem. Aby dodać obraz do kanwy, kliknij i przeciągnij element „Image” znajdujący się na karcie „Palette” po lewej stronie edytora i upuść w wybranym miejscu w obszarze roboczym.

Musimy teraz wybrać teksturę lub materiał, który zostanie użyty do tego obrazu na płótnie. Po prawej stronie znajduje się zakładka „Szczegóły” z informacją o elemencie, który został wybrany w Canvas.

W kategorii „Wygląd” znajduje się pozycja „Bruch” z właściwością Obraz. Kliknij pole Combobox właściwości obrazu i wybierz teksturę, która została zaimportowana, aby reprezentować tytuł gry. Zaznacz opcję „Rozmiar do zawartości”, jeśli chcesz zachować oryginalny rozmiar obrazu.

Aby uporządkować przyciski na ekranie, użyjemy „Vertical Box”, który znajduje się w kategorii „Panel” na karcie „Paleta”.

Po umieszczeniu „Vertical Box”, dodaj przycisk ( Common-> Button ) w „Vertical Box”, a następnie przeciągnij obraz ( Common-> Image ) i puść nad przyciskiem. Zrób to jeszcze dwa razy, aby uzyskać w sumie 3 przyciski.

Dla każdego z dodanych obrazów wybierz teksturę, która będzie używana w taki sam sposób, jak zrobiliśmy z obrazem tytułowym. Zalecam zaznaczenie opcji „Rozmiar do zawartości” dla wszystkich tych elementów, aby zachować rozmiary obrazów.


Teraz zmienimy nazwy głównych elementów. Można to zrobić w zakładce „Szczegóły”. Obraz tytułowy będzie miał nazwę „imageTitle”, a trzy przyciski będą miały nazwy: „btnStart”, „btnAbout” i „btnExit”. Poniższy obraz przedstawia hierarchię elementów tego „Canvas”:

Stwórzmy nowy ekran „Informacje” zawierający informacje o grze. Aby to zrobić, utwórz nowy „Schemat widżetu” o nazwie „UMG_About”. Otwórz „UMG_About” i dodaj tekst oraz obrazy z informacjami o projekcie. Mój przykład Canvas ma następującą zawartość:


Źródło:https://romeroblueprints.blogspot.com/2015/03/drawing-title-screen-with-umg.html