Animowanie UI

Za pomocą edytora Sequencer w UMG można animować widżety. Animowanie widżetów odbywa się na podstawie wartości wprowadzonych w parametrze materiału.

Konfigurowanie widżetu

W widżecie wykorzystano widżet Postępometr z przykładu w artykule Ustawianie parametrów materiału w UMG.

Jeśli nie masz jeszcze widżetu Postępometru, utwórz go. Następnie wykonaj następujące czynności:

1. Dodaj Blok tekstowy z informacją +1 na wierzchu istniejącego widżetu Postępometr. Wskazuje on, że postępometr likwidacji zwiększa wartość w zależności od liczby zlikwidowanych zombie.

   

2. W obszarze Renderowanie > Nieprzezroczystość renderowania w przypadku opcji Nieprzezroczystość renderowania ustaw wartość 0.0 dla tego bloku tekstowego.

   

3. Widżet jest gotowy do animacji.

Konfigurowanie animacji

Aby dodać animację do UI, otwórz edytor Sequencer pod pozycją Graf zdarzeń w celu animowania ikony i napisu „+1”. Następnie skonfigurujesz animację w Sequencerze.

W tym przykładzie, gdy postęp na Postępometrze gracza się zmienia, pojawia się ikona i wyświetlany jest tekst "+1", jak na poniższym pliku gif.

1. Otwórz okno Animacja. W tym celu wybierz kolejno Okno > Animacje.

   

2. Kliknij +Animacja i nadaj animacji nazwę OnIncrement.

   

Animowanie widoczności widżetu

Aby animować UI, musisz wskazać widżet do animowania, a następnie animować materiał lub teksturę powiązane z tym widżetem w Sequencerze w oknie animacji. Aby rozpocząć animację, wybierz IncrementText (+1).

1. Wybierz OnIncrement, wybierz Tekst +1, a następnie wybierz kolejno +Dodaj > Tekst przyrostu.

   

2. Wybierz ikonę +plus na ścieżce IncrementText i wybierz Nieprzezroczystość renderowania. Pozwala to śledzić nieprzezroczystość na osi czasu animacji.

   

3. Ustaw klatkę kluczową na początek animacji. W ten sposób określisz, w którym miejscu tekst ma zacząć się pojawiać i znikać.

   

4. W przypadku opcji Nieprzezroczystość renderowania ustaw:

   1. 1.0 w 0.25 sekundy

   2. 0.0 w 0.50 sekundy

   

5. Teraz masz animację, która powoduje pojawianie się tekstu i jego znikanie za każdym razem, gdy gracz zaliczy likwidację.

   

Animowanie pozycji widżetu

Dodaj animację do pozycji widżetu tekstowego, aby tekst, gdy jest widoczny, przesuwał się w górę, zanim zniknie.

1. Kliknij ikonę +plus w IncrementText i wybierz Przekształcenie.

   

2. Rozwiń Przekształcenie > Translacja i w przypadku Y ustaw wartość, o jaką tekst +1 ma zostać przesunięty w górę, gdy jest widoczny. W tym przykładzie ustawione klatki kluczowe translacji Y dla tekstu są następujące:

   1. 0.0 w 0.0 s

   2. -20.0 w 0.25 s

   3. -20.0 w 0.50 s

   

   Pamiętaj, aby ustawić klatki kluczowe dla każdego ruchu tekstu.

Teraz tekst przesuwa się w górę, gdy się pojawia.

Animowanie skali widżetu

Zwiększ rozmiar animowanego tekstu +1 w miarę jak się porusza, aby przyciągnąć uwagę do liczby likwidacji poprzez animację ustawień skali widżetu. Ta animacja daje złudzenie "wyskakiwania" z głębi ekranu.

1. Rozwiń kolejno IncrementText > Przekształcenie > Skala. W obszarze Skala pojawią się wartości X i Y.

   

2. Ustaw skalę X i skalę Y jako klatki kluczowe na osi czasu OnIncrement. W tym przykładzie klatki kluczowe Skala zostały ustawione w następujący sposób:

   1. 0.0 w 0.0 s

   2. 2.0 w 0.10 s

   3. 0.0 w 0.50 s

Teraz tekst +1 wyskakuje z zastosowaniem dramatycznego efektu, gdy animacja jest odtwarzana.

Animowanie parametru materiału pędzla obrazu

Aby ikona w materiale rozwijała się wraz z postępem Postępometru, przejdź do materiału z poziomu Sequencera.

1. Wybierz Obraz TrackerMaterial, a następnie kliknij +Dodaj > TrackerMaterial w animacji OnIncrement.

   

2. Kliknij ikonę +plus na ścieżce TrackerMaterial i wybierz Materiał Brush.Brush. Spowoduje to dodanie ścieżki materiału do właściwości Materiał Brush.Brush.

   

3. Kliknij ikonę +plus na nowej ścieżce Brush.Brush.Material, a następnie wybierz IconScaleX i IconScaleY.

   

   Rozwiń IconScaleX i IconScaleY. Możesz z łatwością manipulować tymi parametrami w Sequencerze podczas odtwarzania animacji OnIncrement. Korzystając z tych ustawień, można animować skalowanie ikony w jedną i drugą stronę.

4. W przypadku opcji IconScaleX i IconScaleY ustaw:

   1. 0.7 w 0.00

   2. 1.0 w 0.25

   3. 0.7 w 0.00

   

Teraz animacja wykorzystuje parametry materiału z TrackerMaterial, aby animować ikonę, jak na poniższym obrazie GIF.

Dodawanie warunku animacji

Teraz animacja jest gotowa do użycia, więc powiąż ją z wartością rozgrywki, aby odtwarzała animację, gdy wartość rozgrywki ulegnie zmianie.

1. Otwórz okno Powiązania widoku. W tym celu wybierz kolejno Okno > Powiązania widoku.

   

2. W oknie Powiązania widoku wybierz +Dodaj warunek.

   

   Pole z lewej strony służy do ustawiania wartości rozgrywki, której zmiany mają być śledzone w celu odtworzenia animacji wybranej z prawej strony. Obecnie funkcja +Dodaj warunek obsługuje tylko wartości float (wartości zmiennopozycyjne) i int (liczby całkowite).

   

3. Wybierz pole z lewej strony, a następnie wybierz kolejno MVVM_UEFN_Tracker > Wartość. Pozwoli to śledzić postępy na postępometrze, ponieważ odtwarza animację za każdym razem, gdy wzrasta wartość postępometru.

   

4. Kliknij środkowe menu rozwijane i wybierz Większe niż (>).

   2 pola pośrodku to warunki, które mają zostać spełnione, aby nastąpiło odtworzenie animacji. Za każdym razem, gdy wartość się zmienia, następuje sprawdzenie, czy warunek został spełniony, a jeśli tak, odtwarzana jest animacja.

   W przypadku ustawienia opcji Większe niż (>) 0.0 UI będzie odtwarzać animację za każdym razem, gdy ta wartość ulegnie zmianie.

   

5. Wybierz pole z prawej strony, a następnie wybierz kolejno WBP_{YourWidgetName} > Kolejkuj odtwarzanie animacji. Gdy ta wartość spełnia warunek, wykonywana jest czynność zdefiniowana w polu z prawej strony. W tym przypadku mamy na myśli odtworzenie animacji OnIncrement utworzonej powyżej.

   

   Lista opcji dotyczących animacji, którą chcesz odtworzyć, pojawi się w obszarze Powiązania widoku.

   • Wejście – animacja = Odtwórz

   • Czas rozpoczęcia = Wybierz godzinę

   • Liczba pętli do odtworzenia = Liczba pętli animacji

   • Tryb odtwarzania = Do przodu, Do tyłu lub Ping-pong

   • Szybkość odtwarzania = Przyspieszenie lub spowolnienie animacji

   • Przywróć stan = Przywraca stan domyślny animacji

   

6. Kliknij ikonę łącza obok pozycji InAnimation, a następnie wybierz kolejno WBP_{YourWidgetName} > OnIncrement > Wybierz.

   

Teraz animacja jest skonfigurowana do odtwarzania za każdym razem, gdy wartość na Postępometrze będzie ulegać zmianie.

Efekt końcowy

Gdy gracze likwidują wrogów lub postacie NPC, UI pokazuje postęp likwidacji w postaci pojawiającej się ikony oraz tekstu +1, który pojawia się, wyskakując, po czym znika.