Tworzenie niestandardowych testów umiejętności

Ta instruktaż stanowi przykład projektu UMG (Unreal Motion Graphics) i powiązań jego modelu widoku, których można użyć do utworzenia niestandardowego UI dla urządzenia testu umiejętności.

Tworząc niestandardowy test umiejętności, pamiętaj, aby ustawić zdarzenie rozpoczynające test. Możesz też ustawiać aktywatory zdarzeń, które przyznają graczowi przedmioty za pomyślne ukończenie testu umiejętności.

Możesz wykorzystać te przykłady, ustawiając przerywniki filmowe, gdy gracze lub obiekty wycelują w określone strefy.

Z tego samouczka dowiesz się, jak utworzyć szybki test umiejętności, w którym gracze mogą podtrzymać wyzwalający sygnał wejściowy, aby wycelować w prawidłową strefę.

Zanim zaczniesz dostosowywać swój UI, musisz utworzyć i zaimportować wszelkie zasoby, aby móc wykorzystać je w swoich projektach. Na stronie Tworzenie niestandardowego UI za pomocą materiałów dowiesz się więcej na temat stosowania materiałów w swoim projekcie.

Konfiguracja urządzenia

Wykonaj poniższą procedurę, aby utworzyć przykładową grę w golfa, w której gracze celują w idealną strefę, aby zaliczyć test pomyślnie w przypadku trafienia. Projektując UI, możesz swobodnie zmieniać nazwy paneli umieszczanych w panelu Hierarchia.

1. W Przeglądarce zawartości umieść urządzenie testu umiejętności w swoim projekcie.

2. W panelu Szczegóły urządzenia zmodyfikuj następujące ustawienia.

   

   Opcja	Wartość	Opis
   Typ UI	Słupek	Określa typ wyświetlanego interfejsu użytkownika.
   Własny widżet	Dodaj niestandardowy Widżet użytkownika	Wybierz niestandardowy widżet do użycia w teście.
   Typ interakcji	Doładuj i puść	Opcja Doładuj i puść oznacza odtwarzanie animacji w trakcie naciskania przycisku wyzwalacza oraz aktywację w momencie jego zwolnienia.
   Kolor paska	Wybierz kolor	W tym przykładzie użyto koloru czerwonego.
   Kolor strefy dobrej	80.0	Ustawia rozmiar strefy dobrej jako wartość procentową całego miernika.
   Położenie strefy dobrej	0.0	Ustawia położenie strefy dobrej.
   Rozmiar strefy doskonałej	15.0	Ustawia rozmiar strefy doskonałej jako wartość procentową strefy dobrej.
   Położenie strefy doskonałej	100.0	Ustawia położenie strefy doskonałej.
   Kolor strefy dobrej	Wybierz kolor	W tym przykładzie użyto ciemnozielonego koloru.
   Kolor strefy doskonałej	Wybierz kolor	W tym przykładzie użyto koloru limonkowej zieleni.

Dodawanie obrazu tła

Opisana poniżej procedura pozwala utworzyć obraz tła dla pionowego paska wskaźnika w tym przykładzie. Tłem w tej instrukcji jest zaokrąglony, czarny pasek, na którym będą osadzone strefy.

Wykorzystaj powyższą ilustrację jako źródło odniesienia podczas odtwarzania kroków tego samouczka.

1. Utwórz Widżet użytkownika na potrzeby testu.

2. Znajdź i kliknij dwukrotnie Widżet użytkownika dołączony do urządzenia, aby uzyskać dostęp do jego edytora widżetu użytkownika.

3. W panelu Hierarchia przeciągnij pozycję Nakładka i dokonaj jej zagnieżdżenia. Posłuży ona jako ogólna kanwa. W tym przykładzie nosi ona nazwę Overlay. Następnie przeciągnij kolejną nakładkę, która będzie zawierać tło. W tym przykładzie nosi ona nazwę SID.

4. Przeciągnij obraz o nazwie Bar w tym przykładzie i dokonaj jego zagnieżdżenia pod pozycją podrzędną Nakładka.

5. W panelu Szczegóły obrazu ustaw materiał lub teksturę tła.

Konfiguracja stref

Możesz na przykład utworzyć strefę niepowodzenia, a celowanie w tę strefę będzie powodowało automatyczne niepowodzenie. Jednak ten przykład wykorzystuje tylko strefę doskonałą, która składa się z trzech kontenerów:

• Początkowego pustego obszaru o nazwie PerfectZoneStart.

• Strefy dobrej i doskonałej o nazwie SizeBox.

• Pustego obszaru na końcu o nazwie PerfectZoneEnd.

Poniższa procedura pozwoli odtworzyć strefę doskonałą zaprezentowaną w tym przykładzie.

1. Z panelu Paleta przeciągnij pole stosu i dokonaj jego zagnieżdżenia wewnątrz nakładki podrzędnej o nazwie SID w tym przykładzie.

2. Następnie przeciągnij następujące elementy podrzędne w polu stosu i dokonaj ich zagnieżdżenia: Pole skali > Pole rozmiaru.

   1. W panelu Szczegóły panelu Skaluj pole ustaw opcję Rozciągnięcie na Określone przez użytkownika. Następnie ustaw skalę określoną przez użytkownika tak, aby wskazać, ile miejsca ma się znajdować nad strefą doskonałą. Na potrzeby tego przykładu ustaw skalę na 0.27.
   2. W obszarze Pole rozmiaru ustaw Zastąpienie wysokości na wysokość górnego wskaźnika.

3. Wewnątrz tego samego pola stosu przeciągnij również opcje Pole rozmiaru > Pole skali > Nakładka > Obraz.

   1. W panelu Szczegóły dla opcji Pole rozmiaru ustaw Zastąpienie wysokości na rozmiar strefy doskonałej.

   2. W panelu Szczegóły dla opcji Skaluj pole ustaw Rozciągnięcie na Określone przez użytkownika. Następnie ustaw w pozycji Skala określona przez użytkownika wartość 1.

   3. Nakładka PerfectZone będzie zawierać materiał lub teksturę strefy doskonałej.

4. Wewnątrz tego samego pola stosu przeciągnij również opcje Nakładka > Pole rozmiaru.

   1. W panelu Szczegóły dla nakładki PerfectZoneEnd ustaw Rozciągnięcie na Określone przez użytkownika. Następnie ustaw skalę określoną przez użytkownika tak, aby wskazać, ile miejsca ma się znajdować nad strefą doskonałą. Na potrzeby tego przykładu ustaw skalę na 0.49.
   
   1. W panelu Szczegóły dla opcji Pole rozmiaru ustaw Zastąpienie wysokości na wysokość dolnego wskaźnika.
   

5. Aby dodać więcej szczegółów, można uwzględnić wycięcia stref tła, dodając obraz, w tym przykładzie nazwany Notches, pod polem stosu.

Konfiguracja scrubbera

W tym przykładzie scrubber musi znajdować się w ruchomym kontenerze. W tym celu musisz utworzyć pole stosu zawierające dwa elementy.

Pierwszy element zawiera Pole rozmiaru z ustawieniem Skala użytkownika, które później powiążesz ze skalą wskaźnika testu umiejętności w ViewModel. Drugi element będzie zawierał kontener ze scrubberem.

1. Pod nakładką SID przeciągnij pole stosu o nazwie ScrubberStackBox w tym przykładzie i dokonaj jego zagnieżdżenia, tak aby zawierało dwie konfiguracje podrzędne: Nakładka > Pole rozmiaru i Pole rozmiaru > Pole skali > Obraz o nazwie Scrubber.

   1. W panelu Szczegóły nakładki ScrubberMovingZone ustaw Rozciągnięcie na Określone przez użytkownika. Następnie ustaw dla opcji Skala określona przez użytkownika wartość 0.
   
   1. W panelu Szczegóły dla opcji Pole rozmiaru ustaw Zastąpienie wysokości na wysokość górnego wskaźnika.
   
   1. Ustaw Zastąpienie wysokości dla opcji Pole rozmiaru ScrubberContainer na 0.
   
   1. Zmień ustawienie Rozciągnięcie dla rozmiaru pola nakładki na Określone przez użytkownika. Ustaw w pozycji Skala określona przez użytkownika wartość 1.
   
   1. W ustawieniu Obraz dla obrazu Scrubber ustaw materiał lub teksturę scrubbera.
   

Konfiguracja ViewModel

Poniższa procedura połączyć własny niestandardowy UI z urządzeniem testu umiejętności.

1. W widżecie użytkownika wybierz kolejno opcje Okno > Modele widoków, aby otworzyć okno Modele widoków.

2. Kliknij +Model widoku. Następnie wybierz model widoku Urządzenie – test umiejętności i kliknij opcję Wybierz.

3. Na dolnym pasku narzędzi lub na karcie Okno wybierz Powiązania widoku.

4. Skonfiguruj Powiązania widoku zgodnie z poniższą ilustracją.

   
   1. Kliknij + Dodaj widżet, aby dodać strefę ScrubberMovingZone.
   2. Ustaw ScubberMovingZone na Skala określona przez użytkownika, a UEFN_SkilledInteraction_ViewModel na Bieżąca wartość wskaźnika.
   3. Kliknij + Dodaj widżet, aby dodać strefę PerfectZoneStart.
   4. Ustaw PerfectZoneStart na Skala określona przez użytkownika, a UEFN_SkilledInteraction_ViewModel na Wartość minimalna strefy doskonałej.
   5. Kliknij + Dodaj widżet, aby dodać strefę PerfectZoneEnd.
   6. Ustaw PerfectZoneStart na Skala określona przez użytkownika i dodaj funkcję konwersji dla Dodaj wartość całkowitą podwójnej precyzji.
   7. W pozycji A ustaw wartość 1.
   8. W pozycji B ustaw UEFN_SkilledInteraction_Viewmodel/Wartość maksymalna strefy doskonałej.
   9. W pozycji Negacja B ustaw wartość True.