2. Poruszanie rekwizytami przy użyciu animacji

Rekwizytami w UEFN można poruszać na kilka sposobów. Możesz użyć funkcji, takich jak TeleportTo[] lub MoveTo(), aby bezpośrednio modyfikować przekształcenie, lub skorzystać z innego urządzenia, takiego jak przenośnik rekwizytów, aby poruszać rekwizytem wzdłuż zaprogramowanej ścieżki. Istnieje też inna przydatna opcja, czyli animacje.

Każdy rekwizyt trybu kreatywnego ma kontroler play_animation_controller, którego można używać do odtwarzania animacji danego rekwizytu. W porównaniu z ruchem przekształcenia rekwizytu animacje mają kilka zalet. Animacje zwykle charakteryzują się płynniejszym ruchem niż w przypadku poruszania obiektami za pomocą MoveTo() lub TeleportTo(), ponieważ unikają problemu z opóźnieniem sygnału sieciowego występującego przy wywoływaniu tych funkcji co każde tyknięcie gry. Ponadto animacje mają bardziej spójne kolizje z graczami i innymi obiektami, a twórca ma większą kontrolę nad tym, gdzie i w jaki sposób obiekt się porusza, w porównaniu z urządzeniem przenośnika rekwizytów. Możesz odtwarzać animacje w pętli lub odtwarzać je do przodu i wstecz przy użyciu trybu ping-pongowego.

Animacje umożliwiają też wybranie typu interpolacji. Typ interpolacji decyduje o typie łagodzenia lub krzywej animacji, według której podąża animacja. Na przykład typ interpolacji liniowej odtwarza animację ze stałą szybkością, natomiast typ łagodzenia na początku rozpoczyna animację powoli i przyspiesza pod jej koniec. Wybierając dla animacji odpowiedni typ interpolacji, możesz określić konkretne punkty, w których rekwizyt ma zwolnić, przyspieszyć lub poruszać się liniowo.

Przełączając się między różnymi animacjami przeszkód, możesz, przy użyciu tych samych rekwizytów, utworzyć bogatą gamę różnych wyzwań stawianych graczom. W tej sekcji dowiesz się, jak wykorzystać to potężne narzędzie do tworzenia własnych animacji i wprawiania rekwizytów w ruch!

Konfigurowanie elementów sterujących animacji

Wykonaj poniższe kroki, aby skonfigurować elementy sterowania animacją dla rekwizytów:

1. Przy użyciu Eksploratora Verse utwórz nowy plik Verse o nazwie movement_behaviors. Będą w nim przechowywane funkcje narzędziowe potrzebne do animacji rekwizytów.

2. Dodaj instrukcje using { /Fortnite.com/Devices }, using { /Fortnite.com/Devices/CreativeAnimation } i using { /UnrealEngine.com/Temporary/SpatialMath } na początku pliku, aby zaimportować te moduły. Są one potrzebne, aby animować rekwizyt.

3. W movement_behaviors utwórz nowy typ wyliczeniowy (enum) o nazwie move_to_ease_type. Wartości w tym enum odpowiadają różnym typom łagodzenia animacji. Z każdym typem łagodzenia możesz się zapoznać w module InterpolationTypes.

   Verse

        # This file stores functions common to animating creative props using keyframes.
        # It also defines the move_to_ease_type enum to help in building animations.
        using { /Fortnite.com/Devices }
        using { /UnrealEngine.com/Temporary/SpatialMath }
        using { /Fortnite.com/Devices/CreativeAnimation }
   
        # Represents the different movement easing types.
        move_to_ease_type<public> := enum {Linear, Ease, EaseIn, EaseOut, EaseInOut}

   Copy full snippet(8 lines long)

4. Dodaj nowy alias typu vector3 o nazwie VectorOnes tworzący wektor vector3, którego współrzędne X, Y i Z są ustawione na wartość 1.0. Będziesz używać tego wektora później, aby usprawnić pewne obliczenia matematyczne, dlatego zdefiniowanie aliasu typu oznacza, że nie musisz wielokrotnie pisać vector3{X:=1.0, Y:=1.0, Z:=1.0}.

   Verse

        # Initializes a vector3 with all values set to 1.0.
        VectorOnes<public>:vector3 = vector3{X:=1.0, Y:=1.0, Z:=1.0}

   Copy full snippet(2 lines long)

5. Dodaj nową metodę GetCubicBezierForEaseType(), która przyjmuje move_to_ease_type i zwraca cubic_bezier_parameters.

   Verse

        # Return the cubic_bezier_parameters based on the given move_to_ease_type.
        GetCubicBezierForEaseType(EaseType:move_to_ease_type):cubic_bezier_parameters=
   

   Copy full snippet(2 lines long)

   Krzywa Beziera trzeciego stopnia składa się z czterech liczb, które definiują typ funkcji łagodzenia stosowany przez animację. Np. parametry krzywej łagodzenia na początku powodują, że animacja zwalnia na początku, a następnie przyspiesza. Parametry krzywej liniowej sprawiają, że animacja jest odtwarzana w stałym tempie. Możesz zdefiniować te wartości samodzielnie, aby utworzyć własne niestandardowe krzywe animacji. W tym przykładzie nie jest to potrzebne, ponieważ użyjesz wartości zdefiniowanych w module InterpolationTypes.

6. W GetCubicBezierForEaseType() w wyrażeniu case() pobierz cubic_bezier_parameters z modułu InterpolationTypes na podstawie move_to_ease_type. Na przykład EaseOut powinno zwracać InterpolationTypes.EaseOut, Linear powinno zwracać InterpolationTypes.Linear itd. Ukończona funkcja GetCubicBezierForEaseType() powinna wyglądać następująco:

   Verse

   # Return the cubic_bezier_parameters based on the given move_to_ease_type.     GetCubicBezierForEaseType(EaseType:move_to_ease_type):cubic_bezier_parameters=
            case (EaseType):
                move_to_ease_type.Linear => InterpolationTypes.Linear
                move_to_ease_type.Ease => InterpolationTypes.Ease
                move_to_ease_type.EaseIn => InterpolationTypes.EaseIn
                move_to_ease_type.EaseOut => InterpolationTypes.EaseOut
                move_to_ease_type.EaseInOut => InterpolationTypes.EaseInOut

   Copy full snippet(7 lines long)

7. Wróć do klasy movable_prop i dodaj nowy edytowalny typ wyliczeniowy move_to_ease_type o nazwie MoveEaseType. Jest to typ łagodzenia, który rekwizyt będzie stosował do swojej animacji.

   Verse

        # The type of animation easing to apply to the RootProp's movement. The easing type
        # changes the speed of the animation based on its animation curve.
        @editable {ToolTip := MoveEaseTypeTip}
        MoveEaseType:move_to_ease_type = move_to_ease_type.EaseInOut
   

   Copy full snippet(4 lines long)

Budowanie animacji przy użyciu klatek kluczowych

Aby zbudować animacje w kodzie, użyjesz klatek kluczowych. Animacje tworzy się z jednej lub wielu klatek kluczowych. Każda klatka kluczowa określa wartości obiektu w konkretnych punktach animacji. Tworząc animację przy użyciu klatek kluczowych, możesz określić wiele punktów, do których rekwizyt ma się poruszać, obracać, a nawet skalować.

Klatki kluczowe mają pięć wartości. DeltaLocation, DeltaRotation i DeltaScale określają zmiany każdej wartości, które rekwizyt wykonuje od początku do końca klatki kluczowej. Istnieje też Time, czyli czas trwania animacji (w sekundach), oraz Interpolation, czyli tryb interpolacji dla klatki kluczowej. Przykładowa klatka kluczowa może wyglądać następująco:

    # An example keyframe.
    KeyFrame := keyframe_delta:

        # The target position of the `creative_prop`. This is the difference between the starting and ending translation of the prop.
        DeltaLocation := EndTransform.Translation - StartTransform.Translation,

        # The target rotation for the `creative_prop` to rotate to.
        DeltaRotation := EndTransform.Rotation,

        # The target scale for the `creative_prop`. Scale is multiplicative to the starting Scale of the `creative_prop`

Wykonaj poniższe kroki, aby utworzyć animację przy użyciu klatek kluczowych:

1. Dodaj nową metodę rozszerzającą creative_prop o nazwie MoveToEase() do pliku movement_behaviors. Ta funkcja przyjmuje pozycję, obrót i skalę, do których ma się przemieścić rekwizyt, czas trwania animacji, typ łagodzenia ruchu i tryb animacji.

   Verse

        # Animate a creative_prop by constructing an animation from a single keyframe, and then playing that animation on the prop.
        # This method takes a Position, Rotation, and Scale for the prop to end at, the duration of the animation,
        # the type of easing to apply to the movement, and the animation mode of the animation.
        (CreativeProp:creative_prop).MoveToEase<public>(Position:vector3, Rotation:rotation, Scale:vector3, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=

   Copy full snippet(4 lines long)

2. W MoveToEase() pobierz kontroler animacji rekwizytu trybu kreatywnego za pomocą GetAnimationController[]. Kontroler animacji umożliwia odtwarzanie animacji na rekwizycie i ujawnia zdarzenie, na które będziesz później czekać.

   Verse

        (CreativeProp:creative_prop).MoveToEase<public>(Position:vector3, Rotation:rotation, Scale:vector3, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=
            # Get the animation controller for the CreativeProp to move.
            if (AnimController := CreativeProp.GetAnimationController[]):

   Copy full snippet(3 lines long)

3. Oblicz zmianę skali rekwizytu poprzez wywołanie ScaleMultiplicative. W tej sytuacji kwestia wartości Scale jest trochę bardziej skomplikowana. Skala jest proporcjonalna, dlatego skala przekształcenia końcowego musi być wielkością, o którą początkowe przekształcenie ma być przeskalowane, a nie wartością docelową skalowania. Jeśli na przykład skala przekształcenia początkowego to 1.2, a chcesz wykonać skalowanie do 1.5, musisz w praktyce wykonać skalowanie o 1.25, ponieważ 1.2 * 1.25 = 1.5. Końcowa wartość to VectorOnes plus różnica między nową skalą a starą skalą podzielona przez starą skalę. Potrzebujesz tej wartości, aby mieć pewność, że animacja będzie wykonywana poprawnie w przypadku zmiany jej rozmiaru w trakcie animacji.

   Verse

        # Calculate the multiplicative scale for the keyframe to scale to.
        ScaleMultiplicative:vector3 = VectorOnes + ((Scale - CreativeProp.GetTransform().Scale) / CreativeProp.GetTransform().Scale)
   

   Copy full snippet(2 lines long)

4. Każda animacja potrzebuje do działania tablicy klatek kluczowych. W tej funkcji używasz tylko jednej klatki kluczowej i rzutujesz ją na tablicę. Tablica będzie miała tylko jedną klatkę kluczową, dlatego rekwizyt wykona jeden ruch w postaci płynnego animacyjnego przejścia do nowej lokalizacji. Funkcja MoveToEase() będzie wywoływana w pętli, więc rekwizyt może kontynuować animację bez potrzeby określania wielu animacji jedna po drugiej.

   Zdefiniuj nową tablicę keyframe_delta o nazwie Keyframes. Ustaw tę tablicę tak, aby była równa nowej tablicy, a wewnątrz tej tablicy utwórz nową tablicę keyfram_delta.

   Verse

    # Build the keyframe array from a single keyframe_delta of the given values.
    Keyframes:[]keyframe_delta = array:
            keyframe_delta:
   

   Copy full snippet(3 lines long)

5. Wewnątrz definicji keyframe_delta zainicjuj każdą wartość potrzebną do utworzenia klatki kluczowej. Ustaw DeltaLocation na różnicę między nową wartością Position a translacją rekwizytu trybu kreatywnego. Ustaw DeltaRotation na Rotation, a DeltaScale na obliczoną wcześniej wartość ScaleMultiplicative. Ustaw Time na Duration i uzyskaj odpowiednią wartość Interpolation do ustawienia poprzez wywołanie GetCubicBezierForEaseType().

   Verse

        # Build the keyframe array from a single keyframe_delta of the given values.
        Keyframes:[]keyframe_delta = array:
            keyframe_delta:
                DeltaLocation := Position - CreativeProp.GetTransform().Translation,
                DeltaRotation := Rotation,
                DeltaScale := ScaleMultiplicative,
                Time := Duration,
                Interpolation := GetCubicBezierForEaseType(EaseType)
   

   Copy full snippet(8 lines long)

6. Po utworzeniu tablicy Keyframes ustaw ją jako animację kontrolera animacji przy użyciu SetAnimation() i poprzez przekazanie AnimationMode. Odtwórz animację przy użyciu Play(), a następnie za pomocą Await() czekaj na MovementCompletedEvent. Ukończona metoda rozszerzająca MoveToEase() powinna wyglądać następująco:

   Verse

        # Animate a creative_prop by constructing an animation from a single keyframe, and then playing that animation on the prop.
        # This method takes a Position, Rotation, and Scale for the prop to end at, the duration of the animation,
        # the type of easing to apply to the movement, and the animation mode of the animation.
        (CreativeProp:creative_prop).MoveToEase<public>(Position:vector3, Rotation:rotation, Scale:vector3, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=
   
            # Get the animation controller for the CreativeProp to move.
            if (AnimController := CreativeProp.GetAnimationController[]):
   
                # Calculate the multiplicative scale for the keyframe to scale to.
                ScaleMultiplicative:vector3 = VectorOnes + ((Scale - CreativeProp.GetTransform().Scale) / CreativeProp.GetTransform().Scale)
   
   Expand code Copy full snippet(24 lines long)

Przeciążanie funkcji

Właśnie napisana funkcja MoveToEase() jest przydatna, ale przekazywanie do niej tak wielu zmiennych przy każdym wywołaniu może być skomplikowane. Mogą się zdarzyć sytuacje, w których chcesz zmienić tylko jedną część przekształcenia rekwizytu, np. translację lub obrót. W takim przypadku warto mieć do dyspozycji prostszą funkcję do wywołania.

Aby rozwiązać ten problem, możesz wykorzystać przeciążanie funkcji. Dzięki przeciążaniu funkcji MoveToEase() możesz skonfigurować wiele metod o tej samej nazwie, które umożliwią obsługiwanie różnych typów danych wejściowych. Wykonaj poniższe kroki, aby skonfigurować przeciążone funkcje.

1. W pliku movement_behaviors przeciąż funkcję MoveToEase() poprzez utworzenie kolejnej metody rozszerzającej o tej samej nazwie, ale z innymi danymi wejściowymi. Ta funkcja MoveToEase() zaktualizuje tylko translację rekwizytu, a obrót i skalę pozostawi bez zmian. To oznacza, że potrzebujesz jedynie argumentów Position, Duration, EaseType i AnimationMode.

   Verse

        # An overload of MoveToEase() that changes the position of the prop while keeping the rotation and scale the same.
        (CreativeProp:creative_prop).MoveToEase<public>(Position:vector3, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=

   Copy full snippet(2 lines long)

2. W nowej funkcji MoveToEase() wywołaj oryginalną funkcję MoveToEase(), przekazując wszystkie dane wejściowe oraz IdentityRotation() i VectorOnes jako Scale. Funkcja IdentityRotation() zwraca obrót z każdą wartością ustawioną na 0, czyli (0,0,0). W tym miejscu trzeba użyć funkcji IdentityRotation(), ponieważ nie chcesz dodawać obrotu do animacji. Przeciążona funkcja MoveToEase() powinna wyglądać następująco:

   Verse

        # An overload of MoveToEase() that changes the position of the prop while keeping the rotation and scale the same.
        (CreativeProp:creative_prop).MoveToEase<public>(Position:vector3, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=
            CreativeProp.MoveToEase(Position, IdentityRotation(), VectorOnes, Duration, EaseType, AnimationMode)

   Copy full snippet(3 lines long)

3. Powtórz tę procedurę, aby utworzyć inną przeciążoną metodę, która zmienia tylko obrót (nie zmienia translacji ani skali). Nowa przeciążona metoda powinna wyglądać następująco:

   Verse

        # An overload of MoveToEase() that changes the rotation of the prop while keeping the position and scale the same.
        (CreativeProp:creative_prop).MoveToEase<public>(Rotation:rotation, Duration:float, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=
            CreativeProp.MoveToEase(CreativeProp.GetTransform().Translation, Rotation, VectorOnes, Duration, EaseType, AnimationMode)

   Copy full snippet(3 lines long)

4. Powtórz ponownie, aby utworzyć metodę, która zmienia tylko skalę (nie zmienia translacji ani obrotu). Skoro jednak translation i scale są wektorem vector3, wynikowa funkcja miałaby tę samą sygnaturę jak przeciążenie utworzone dla translacji, a to spowodowałoby wystąpienie błędu. Można to rozwiązać, zmieniając kolejność parametrów funkcji. Zamień miejscami pozycję Duration i Scale, aby uzyskać przeciążoną funkcję. Przeciążona metoda powinna wyglądać następująco:

   Verse

        # An overload of MoveToEase() that changes the position and scale of the prop while keeping the rotation the same.
        (CreativeProp:creative_prop).MoveToEase<public>(Duration:float, Scale:vector3, EaseType:move_to_ease_type, AnimationMode:animation_mode)<suspends>:void=
            CreativeProp.MoveToEase(CreativeProp.GetTransform().Translation, IdentityRotation(), Scale, Duration, EaseType, AnimationMode)

   Copy full snippet(3 lines long)

5. Warto mieć wersję funkcji MoveToEase(), która może obsługiwać wiele klatek kluczowych. Taki rezultat można uzyskać, konfigurując zawczasu klatki kluczowe i przekazując je wszystkie do funkcji MoveToEase(). Dzięki temu funkcja musi jedynie ustawić i odtworzyć animację na rekwizycie Trybu kreatywnego. Dodaj nowe przeciążenie funkcji MoveToEase(), która jako dane wejściowe przyjmuje tablicę klatek kluczowych i tryb animacji.

   Verse

        # An overload of MoveToEase() that takes a pre-built array of keyframes and plays an animation.
        (CreativeProp:creative_prop).MoveToEase<public>(Keyframes:[]keyframe_delta, AnimationMode:animation_mode)<suspends>:void=
            if (AnimController := CreativeProp.GetAnimationController[]):
                AnimController.SetAnimation(Keyframes, ?Mode:=AnimationMode)
                AnimController.Play()
                AnimController.MovementCompleteEvent.Await()

   Copy full snippet(6 lines long)

6. Zapisz kod i go skompiluj.

Po skonfigurowaniu metod czas wprawić wszystko w ruch! W kolejnej sekcji wykonasz translację rekwizytów, aby utworzyć ruchome platformy!

• 

  3. Rekwizyty translacji

  Użyj translacji w Verse, aby skonfigurować przeszkody na torze Fall Guys.

Complete Code

Oto kompletny kod utworzony w tej sekcji:

movement_behaviors.verse

# This file stores functions common to animating creative props using keyframes.
# It also defines the move_to_ease_type enum to help in building animations.
using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/SpatialMath }
using { /Fortnite.com/Characters}
using { /Fortnite.com/Devices/CreativeAnimation }

# Represents the different movement easing types.
move_to_ease_type<public> := enum {Linear, Ease, EaseIn, EaseOut, EaseInOut}