Animate your first Actor

On this page we are going to show you how you can animate your first Actor using Animate. This basic tutorial will cover animating position, rotation & scale of an actor.

For more advanced examples, check out our other examples in the sidebar.

Understanding curves

Animate uses Curve Vectors to store animation data for positions, rotations and scale data.

A curve vector consists of keyframes, which are a pair of time and data information (e.g. "at 2 seconds" and "5.5"), and three curves, one curve for X, Y and Z.

Depending on what you're animating, X, Y and Z mean different things.

Location & Scale Vector Curves

In case of a Location & Scale Vector Curves, the X, Y and Z curves correspond to the same three axis that you can see in your viewport when moving objects or the one at the bottom left of the viewport.

Rotation Vector Curves

In case of a Rotation Vector Curve, the same three curves now correspond to Pitch, Yaw and Roll. See the following image for reference.

Feel free to print it out and stick it under your monitor. I do the same.

Creating a Curve Vector

In this example we'll cover the creation of three curve vectors for our Animation. Our actor should float up and down, whilst rotating and becoming bigger and smaller.

To get started, create a vector curve by right-clicking in your Content Browser.

Select Miscellaneous - Curve and in the class prompt CurveVector. This will be our location curve so we'll name it VC_MyActor_Location.

Save time by duplicating your new Vector Curve twice and name them VC_MyActor_Rotation and VC_MyActor_Scale.

Now that our Vector Curve was created, it's time to edit it. To begin, double-click VC_MyActor_Location.

Adjusting the editor view for easier workflow

To make the editing of curve vectors a bit easier, we recommend these two methods of setting up your editor when working with curves.

Stacked View Mode

Using the Stacked View Mode you can see all three curves at once. This is especially useful if your curves overlap a lot.

Unpinning curves

Using the pin icon next to each curve you can hide individual curves. This is especially useful if you only plan to animate a single axis.

Now, to animate our actor to up and down we need three keyframes for our curve. Let's start by adding a keyframe for the Z-axis by right-clicking at the 0, 0 position and selecting Add Key.

You can use the middle-mouse button to quickly add a new key.

Now, to make our actor move up 100 units within the next second we'll add another keyframe at Time: 1. To do, we can either click at the right position on the curve grid or create a new key-frame anywhere and then manually adjust the values.

As it can become increasingly difficult to precisely click within the grid, we'll explain the second method.

Right-click (or Middle-Mouse-click) anywhere on the blue line to add a new keyframe and then change the value of the first textbox at the top-left to 1 and the value of the second textbox to 100.

Re-scaling the grid

Often, after creating a new key-frame which value is outside of the currently visible grid, you'll see the curve going outside of the window. To adjust the scaling of the grid to match and include all of your current keyframes, press F or the Zoom to Fit button on the top-left.

If that does not work, you can also try switching to Stacked View Mode and then back to Absolute View Mode.

To make our actor move down to it's start position and 100 units down we'll create one more keyframe at Time: 2 and value -100.

And atlast, another keyframe at Time: 3 and value 0 to bring it back to it's initial position.

If your curve starts and ends with the same value, it will loop seamless.

Your curve should look like this now:

This curve can now be used to animate an actor to move up, back to start, down and back to start again with linear movement.

If you would like more control on how the keyframes are "apporached" or smoother movement, you can select all key-frames by holding left-click and dragging a rectangle over them, right-click, and select Auto or press 1 on your keyboard.

Adding additional curves

Repeat the same process for the scale and rotation curve.

For the rotation curve, we'll just have it spin on its own axis and for scale we'll have it double its size at the highest point and half its size at the lowest.

Rotation Curve

For the rotation curve, we create a new Vector Curve with 3 keyframes:

1. Time: 0, Value: 0

2. Time: 3, Value: 360 (Auto)

3. Time: 3, Value: 0 (Constant)

In this case we create two keyframes at the same position, with one being a constant 0. This ensures that when the actor has done a full rotation, and restarts the rotation loop, it does not snap back from 360 down 0, causing it to do a sudden, reverse rotation.

Scale Curve

For the scale curve, we'll create a Vector curve with 5 keyframes:

1. Time: 0, Value: 1

2. Time: 0.75, Value: 2

3. Time: 1.50, Value: 1

4. Time: 2.25, Value: 0.5

5. Time: 3: Value: 1

As scale should translate the same across axis for the scale, we can copy the curve and paste it on the other curves.

To save you some time, you can also just copy the following text and hit CTRL + V inside the editor

Begin Object Class=/Script/CurveEditor.CurveEditorCopyBuffer Name="CurveEditorCopyBuffer_6"
   Begin Object Class=/Script/CurveEditor.CurveEditorCopyableCurveKeys Name="CurveEditorCopyableCurveKeys_0"
      KeyPositions(0)=(OutputValue=1.000000)
      KeyPositions(1)=(InputValue=0.750000,OutputValue=2.000000)
      KeyPositions(2)=(InputValue=2.250000,OutputValue=0.500000)
      KeyPositions(3)=(InputValue=3.000000,OutputValue=1.000000)
      KeyPositions(4)=(InputValue=1.500000,OutputValue=1.000000)
      KeyAttributes(0)=(bHasInterpMode=True)
      KeyAttributes(1)=(bHasInterpMode=True)
      KeyAttributes(2)=(bHasInterpMode=True)
      KeyAttributes(3)=(bHasInterpMode=True)
      KeyAttributes(4)=(bHasInterpMode=True)
      ShortDisplayName="Z"
      LongDisplayName="Z"
   End Object
   Curves(0)=CurveEditorCopyableCurveKeys'"CurveEditorCopyableCurveKeys_0"'
   Begin Object Class=/Script/CurveEditor.CurveEditorCopyableCurveKeys Name="CurveEditorCopyableCurveKeys_1"
      KeyPositions(0)=(OutputValue=1.000000)
      KeyPositions(1)=(InputValue=0.750000,OutputValue=2.000000)
      KeyPositions(2)=(InputValue=1.500000,OutputValue=1.000000)
      KeyPositions(3)=(InputValue=2.250000,OutputValue=0.500000)
      KeyPositions(4)=(InputValue=3.000000,OutputValue=1.000000)
      KeyAttributes(0)=(bHasInterpMode=True)
      KeyAttributes(1)=(bHasInterpMode=True)
      KeyAttributes(2)=(bHasInterpMode=True)
      KeyAttributes(3)=(bHasInterpMode=True)
      KeyAttributes(4)=(bHasInterpMode=True)
      ShortDisplayName="Y"
      LongDisplayName="Y"
   End Object
   Curves(1)=CurveEditorCopyableCurveKeys'"CurveEditorCopyableCurveKeys_1"'
   Begin Object Class=/Script/CurveEditor.CurveEditorCopyableCurveKeys Name="CurveEditorCopyableCurveKeys_2"
      KeyPositions(0)=(OutputValue=1.000000)
      KeyPositions(1)=(InputValue=0.750000,OutputValue=2.000000)
      KeyPositions(2)=(InputValue=1.500000,OutputValue=1.000000)
      KeyPositions(3)=(InputValue=2.250000,OutputValue=0.500000)
      KeyPositions(4)=(InputValue=3.000000,OutputValue=1.000000)
      KeyAttributes(0)=(bHasInterpMode=True)
      KeyAttributes(1)=(bHasInterpMode=True)
      KeyAttributes(2)=(bHasInterpMode=True)
      KeyAttributes(3)=(bHasInterpMode=True)
      KeyAttributes(4)=(bHasInterpMode=True)
      ShortDisplayName="X"
      LongDisplayName="X"
   End Object
   Curves(2)=CurveEditorCopyableCurveKeys'"CurveEditorCopyableCurveKeys_2"'
End Object

Creating the Blueprint

Now that all our curves were created, we can create our blueprint!

Since this uses Location, Rotation & Scale we can adapt one of the existing examples to implement our actor.

If you have a custom use-case for your animation that is not covered by our examples, duplicate an existing interpreter and implement your desired behaviour in it's OnValueUpdated event call.

Navigate to the Cube example under Plugins/Animate Content/Blueprints/Examples/Cube, right-click it and select Create Child Blueprint Class.

In this sample, we'll name it BP_SampleActor. Open it by double-clicking and navigate to the Class Defaults.

In the Details tab, find the three curves and replace the selections with the three curves we've created earlier.

---

That's it! Drag the blueprint into your scene and start a session it should automatically run!