Rendering HUD z UMG

Teraz użyjemy Unreal Motion Graphics (UMG), aby stworzyć HUD przy użyciu szablonu „Pojazd”. HUD (Heads Up Display) jest jak przezroczysty panel, który wyświetla informacje na ekranie gry.

W tym artykule utworzymy wizualną część HUD, aw następnym utworzymy akcje planów, aby uzyskać informacje niezbędne do wyświetlenia na HUD.

Jeśli jeszcze nie utworzyłeś projektu z szablonem „Pojazd”, utwórz go teraz w menu „ Plik-> Nowy projekt ”. Ten szablon wyświetla na ekranie dwie informacje, którymi są prędkość i aktualny bieg:

Zostanie utworzony nowy HUD do wyświetlania tych informacji, a także dodamy wskaźnik paliwa w samochodzie. HUD będzie wyglądał następująco:

W tym nowym interfejsie są 3 rodzaje elementów ekranu:

  • Text: Używane w prędkości i na etykiecie „Paliwo”;
  • Progress Bar: służy do wyświetlania ilości paliwa;
  • Image: używane do wizualnego przedstawienia bieżącego biegu samochodu; 

Siedem obrazów przedstawia biegi samochodu. Poniższy obraz przedstawia wszystkie używane obrazy, które są neutralne, od 1 do 5 i odwrotnie. Każdy obraz ma rozmiar 256×256 pikseli. Proponuję oddzielić je, aby indywidualnie zaimportować każdy obraz jako teksturę.

Musisz także zaimportować czcionkę, która będzie używana. Nazwa czcionki to „Digital Dream” i została stworzona przez Jakoba Fischera (pizzadude.dk). 

Można go pobrać pod linkiem : www.fontsquirrel.com/fonts/Digital-dream
Po pobraniu rozpakuj plik i zaimportuj czcionkę o nazwie „DIGITALDREAM.ttf” do silnika Unreal Engine, klikając przycisk „Importuj” w Wyszukiwarce bibliotek. Jeśli wolisz, możesz użyć dowolnej innej czcionki.

Stwórzmy teraz schemat widżetu, aby zdefiniować HUD. Kliknij przycisk „Dodaj nowy” w „Wyszukiwarce bibliotek”, wybierz podmenu „Interfejs użytkownika”, a następnie opcję „Schemat widżetu”:

Wpisz nazwę „UMG_HUD” dla nowego schematu widżetu, a następnie kliknij ją dwukrotnie, aby otworzyć projektanta interfejsu użytkownika UMG. Ekran, który zbudujemy na Canvas, pozostanie taki:

Kliknij, aby powiększyć

Po lewej stronie Projektanta UI UMG, na karcie „Paleta”, znajdują się elementy, które będą używane jako „Tekst”, „Obraz” i „Pasek postępu”. Oprócz tych elementów, do organizowania elementów użyjemy również „Poziome pudełko”.

Dodajmy licznik prędkości. Najpierw przeciągnij „Pole poziome” i upuść w pobliżu lewego górnego rogu obszaru roboczego, a następnie przeciągnij dwa elementy typu „Tekst” do „Pola poziomego”.
Wybierz pierwszy „Tekst” i na karcie „Szczegóły” wpisz „PRĘDKOŚĆ” we właściwości „Tekst”. Wybierz czerwony kolor i czcionkę „DigitalDream”, rozmiar 40, jak poniżej:

Wprowadź te same ustawienia w drugim elemencie „Tekst”. Na razie napiszemy „50 km / h” tylko jako odniesienie do rozmiaru. Później zostanie dokonana korekta, aby uzyskać tę wartość bezpośrednio ze zmiennej.

Licznik prędkości wygląda następująco:

Biały symbol po lewej stronie to kotwica, która służy jako odniesienie do pozycji elementu. Zatem pozycja X i Y elementu jest względem pozycji zakotwiczenia. Aby zmienić pozycję zakotwiczenia, wybierz “Pole poziome” i na “Szczegóły” kliknij ComboBox we właściwości “Kotwice”. Poniższy obraz przedstawia dostępne opcje:

Dla wskaźnika poziomu paliwa dodajmy kolejne „poziome pole” w górnej środkowej części obszaru roboczego. Ustaw pozycję kotwicy na środku u góry.
Przeciągnij element typu „Text” do „Horizontal Box”, wpisz „FUEL”, zmień kolor na zielony i zmień czcionkę na „DigitalDream” o rozmiarze 40. Następnie przeciągnij „ProgressBar” do tego samego „poziomego pola” . Wynik powinien wyglądać mniej więcej tak:

Poniższy obrazek przedstawia kartę „Szczegóły” na pasku „ProgressBar”. Właściwość „Typ wypełnienia paska” pozwala na wybór różnego rodzaju paska postępu. Właściwość „Procent” mieści się w zakresie od 0,0 do 1,0 i ustawia bieżącą wartość paska postępu. Wartość „0,7” została dodana tylko w celu wyświetlenia paska postępu. Ta wartość zostanie później uzyskana ze zmiennej.

Ostatnim elementem, który dodamy, będzie typ „Obraz”. Przeciągnij jeden do prawego górnego rogu kanwy. W zakładce „Szczegóły” wpisz „GearImages” jako nazwę elementu. Ustaw pozycję kotwicy w prawym górnym rogu. Ustaw wartość „-256” na pozycję X. Zaznacz opcję „Dopasuj rozmiar do zawartości”.

Obraz, który zostanie użyty, ma rozmiar 256×256. Na razie wybierz jeden z obrazków przedstawiających bieg samochodu we właściwości „Pędzel-> Obraz”. Później utworzymy funkcję pobierania poprawnego obrazu zgodnie z aktualnym biegiem. W programie UMG UI Designer pojawi się „GearImages”:

W zakładce „Hierarchia” możemy zobaczyć relacje między elementami, które zostały dodane do Canvas:

W następnym artykule zobaczymy akcje schematów wymagane do ukończenia tego przykładu HUD.


Źródło:https://romeroblueprints.blogspot.com/2015/04/drawing-hud-with-umg.html