Ekran wyboru misji

Ekrany wyboru misji pojawiają się zazwyczaj na początku gry, aby umożliwić graczom wybór misji. Czasami po krótkim samouczku, który zapoznaje graczy z zasadami i mechaniką gry, pojawia się ekran wyboru misji.

Wybór misji rozpoczyna grę i przenosi graczy do określonego miejsca na wyspie, gdzie rozpoczyna się dana misja. Ekrany te mogą zawierać szczegółowe statystyki misji, informacje o rodzajach misji, które gracz może wybrać, lub po prostu przenosić graczy do wybranej misji.

Poniższy samouczek pokazuje, jak stworzyć ekran misji, który przenosi graczy do wybranej przez nich misji.

Krok 1: Style wyboru misji badawczych

 Istnieje wiele sposobów zaprojektowania ekranu wyboru menu, w zależności od ilości informacji, które chcesz przekazać graczom. Informacje mogą mieć formę opisów misji lub obrazów tekstur poziomu misji. Poniżej zobaczysz przykłady obu rozwiązań, aby przekonać się, jaki efekt można uzyskać, używając samych materiałów lub strategicznie dodając tekstury do projektu.

Podjęcie decyzji o ilości informacji, które należy umieścić na ekranie wyboru misji, jest korzystne na etapie projektowania.

Krok 2: Projektowanie układu

Zaprojektuj układ ekranu misji przed otwarciem UMG. Wszelkie wybory projektowe dokonane na tym etapie nie są ostateczne i można je zmienić bez naruszania funkcjonalności UI. Układ ekranu zależy od tego, co znajduje się na ekranie wyboru misji.

Na tym etapie należy podjąć cztery wstępne decyzje dotyczące układu:

• Schemat kolorów – Podczas stosowania kolorów w UI stosuj zasadę 60/30/10.

• Wybór czcionki – Obecnie dostępne są dwie czcionki: Burbank i HeadingNow.

• Materiały – Użyj materiałów z szablonu funkcji UI, aby stworzyć własny, niepowtarzalny wygląd UI.

• Obrazy / Tekstury – Tekstury powinny być zarezerwowane dla skomplikowanych elementów graficznych, których nie da się łatwo odtworzyć za pomocą materiałów, takich jak postacie lub artystyczne kontenery.

Po wybraniu schematu kolorów utwórz materiały i instancje materiałów, które zostaną użyte w projekcie UI.

W tym przykładzie projekt jest prosty. W górnej części ekranu znajduje się wezwanie do działania z napisem "Wybierz misję", a poniżej trzy obrazy oznaczone jako Misja 1, 2 i 3, z przyciskiem START.

Krok 3: Projektowanie układu widżetu

Przykładowy układ widżetu składa się z czterech głównych części:

1. Projekt tła

2. Projekt kafelka misji 1

3. Projekt kafelka misji 2

4. Projekt kafelka misji 3

Aby utworzyć widżet z działającymi przyciskami, musisz użyć widżetu wariantu modalnego okna dialogowego. W widżecie wariantu modalnego okna dialogowego używany jest specjalny model widoku, który umożliwia powiązanie przycisków z urządzeniami.

1. Utwórz i otwórz folder Interfejs użytkownika.

2. W folderze utwórz widżet wariantu modalnego okna dialogowego.

3. Nazwij widżet Misja_Select_UI.

4. Kliknij dwukrotnie widżet Mission_Select_UI, aby otworzyć edytor widżetów.

Projekt tła

W tym przykładzie projekt tła ekranu wyboru misji obejmuje użycie materiałów do dodania bloków koloru do tła, dodanie wezwania do działania u góry ekranu oraz dodanie tekstury postaci.

W edytorze widżetów wykonaj następujące czynności:

1. Z panelu Paleta przeciągnij widżet Nakładka na graf widżetu. Ten widżet stanie się głównym widżetem i będzie działać jako ekran, na którym pojawia się UI.

2. W grafie widżetu rozszerz widżet Nakładka, aż jego rozmiar wyniesie 1920x1080.

   

3. W panelu Hierarchia kliknij prawym przyciskiem myszy widżet Nakładka, aby otworzyć menu kontekstowe. Z menu rozwijanego wybierz opcję Zmień nazwę i nadaj widżetowi nazwę Główny. Ten widżet obejmuje wszystkie widżety tworzące ekran wyboru misji.

   

4. Zmień układ grafu na Pożądany. Pozwala to ustawić rozmiar UI dokładnie tak, jak chcesz, aby był wyświetlany na dowolnym ekranie.

   

   Możesz sprawdzić, jak zmienia się UI w zależności od platformy, wybierając ekran z menu rozwijanego Rozmiar ekranu.

   

5. Przeciągnij panel Nakładka z panelu Paleta pod widżet Główny i zmień jego nazwę Kontener nadrzędny. Ten widżet Nakładka będzie zawierał wszystkie części ekranu wyboru misji.

   

   Ten widżet powinien mieć taki sam rozmiar jak widżet Główny. 

6. Zmień opcje wyrównania widżetu Kontener nadrzędny na Wypełnij poziomo i Wypełnij pionowo.

   

7. Przeciągnij widżet Obraz z panelu Paleta do panelu Hierarchia w obszarze widżetu Kontener nadrzędny.

8. Kliknij prawym przyciskiem myszy widżet Obraz, aby otworzyć menu kontekstowe. Z menu rozwijanego wybierz opcję Zmień nazwę i nadaj widżetowi nazwę Kolor tła UI.

   

9. Wybierz widżet Kolor tła UI w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

10. W opcjach Slot (Slot nakładki) użyj następujących ustawień wyrównania:

    1. Wyrównanie poziome = Wypełnij poziomo

    2. Wyrównanie pionowe = Wypełnij pionowo

    

11. W opcjach Wygląd użyj menu rozwijanego Pędzel > Obraz, aby wybrać materiał koloru podstawowego. Dzięki temu widżet Obraz będzie miał kolor materiału.

    

12. Przeciągnij widżet Panel siatki z panelu Paleta do widżetu Kontener nadrzędny i zmień jego nazwę na Korpus. Panel siatki działa jako kontener na całą zawartość UI. Dodaje również elastyczną siatkę do układu, która organizuje widżety podrzędne w wierszach i kolumnach. W tym przykładzie zawartość ekranu misji i obraz postaci.

    

13. W opcjach Slot (Slot nakładki) użyj następujących ustawień:

    1. Wyrównanie poziome = Wyrównanie do środka

    2. Wyrównanie pionowe = Wyrównanie do środka

    3. Odstęp wewnętrzny = 64.0

    

14. Przeciągnij Pole stosu do widżetu Korpus i zmień jego nazwę na Zawartość. Pole stosu używa wyrównania poziomego lub pionowego do rozmieszczenia widżetów podrzędnych.

    

15. Zmień ustawienia wyrównania widżetu Zawartość na Wypełnij poziomo i Wypełnij pionowo.

    

16. W opcji Zachowanie zmień ustawienie Orientacja na Pionowa.

    

Dodawanie tekstu wezwania

1. Przeciągnij widżet Pole tekstowe z panelu Paleta i zagnieźdź go pod elementem Zawartość. Będzie to tekst komunikatu zachęcającego graczy do wybrania misji.

2. Zmień nazwę pola tekstowego na Wybierz misję.

   

3. Wybierz widżet Wybierz misję z panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

4. W opcjach Slot (Slot nakładki) użyj następujących ustawień:

   1. Rozmiar = Automatyczny

   2. Wyrównanie poziome = Wyrównanie do lewej

   3. Wyrównanie pionowe = Wypełnij pionowo

   

5. Kliknij pole Tekst, usuń domyślny tekst i wpisz Wybierz misję.

   

6. W opcjach Wygląd użyj następujących ustawień: 

   1. Kolor i nieprzezroczystość = Hex Linear E0137CFF

   2. Rodzina czcionek = HeadingNow

   3. Krój czcionki = 86Bold

   4.  Rozmiar = 85

   5. Rozmiar obrysu = 2

   6. Ścięte narożniki = Zaznaczone

   7. Kolor obrysu = Hex Linear FFFFFFFF

   

7. Przeciągnij widżet Obraz do widżetu Zawartość i zmień jego nazwę na Przerwa. Ten widżet służy jako element odstępujący, aby zapewnić przestrzeń między wezwaniem a kafelkami misji.

   

Dodawanie miejsca na kafelki misji

1. Przeciągnij widżet Nakładka do widżetu Zawartość i zmień jego nazwę na Kafelki.

   

2. Przeciągnij widżet Obraz do widżetu Kafelki i zmień jego nazwę na TileBG.

   

3. Wybierz widżet TileBG w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

4. W opcjach Slot (Slot nakładki) użyj następujących ustawień:

   1. Wyrównanie poziome = Wypełnij poziomo

   2. Wyrównanie pionowe = Wypełnij pionowo

   

5. W opcjach Wygląd użyj następujących ustawień:

   1. Pędzel > Obraz = Dodatkowy materiał tła

   2. Rozmiar obrazu:

      1. X = 1200

      2. Y = 32.0

   

6. Przeciągnij widżet Pole stosu do widżetu Kafelki i zmień jego nazwę na Kafelki misji. To pole stosu będzie porządkować kafelki misji od lewej do prawej.

   

Układ tła jest gotowy. Ekran wyboru misji powinien wyglądać na dość pusty na tym etapie.

W następnym kroku rozłożysz trzy kafelki wyboru misji i zbudujesz je wewnątrz widżetu Pole stosu. Dodasz również teksturę postaci do projektu, aby uatrakcyjnić go wizualnie. Projekt kafelka misji 1

Projekt kafelków misji może dostarczać informacji o poziomie i celach oraz statystykach dotyczących celów gracza, a nawet śledzić postępy gracza w realizacji tych celów. Ten przykład kafelka przedstawia bardziej uproszczony projekt. W tle widoczna jest tekstura przedstawiająca poziom, numer misji oraz przycisk Start. Użycie serii pól stosu pozwala układać widżety w poziomie lub w pionie. W przypadku układu pionowego lub poziomego pole stosu pomaga zachować spójność układu. Wszystkie trzy kafelki misji mają ten sam wzór. Postępuj zgodnie z poniższymi instrukcjami, aby zbudować wszystkie trzy kafelki wyboru.

1. Przeciągnij widżet Nakładka do Panelu siatki w panelu Hierarchia i zmień jego nazwę Misja 1. Staje się to pojemnikiem zawierającym wszystkie elementy projektu dla kafelka Misja 1.

   

2. Wybierz widżet Misja 1 w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

3. W opcjach Slot (Slot pola stosu) użyj następujących ustawień odstępu wewnętrznego:

   1. Lewa = 0.0

   2. Góra = 0.0

   3. Prawa = 24.0

   4. Dół = 0.0

   

4. Przeciągnij widżet Obraz do widżetu Misja 1 w panelu Hierarchia i zmień jego nazwę na Mission1Image. Ten widżet jest wizualną reprezentacją Mission1.

   

5. Wybierz widżet Mission1Image w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

6. W opcjach Slot (Slot pola stosu) użyj następujących ustawień:

   1. Wyrównanie poziome = Wypełnij poziomo

   2. Wyrównanie pionowe = Wypełnij pionowo

   

7. W opcjach Wygląd zmień następujące ustawienia:

   1. Obraz = Tekstura misji 1

   2. Rozmiar obrazu:

      1. X = 256.0

      2. Y = 256.0

   

   Ustalenie rozmiaru obrazu zapewnia dodatkową kontrolę nad projektem kafelków.

Porządkowanie zawartości kafelków

1. Przeciągnij widżet Pole stosu do widżetu Misja 1 i zmień jego nazwę na M1Content.

   

2. Wybierz widżet M1Content w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

3. W opcjach Slot (Slot nakładki) zmień następujące ustawienia:

   1. Wyrównanie poziome = Wyrównanie do środka

   2. Wyrównanie pionowe = Wyrównanie do środka

   

   Spowoduje to wyrównanie wszystkich widżetów podrzędnych pola stosu do środka.

4. W opcji Zachowanie zmień Orientację na Pionową. Dzięki temu wszystkie widżety podrzędne będą układane w stos pionowo.

   

5. Przeciągnij widżet Nakładka do widżetu M1Content i zmień jego nazwę na M1Header. Ta nakładka działa jak pojemnik na wszystkie zasoby nagłówka i formatuje je zgodnie z ustawieniami nakładki.

   

6. Wybierz widżet M1Header w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

7. W sekcji Slot (Slot pola stosu) zmień następujące opcje:

   1. Odstęp wewnętrzny:

      1. Lewa = 0.0

      2. Góra = 0.0

      3. Prawa = 0.0

      4. Dół = 128.0

   2. Rozmiar = Automatyczny

   3. Wyrównanie poziome = Wyrównanie do środka

   4. Wyrównanie pionowe = Wypełnij pionowo

   

   Unikalne ustawienia odstępu wewnętrznego zapewniają odstęp wewnętrzny po prawej stronie kafelka misji 1.

Nadawanie stylu tekstu kafelka misji

1. Przeciągnij widżet Obraz do M1Header i zmień jego nazwę na M1Stroke.

   

2. Wybierz M1Stroke w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

3. W sekcji Slot (Slot nakładki) ustaw wyrównanie na Wypełnij poziomo i Wypełnij pionowo.

   

4. W opcjach Wygląd użyj następujących ustawień:

   1. Obraz = Przecięcie materiału

   2. Rozmiar obrazu:

      1. X = 200.0

      2. Y = 32.0

   

5. Przeciągnij pole tekstowe do widżetu M1Header i zmień nazwę widżetu na Mission_1.

   

6. Wybierz widżet tekstowy Mission_1 w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

7. W opcjach Slot (Slot nakładki) użyj następujących ustawień wyrównania:

   1. Wyrównanie poziome = Wyrównanie do środka

   2. Wyrównanie pionowe = Wyrównanie do góry

   

8. Zmień tekst na Misja 1.

   

9. W narzędziu Pędzel > Obraz otwórz Wybór koloru i wybierz kolor akcentu tekstu.

10. W obszarze Czcionka ustaw następujące opcje:

    1. Krój pisma = Pogrubiony

    2. Rozmiar = 25.0

    3. Odstępy między literami = 65

    4. Ilość skrzywienia = 0.28

    

11. W obszarze Ustawienia obrysu ustaw następujące opcje:

    1. Rozmiar obrysu = 1

    2.  Oddzielne wypełnienie alfa = Zaznaczone

    3. Zastosuj obrys do cienia = Zaznaczone

    4. Kolor obrysu = Wybierz główny kolor z narzędzia Wybór koloru

    

12. Zmień opcję Kolor cienia na swój kolor główny za pomocą narzędzia Wybór koloru. Czcionka powinna wyglądać nieco trójwymiarowo i powinna wyglądać inaczej niż tekst wezwania.

    

Dodawanie przycisku Start

1. Przeciągnij widżet Cichy przycisk do widżetu M1Content i zmień jego nazwę naSTART_M1_Button.

   

2. Wybierz START_M1_Button w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

3. Zmień Tekst przycisku na START.

   

4. W opcjach Slot (Slot pola stosu) ustaw Min. wysokość na 56. To zmniejsza wysokość przycisku.

   

5. Zaznacz Wybór > Do wyboru. Dzięki temu gracz może wybrać przycisk.

   

6. W sekcji Dane wejściowe ustaw następujące opcje:

   1. Metoda dotyku = W dół

   2. Metoda naciśnięcia = Naciśnięcie przycisku

   

7. Postępuj zgodnie z tymi instrukcjami, aby utworzyć układ dla Misji 2 i Misji 3.

Przed dodaniem pól Misji 2 i Misji 3 projekt powinien wyglądać tak, jak na poniższym obrazie.

Po ukończeniu wszystkich kafelków misji dodaj postać do projektu, aby uatrakcyjnić wygląd UI.

Dodawanie tekstury postaci

Dodanie tekstury postaci do UI powoduje pobranie wszystkich kolorów wybranych dla projektu i dodanie ich do stylu wizualnego UI. Pamiętaj, aby używać potęgi dwójki i upewnić się, że używana tekstura jest wysokiej jakości i można ją skalować do dowolnego rozmiaru.

1. Przeciągnij widżet Obraz do widżetu Korpus i zmień jego nazwę na Postać.

   

2. Wybierz widżet Postać w panelu Hierarchia, aby otworzyć jego opcje w panelu Szczegóły.

3. W obszarze Wygląd użyj następujących ustawień:

   1. Pędzel > Obraz = Tekstura postaci

   2. Rozmiar obrazu:

      1. X = 700

      2. Y = 700

   

4. W opcjach Slot (Slot siatki) użyj następujących ustawień:

   1. Wyrównanie poziome = Wyrównanie do prawej

   2. Wyrównanie pionowe = Wypełnij pionowo

   3. Przesunięcie = Użyj narzędzi osi X i Y, aby precyzyjnie umieścić teksturę postaci w miejscu.

   

Po ukończeniu sekcji misji możesz przystąpić do podłączania funkcji przycisków w UI.

Krok 4: Dodawanie modelu widoku

Model widoku kontroluje informacje o graczu za pomocą listy funkcji i zapewnia określony sposób powiązania widżetów UMG z urządzeniami trybu kreatywnego. Istnieje określony model widoku, który współpracuje z przyciskami, CreativeModalDialogViewmodel. Ten model widoku działa tylko z widżetem wariantu modalnego okna dialogowego i zapewnia wiele funkcji przycisków.

Aby użyć modelu widoku, wykonaj następujące czynności:

1. Otwórz menu Okna z paska menu głównego.

   

2. Z menu rozwijanego wybierz Modele widoku. Panel CreativeModalDialogViewmodel automatycznie zapisuje dokumentację w oknie edytora widżetów.

   

Wszystkie funkcje przycisków zostały dodane do widżetu. Teraz musisz dodać powiązania, aby przyciski działały.

Krok 5: Dodawanie urządzeń

Po skonfigurowaniu obszarów misji każdy obszar wymaga skonfigurowania własnego urządzenia teleportera do odbierania gracza. Urządzenie okna dialogowego pobiera widżet Wariant modalnego okna dialogowego i wyświetla UI widżetów po aktywowaniu.

Urządzenie okna dialogowego

Zacznij od dodania do projektu urządzenia okna dialogowego. Zmodyfikuj jego opcje, a następnie dodaj widżet Wariant modalnego okna dialogowego do urządzenia.

1. Przeciągnij urządzenie okna dialogowego do okna wizualizacji.

2. W panelu Szczegóły ustaw następujące opcje użytkownika:

   1. Opis = Ekran wyboru misji

   2. Automatyczne wyświetlanie = Na początku gry

   3. Typ reakcji = 3 przyciski

   

   Opcje te identyfikują widżet oraz określają, kiedy UI ma być wyświetlany w interfejsie, i liczbę przycisków dołączonych do widżetu.

3. W obszarze Zaawansowane ustaw następujące opcje:

   1. Domyślny przycisk powrotu = Brak

   2. Tekst przycisku 1 = START

   3. Tekst przycisku 2 = START

   4. Tekst przycisku 3 = START

   5. Przesłaniaj tło = Zaznaczone

   6. Włączono podczas fazy = Tylko podczas gry

   

   

4. Przewiń w dół do Widżet modalny > Klasa zastąpienia szablonu i z menu rozwijanego wybierz swój widżet Mission_Select_UI.

   

5. Przewiń w górę do Opcji użytkownika – Funkcje i w sekcji Pokaż otwórz Element tablicy.

6. Dodaj Panel startowy gracza 1 na górne pole.

7. Wybierz Po pojawieniu się gracza dla funkcji panelu startowego.

   

Urządzenia teleportera

Aby skrócić czas tworzenia, stwórz pierwsze urządzenie teleportera i zmodyfikuj jego opcje, a następnie skopiuj urządzenie i umieść dodatkowe urządzenia w odpowiednich obszarach misji. 

1. Przeciągnij urządzenie Teleporter do okna wizualizacji.

2. W panelu Szczegóły, w sekcji Opcje użytkownika, odznacz opcje Widoczność szczeliny teleportera i Odtwórz efekty graficzne.

   

3. Przewiń w dół do Opcji użytkownika – Funkcje i w sekcji Teleport otwórz Element tablicy.

4. Dodaj Okno dialogowe do górnego pola.

5. Wybierz Po zareagowaniu przyciskiem 1.

   

6. Zduplikuj urządzenie teleportera dwukrotnie.

7. W każdej z dodatkowych funkcji teleportera dostępnych w Opcjach użytkownika > Teleport > Okno dialogowe zmień funkcję na odpowiadający jej przycisk (Po zareagowaniu przyciskiem 2, Po zareagowaniu przyciskiem 3).

Aby rozpocząć misję, gracz klika przycisk powiązany z obszarem misji, a następnie jest teleportowany do obszaru wybranej misji. Aby utworzyć tę funkcję, powiąż funkcję przycisku z przyciskami na ekranie wyboru.

Krok 6: Powiązania widoku

Powiązania widoku dodają logikę, która wiąże ze sobą urządzenie i funkcję widżetu. 

W tym przykładzie przyciski są przypisane do urządzeń teleportera za pomocą funkcji Teleportuj. Gdy gracz wybierze misję, kliknięcie przycisku START aktywuje połączony teleporter i teleportuje gracza do tego obszaru misji.

Aby dodać powiązania, wykonaj następujące czynności:

1. W panelu Hierarchia wybierz przycisk Start_Mission_1_Button, aby go podświetlić, a następnie na dolnym pasku narzędzi wybierz opcję Powiązania widoku. Zostanie otwarte okno Powiązania widoku z wybranym cichym przyciskiem.

   

2. Wybierz +Dodaj widżet Start_Mission_1_Button. Spowoduje to utworzenie widoku powiązania pod spodem.

   

3. Wybierz pole z lewej strony zawierające przycisk Start_Mission_1_Button i z menu rozwijanego wybierz kolejno Po kliknięciu > Zdarzenie. Zdarzenie Po kliknięciu zostaje dodane do cichego przycisku.

   

4. Następnie wybierz pole z prawej strony i z menu rozwijanego wybierz CreativeModalDialogViewmodel > Reakcja > Wybierz. Powoduje to dodanie funkcji Reakcja do zdarzenia Po kliknięciu przycisku.

   

5. W menu rozwijanym Reakcja wybierz Przycisk 1. Funkcja jest powiązana z pierwszym cichym przyciskiem.

   

6. Powtórz te kroki, aby powiązać następne dwa przyciski.

   

W tym momencie wszystkie przyciski powinny być przypisane do teleporterów, a ekran wyboru misji powinien pojawić się, gdy gracz spawnuje się w grze na początku gry.

Rezultat

Ostatnim krokiem jest przetestowanie projektu, aby upewnić się, że UI działa zgodnie z oczekiwaniami. Uruchom sesję; po zespawnowaniu gracza na wyspie powinien pojawić się ekran wyboru misji, a gracz powinien teleportować się do misji wybranej w UI.

Praca własna

Istnieje kilka sposobów zmiany wyglądu ekranu wyboru misji, aby dostosować go do własnego projektu. 

• Możesz zmienić kafelek misji tła na materiał zamiast tekstury. Dzięki temu ekran misji może wyglądać inaczej.

  

• Do każdej misji możesz dodać postępometr, aby śledzić statystyki gracza lub zebrane przedmioty.

• Możesz dodać urządzenie ustawień rundy, które spowoduje ponowne pojawienie się graczy i przywróci ekran wyboru misji, dzięki czemu gracze będą mogli wybrać inne misje, których jeszcze nie rozegrali, a wybrane misje staną się niedostępne po pomyślnym ukończeniu.