Creating Timelines

This document contains an overview of how to create Timeline nodes in Blueprints and C++.

Windows
MacOS
Linux

Choose your implementation method:

Blueprints

C++

Creating Timelines

You can create your own Timeline Component in an Actor Blueprint by following these steps.

  1. From the Content Browser, select Add/Import > Blueprint Class and create a new Actor Blueprint named BP_TimelineActor. The Pick Parent Class dialog appears.

    image alt text

  2. In the class defaults, right-click on the Event Graph, to display the Blueprint Context Menu, and select Add Timeline.

    image alt text

A new Timeline node appears on the Event Graph.

image alt text

When a Timeline is added to your Blueprint class, you will be able to see it listed in the My Blueprint tab.

image alt text

Timeline Variables

Once you have created a Timeline, you will notice it become available as a variable in the My Blueprint tab. This is done to provide a reference to the Timeline component, and is useful when utilizing the Timeline nodes. These nodes exist to allow access to certain features of a Timeline, such as its play rate.

image alt text

In this example, we are using the Get Timeline 0 variable to query the current Play Rate value of that timeline.

image alt text

A wide variety of such nodes exist, providing the capabilities to query values and control behavior of your Timeline nodes. For a complete list of the available Timeline nodes and their functionality, see the Timeline Nodes page.

Creating a Timeline Event

Timeline Events provide functionality to a Timeline Component to handle your own custom events or functions. Follow the steps below for an example on how to implement your own event.

  1. Open BP_TimelineActor, then select and drag the execution pin off of Begin play and connect it to the Play execution pin of your Timeline Component.

    image alt text

  2. Next, select and drag off the Finished execution pin and create a new print string node with the string "Timeline Finished".

  3. Compile and Save, then press PIE.

    image alt text

    After a default Timeline length of 5 seconds, The text "Timeline Finished" will appear on the top left corner of the viewport.

Renaming Timelines

When using multiple Timelines in your Blueprints, it is important to name each Timeline accordingly. By default, all Timelines are named "Timeline_n" where n is a serialized number at the end. You can rename a Timeline by right-clicking it within the Graph tab or in the My Blueprint tab and selecting Rename.

image alt text

image alt text

Opening the Timeline Editor

Creating a timeline may not be useful unless you set it up with something to perform. For more information on editing Timelines, please see the Timeline Editing page.

Creating Timelines

You can create and instantiate your own Timeline Component in an Actor class by following the steps below.

  1. Navigate to your C++ Classes folder and right-click on the content browser window. From the drop down menu select New C++ class.

  2. Create a new Actor class named Timeline Actor.

    ClassWizard.png

Navigate to your TimelineActor.h file. You will need to include the following Timeline Component library to utillize its functionality.

include "Components/TimelineComponent.h

Inside the TimelineActor class defintion, implement the following class declaration:

protected:
    UPROPERTY(EditAnywhere, BlueprintReadWrite)
    UTimelineComponent* ExampleTimelineComp;

In this code sample, we utilize the Property Specifier Tags, EditAnywhere, and BlueprintReadWrite.

  1. Instantiate your Timeline Component using the default suboject template, then add the following code to your TimelineActor constructor ATimelineActor::ATimelineActor:

    ExampleTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("TimelineComponent"));
  2. From the Unreal Editor, select Compile to hot reload your code.

    HotReloadCompile.png

  3. From the C++ classes folder, right-click on your TimelineActor and create a Blueprint based on your TimelineActor class. Give it the name Bp_TimelineActor.

    BpTimelineActor.png

Once you have created your TimelineActor Blueprint, You can view the Class Defaults. From the Components tab, you should see your example Timeline Component.

ClassDefaults.png

Timeline Variables

When you create a Timeline Component in C++ using UProperty Specifiers, it will become available as a variable in your Components tab. This may be useful for designers who would like to continue to make iterations to your TimelineComponent via Blueprint Scripting.

ExamplePlayRate.png

In the image above, we use our native c++ Timeline Variable to get the Current Play Rate value of the Timeline in Blueprint.

For a complete list of the available Blueprint Timeline nodes and their functionality please see the Timeline nodes page.

Creating a FTimeLineEvent

Timeline Events (FOnTimelineEvent) are Dynamic Delegates that provide functionality to a Timeline Component to handle an Event. Follow the steps below to create your own FTimeLineEvent to be bound to your Timeline Component's finished functionality.

  1. Begin by navigating to your TimelineActor.h file, and declaring the following code in your class definition:

    protected:
        //Delegate signature for the function which will handle our Finished event.
        FOnTimelineEvent TimelineFinishedEvent;
    
    UFUNCTION()
    void TimelineFinishedFunction();
  2. Next, implement the following code for your TimelineFinishedFunction in your TimelineActor.cpp:

    UE_LOG(LogTemp, Warning, TEXT("Finished Event Called."));
  3. Navigate to your void ATimelineActor::BeginPlay() method, and implement the following code:

    Super::BeginPlay();

    You have now successfully bound your TimelineFinished Event to your custom TimelineFinished function.

  4. Finally, compile your code in the editor, and drag an instance of your Bp_TimelineActor into the Level. Press Play In Editor (PIE). You should see the following message in the Output log window:

    OutputMessage.png

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