Keys and Curves

This document contains an overview of how to work with keys and curves within the Timeline editor in Blueprints.

This document contains an overview of how to work with keys and curves within the Timeline editor in Blueprints.

Choose your implementation method:

Blueprints

C++

A Curve defines a track of interpolated points to evaluate over a given range. Curves can be vectors, floats, and colors. Each track can have any number of keys that define a time and value. The data can be interpolated between these keys to calculate the value at any point during the Timeline.

Working with Keys and Curves

In this example, you will create a Curve Float that defines a curve of interpolated float points to evaluate over a given range.

  1. In the editor, Create a new Actor Blueprint that contains a Timeline Component.

  2. Double-click your timeline component to open the Timeline Editor.

  3. Click the Add Float Track button to add a CurveFloat to your Timeline Component.

image alt text

Adding Keys

Keys are added by holding the Shift key and clicking on the gray bar, or by right clicking on the gray bar and selecting the action Add Key To CurveFloat from the drop down menu.

image alt text

Editing Keys

The time and value of the key can be set by clicking the key and entering the values into the time and value fields near the top of the track.

image alt text

Deleting Keys

Selected keys can be deleted by pressing the Delete key on the keyboard.

Moving Keys

To move a key along the timeline, select the key, then drag it. Multiple keys can be selected using the Ctrl key. Dragging horizontally will update the Time value of the key, while dragging vertically will update the Value.

Key Interpolation

By right-clicking a key, a drop down menu will appear for you to choose the interpolation type for that key.

image alt text

Key interpolation only affects the curve between the key you interpolate for and the next key after that. For example, with all other keys set to Linear, and the center key set to Cubic-Auto, the track will look similar to the image below.

image alt text

Available interpolation types are:

  • Auto

    image alt text

  • User

    image alt text

  • Break

    image alt text

  • Linear

    image alt text

  • Constant

    image alt text

External Curves

To the left of the main key area is a field where you can add an external curve asset from the Content Browser to that track.

image alt text

External Curve Icon

Description

image alt text

Use the curve selected in the Content Browser for this track.

image alt text

Browse in the Content Browser to select a curve for this track.

image alt text

Convert an imported external curve to an internal curve so that keys and curves can be edited.

You can also right-click any curve (with at least one key selected) and choose Create External Curve. This brings up a context window in which you can edit the path for where the curve asset will be saved. In doing this, you can then use this curve again on other timelines.

image alt text

A Curve (UCurveBase) defines a track of interpolated points to evaluate over a given range. Curves can be vectors, floats, and colors. Each track can have any number of keys that define a time and value. The data can be interpolated between these keys to calculate the value at any point during the Timeline.

Working with Keys and Curves

In this example, you will create a UCurveFloat that defines a curve of interpolated float points to evaluate over a given range.

To create and instantiate a UCurveFloat to a Timeline Component, follow the steps below:

  1. Navigate to the Content Browser, click C++ Classes folder, then click Add (+) button and select New C++ Class.

    01_AddCppClass.png

  2. Select Actor as a Parent Class.

    Click for full view.

  3. Name created Actor as ExampleTimelineComponent.

    Click for full view.

  4. When new Actor is created, Visual Studio automatically opens ExampleTimelineComponent.h and ExampleTimelineComponent.cpp files. Navigate to the ExampleTimelineComponent.h file and add the following to the #include section:

    ExampleTimelineComponent.h

        #include "Components/TimelineComponent.h"
  5. Next, in the ExampleTimelineComponent class definition, add the following code:

    ExampleTimelineComponent.h

        protected:
    
            UPROPERTY(EditAnywhere, BlueprintReadWrite)
            UTimelineComponent* ExampleTimelineComp;
    
        public:
    
            UPROPERTY(EditAnywhere)
            UCurveFloat* ExampleTimelineCurve;
  6. Compile your code.

  7. Navigate to the Content Browser, select Add (+) > Miscellaneous > Curve.

    04_AddCurveAsset.png

  8. Select CurveFloat and name it ExampleFloatTrack.

    05_ParentClassFloatCurve.png

  9. In Content Browser navigate to the folder with your ExampleTimelineComponent class, right click it and select Create Blueprint Class based on ExampleTimelineComponent. Name it BP_ExampleTimelineComponent.

    06_CreateBPBasedOnCpp.png

  10. Open the BP_ExampleTimelineComponent class defaults, navigate to the Detail panel and assign your Example Timeline Curve with your ExampleFloatTrack.

    07_SelectExampleFloatTrack.png

  11. Double-click your Example Float Track from the Content Browser to open the Timeline Editor.

Adding Keys

Keys are added by pressing the Enter key, or by right clicking on the gray bar and selecting the action Add Key from the context menu.

08_AddKeytoCurve.png

Editing Keys

The time and value of the key can be set by clicking the key and entering the values into the time and value fields near the top of the track.

09_SetFloat.png

Deleting Keys

Selected keys can be deleted by pressing the Delete key on the keyboard, or by right clicking on the key you want to delete and selecting the action Delete from the context menu.

Moving Keys

To move a key along the timeline, select the key, then drag it. Multiple keys can be selected using the Ctrl key. Dragging horizontally will update the Time value of the key, while dragging vertically will update the Value.

MovingKeysCpp.gif

Key Interpolation

By right-clicking a key, a context menu menu appears to choose the interpolation type for selected key.

10_InterpolationOptions.png

Key interpolation only affects the curve between the key you interpolate for and the next key after that. For example, with all other keys set to Linear, and the center key set to Cubic-Auto, the track will look similar to the image below.

11_InterpolationExample.png

Available interpolation types are:

  • Auto

    12_AutoInterpolation.png

  • User

    13_UserInterpolation.png

  • Break

    14_BreakInterpolation.png

  • Linear

    15_LinearInterpolation.png

  • Constant

    16_ConstantInterpolation.png

Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Cancel