Niestandardowy UI rozmowy

Edytor widżetów pozwala zaprojektować wygląd przycisków oraz tła dla twoich rozmów. Nie musisz dodawać tekstu do żadnych widżetów w edytorze widżetów, aby utworzyć niestandardowe okna modalne. Wszystkie przyciski i widżety bloków tekstowych pobierają tekst i dialog z banku rozmowy.

Korzystanie z edytora widżetów sprawia, że możesz importować:

• Grafiki

• Wstępnie zaprojektowane okna dialogowe

• Pliki czcionek

Świetny przykład budowania niestandardowego UI za pomocą Edytora widżetów można znaleźć na stronie samouczka dotyczącego szablonu Arcade WŻN.

Aby otworzyć Edytor widżetów:

1. Kliknij prawym przyciskiem myszy w Przeglądarce zawartości i wybierz Interfejs użytkownika > Blueprint widżetów.

2. Wybierz Wariant modalnego okna dialogowego z okna Wybór Blueprintu widżetów.

3. Nadaj nazwę Blueprintowi widżetów i kliknij dwukrotnie miniaturę widżetu, aby otworzyć Edytor widżetów.

4. Do tworzenia niestandardowych pól konwersacji wykorzystywane są przepływy pracy opisane na stronie Edytor widżetów.

Widżety, których najprawdopodobniej będziesz używać z urządzeniem rozmowy, to:

• Panel kanwy – panel do umieszczania wszystkich widżetów ze sterowaniem wyrównaniem i nie tylko.

• TextBlock UEFN dla ConversationModalDialogViewModel – do tekstu tytułu rozmowy.

• TextBlock UEFN dla ConversationModalDialogViewModel – do tekstu korpusu rozmowy.

• Przycisk UEFN do ConversationModalDialogViewModel – do wszystkich przycisków/wybranych tekstów.

Powiązanie wartości

Wartości powiązania odnoszą się do tekstu wprowadzonego na Grafie rozmowy. Cały tekst wprowadzony w węzłach rozmowy jest dodawany do widżetów w trakcie rozgrywki, gdy widżety są prawidłowo powiązane z widżetami w modelu widoku.

Powiązanie wartości tekstowych dla niestandardowego pola konwersacji rozpoczyna się od panelu Hierarchia w edytorze widżetów.

1. Wybierz widżet z panelu Hierarchia. Możesz zacząć od szczytu hierarchii i schodzić w dół listy.  

2. Na dolnym pasku narzędzi kliknij Wyświetl powiązania. Zostanie otwarty panel widzialnego modelu.  

   

3. Wybierz potrzebny element, a następnie kliknij + Dodaj widżet w panelu Model widoku. Spowoduje to automatyczne dodanie widżetu do listy modelu widoku.

   

   Widżety można również dodawać do modelu widoku, klikając pole Widżet i wybierając widżet z menu rozwijanego.

   

4. Wybierz właściwość do powiązania w widżecie, klikając ikonę edycji we właściwości Tekst UEFN i wybierając Tekst > Wybierz.

   

5. Wybierz wartość tekstową lub wartość przycisku z menu rozwijanego CreativeModalDialogueViewmodel. Spowoduje to dodanie wybranej wartości do widżetu. Wyboru należy dokonać na podstawie typu widżetu w hierarchii.

   

6. Kliknij Wybierz, aby zakończyć powiązywanie wartości z widżetami.

   1. Wartości tekstowe obejmują Tytuł, Korpus lub Tekst główny przycisku#:

   2. Tytuł to wartość ustawiona w polu Nazwa mówcy w urządzeniu rozmowy lub wartość ustawiona w tytule w urządzeniu okna dialogowego.

   3. Korpus to tekst, który następuje po nim i zwykle prezentuje graczowi opcje w trakcie rozmowy. Będą to węzły mowy połączone z węzłem Domyślny punkt wejścia.

   4. Tekst główny przycisku# to tekst, który pojawia się w węzłach odpowiedzi zgodnie z kolejnością na Grafie rozmowy.

   

Wartości przycisków powinny być ponumerowane zgodnie z liczbą używanych widżetów przycisków. Wartości są ustawiane w tej samej kolejności numerycznej, w której zostały dodane widżety przycisków. Przyciski są Węzłami odpowiedzi w grafie rozmowy. Spowoduje to powiązanie tekstu przycisku z odpowiednimi poszczególnymi przyciskami.

Powiązanie przycisków

Powiązanie przycisków odnosi się do inicjowania zdarzeń po wybraniu przycisku. Może to być pojedyncze zdarzenie, w którym postać niezależna dostarcza przedmiot, czy też złożona wymiana, w której postać niezależna ma towary do sprzedania, rozpoczynając serię zdarzeń.

Aby zaprogramować uruchamianie zdarzeń w widżetach przycisków niestandardowych, musisz dodać do przycisku logikę zdarzeń z modelu widoku.

1. Na dolnym pasku narzędzi kliknij Wyświetl powiązania.

   

2. Wybieraj jeden przycisk naraz z panelu Hierarchia w edytorze widżetów. Wybranie widżetu z panelu Hierarchia powoduje automatyczne umieszczenie wybranego widżetu przycisku w polu widżetu.

3. Kliknij + Dodaj widżet. Widżet zostanie ponownie dodany do listy.

   

4. Wybierz pole strzałki, a następnie wybierz opcję Jednokierunkowo do modelu widoku.

   

5. Wybierz przycisk i wybierz wartość Po kliknięciu. Upewnij się, że w oknie wyboru została kliknięta opcja Zdarzenie, nie Wybierz.

6. Wybierz wartość Odpowiedź w modelu widoku.

7. W wierszu poniżej wybierz wartość Odpowiedź, którą chcesz dla przycisku. Otrzymane powiązanie powinno wyglądać następująco:

   

Możesz też skonfigurować ukrywanie/wyświetlanie przycisków w zależności od tego, czy są do nich przypisane wartości:

1. Wybierz przycisk z hierarchii i dodaj do przycisku widżet.

2. Wybierz wartość Widoczność.

3. Znajdź odpowiednią Widoczność przycisku # po prawej stronie powiązania i wybierz ją. Otrzymane powiązanie powinno wyglądać następująco:

   

4. Teraz przycisk będzie widoczny tylko wtedy, gdy istnieje odpowiedź do wybrania.

Kliknij gif, aby powiększyć.

Bez powiązania parametru Widoczność tekst zniknie z pola odpowiedzi, pozostawiając puste pole wyboru dla graczy:

Kliknij gif, aby powiększyć. Tekst > Wybierz

Powiązanie materiałów

Materiałów można używać w UMG do wypełnienia widżetu obrazu. Materiały używane z UMG muszą być w formacie materiału UI, aby widżet mógł rozpoznać plik materiału i używać go z widżetem obrazu. Aby dowiedzieć się więcej na temat materiałów UI, zapoznaj się z dokumentacją Materiały interfejsu użytkownika.

Materiałów można używać do wypełniania tablicy Materiały rozmowy. Możesz tworzyć niestandardowe materiały przy użyciu zaimportowanych plików, które można przekonwertować na tekstury w grafie materiału. Poniższe typy plików nie stanowią kompletnej listy akceptowanych typów plików, ale są standardem importowania zasobów obrazów rastrowych:

• .png

• .webp

• .jpg

W urządzeniu rozmowy dodaj materiały do tablicy Materiały rozmowy. Następnie węzeł Ustaw materiał musi być obecny w grafie rozmowy. Odwołania do materiałów znajdują się w grafie w powiązaniach.

Aby powiązać materiał z urządzeniem rozmowy, wykonaj następujące czynności:

1. W edytorze widżetów UI kliknij widżet obrazu w panelu Hierarchia.

   

2. Kliknij Powiązania widoku, aby otworzyć panel powiązań. Panel otwiera się z wierszem powiązania widżetu obrazu.

   

3. Kliknij przycisk +AddWidget, aby dodać widżet obrazu do panelu Powiązania widoku.

   

4. Kliknij ikonę edycji na widżecie obrazu w lewym polu, aby otworzyć opcje widżetu.

   

5. Wybierz kolejno Widżet obrazu > Pędzel > Wybierz. Spowoduje to dodanie wybieralnych powiązań pędzla do prawego pola.

   

6. Kliknij ikonę edycji w prawym polu, aby otworzyć opcje powiązania.

   

7. Wybierz Funkcja konwersji > Utwórz pędzel obrazu z materiału > Wybierz. To otwiera kolejne opcje pozwalające wskazać materiał, którego chcesz użyć w tym widżecie.

   

8. W slocie Materiał wybierz ikonę łącza, a następnie z menu wybierz Model widoku modalnego okna dialogowego w trybie kreatywnym > Materiał styl 01 > Wybierz.

   

9. W slocie Rozmiar obrazu wprowadź ten sam rozmiar, który został użyty w opcji Rozmiar obrazu widżetu obrazu w panelu Szczegóły.

   

Efektem końcowym jest materiał, który identyfikuje postać mówcy.

Tworzenie animacji interfejsu rozmowy

Materiału rozmowy możesz też użyć w animacji UI. Typ rozmowy w urządzeniu rozmowy musi być ustawiony na Pole lub Niestandardowa. Na grafie materiału można odwołać się do materiału rozmowy z poziomu urządzenia rozmowy po użyciu węzła Odtwórz animację rozmowy.

Aby powiązać ten węzeł rozmowy z widżetem UI, musisz użyć wartości Postęp w modelu widoku w celu połączenia z animacją UI utworzoną w Sequencerze.  Informacje na temat tego, jak animować materiał, znajdziesz w dokumencie Animowanie UI.