타임라인 만들기

블루프린트와 C++로 타임라인 노드를 만드는 방법을 안내합니다.

Choose your operating system:

Windows

macOS

Linux

구현 방법 선택

블루프린트

C++

타임라인 생성하기

아래에 나와 있는 단계를 따르면 액터 블루프린트에서 나만의 타임라인 컴포넌트 를 만들 수 있습니다.

  1. 콘텐츠 브라우저 에서 + 추가(Add) > 블루프린트 클래스(Blueprint Class) 를 선택하고 이름이 BP_TimelineActor 인 새 액터 블루프린트를 생성합니다. 부모 클래스 선택(Pick Parent Class) 대화창이 나타납니다.

    ![image alt text](01_AddBPActorClass.png)

  2. 클래스 디폴트(Class Defaults) 에서 이벤트 그래프 를 우클릭하여 블루프린트 컨텍스트 메뉴(Blueprint Context Menu) 를 표시한 후 타임라인 추가(Add Timeline) 를 검색하여 선택합니다.

    ![image alt text](02_AddTimelineNode.png)

이벤트 그래프에 새로운 타임라인 노드가 나타납니다.

![image alt text](03_TimelineNode.png)

블루프린트 클래스에 추가된 타임라인은 내 블루프린트(My Blueprint) 탭의 목록에서 확인할 수 있습니다.

![image alt text](04_TimeLineComponent.png)

타임라인 변수

생성한 타임라인은 내 블루프린트(My Blueprint) 탭에서 변수로 사용할 수 있습니다. 이는 타임라인 컴포넌트에 레퍼런스를 제공하기 위한 것으로, 타임라인 노드를 활용할 때 유용합니다. 이러한 노드는 재생 속도와 같은 타임라인의 특정 부분에 액세스하기 위해 존재합니다.

![image alt text](05_GetTimeLineNode.png)

예를 들어, Get Timeline 0 변수를 사용하여 해당 타임라인의 현재 재생 속도 값을 쿼리할 수 있습니다.

![image alt text](06_BPScript1.png)

이러한 노드는 다양한 종류가 존재하며, 값을 쿼리하거나 타임라인 노드의 동작을 제어합니다. 사용 가능한 타임라인 노드 및 해당하는 기능의 전체 목록은 타임라인 노드 페이지를 참조하세요.

타임라인 이벤트 생성하기

타임라인 이벤트타임라인 컴포넌트 에 나만의 커스텀 이벤트나 함수를 처리하는 기능을 제공합니다. 나만의 이벤트를 실행하는 방법에 대한 예시는 다음 단계를 따르세요.

  1. BP_TimelineActor 를 열고 Begin Play 노드의 실행 핀 을 드래그하여 타임라인 추가(Add Timeline) 를 찾아 선택합니다.

    Copy Node Graph

    ![image alt text](07_BPScript2.png)

  2. Timeline_0 노드의 Finished 핀을 드래그하여 Print String 노드를 찾아 추가합니다. 텍스트 필드 에 스트링 'Timeline Finished' 를 입력합니다.

    Copy Node Graph

    ![image alt text](08_BPScript3.png)

  3. 최종 블루프린트 스크립트는 다음과 같아야 합니다.

    Copy Node Graph

    ![image alt text](09_BPScript4.png)

  4. 컴파일(Compile)저장(Save) 버튼을 클릭합니다.

    ![image alt text](10_SaveCompileButton.png)

  5. 블루프린트 에디터 를 닫고 콘텐츠 브라우저(Content Browser) 로 이동합니다. BP_TimelineActor 를 찾아 레벨 로 드래그합니다.

    ![image alt text](11_DragBPTimelineActor.png)

  6. 플레이(Play) 버튼을 클릭하여 결과를 확인합니다.

    ![image alt text](12_FinalResult.png)

    기본 타임라인 길이인 5초가 지난 후에는 뷰포트 왼쪽 모서리 상단에 ‘타임라인 완료됨(Timeline Finished)'이라는 텍스트가 나타납니다.

타임라인 이름변경하기

블루프린트에서 다수의 타임라인을 사용할 때는 각 타임라인의 이름을 알맞게 정하는 것이 중요합니다. 기본적으로 모든 타임라인의 이름은 'Timeline_n' 이며, 끝부분의 n 은 일련번호입니다. 그래프 탭 또는 내 블루프린트 탭 내에서 타임라인을 우클릭하고 이름변경(Rename) 을 선택하여 타임라인의 이름을 바꿀 수 있습니다.

![image alt text](13_Renaming.png)

타임라인 에디터 열기

타임라인을 만들기만 해서는 사용할 수 없으며, 수행할 것을 설정해야 합니다. 타임라인 편집에 대한 자세한 내용은 타임라인 편집 페이지를 참조하세요.

타임라인 생성하기

아래에 나와 있는 단계를 따르면 액터 클래스에서 나만의 타임라인 컴포넌트 를 만들고 인스턴스화할 수 있습니다.

  1. C++ 클래스 폴더 로 이동하여 추가+(Add+) 를 클릭합니다. 드롭다운 메뉴에서 새로운 C++ 클래스(New C++ Class) 를 선택합니다.

    ![](01_AddCppActorClass.png)

  2. 액터(Actor) 클래스를 부모 클래스(Parent Class) 로 선택합니다.

    이미지를 클릭하면 최대 크기로 볼 수 있습니다.

  3. 생성된 액터 클래스의 이름을 Timeline Actor 로 지정합니다.

    이미지를 클릭하면 최대 크기로 볼 수 있습니다.

  4. TimelineActor.h 파일로 이동하여 다음과 같은 TimelineComponent 클래스 라이브러리를 포함합니다.

    TimelineActor.h

    #include "Components/TimelineComponent.h"
  5. TimelineActor 클래스 정의 내에 다음과 같은 클래스 선언을 구현합니다.

    TimelineActor.h

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

    이 코드 샘플에서는 프로퍼티 지정자 태그, EditAnywhere, BlueprintReadWrite 를 사용합니다.

  6. TimelineActor.cpp 파일로 이동한 뒤 TimelineActor 생성자 ATimelineActor::ATimelineActor() 에 다음과 같은 코드를 추가합니다.

    TimelineActor.cpp

    ATimelineActor::ATimelineActor()
    {
        // 이 액터가 프레임마다 틱()을 호출하도록 설정.  필요하지 않다면 퍼포먼스 향상을 위해 이 기능을 끌 수 있습니다.
        PrimaryActorTick.bCanEverTick = true;
        ExampleTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("TimelineComponent"));
    }
  7. 코드를 컴파일(Compile) 합니다.

  8. C++ 클래스 폴더 로 이동한 뒤 TimelineActor 를 우클릭하여 TimelineActor 클래스 기반 블루프린트를 생성합니다. 이름을 Bp_TimelineActor 로 지정합니다.

    ![](04_CreateBPBased.png)

  9. TimelineActor 블루프린트를 생성했다면 클래스 디폴트(Class Defaults) 를 볼 수 있습니다. 컴포넌트(Components) 탭에서 예제 타임라인 컴포넌트를 확인할 수 있습니다.

    ![](05_ExampleTimelineComp.png)

작업 중인 코드

TimelineActor.h

#pragma once
#include "Components/TimelineComponent.h"
#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "TimelineActor.generated.h"

UCLASS()
class CPPTIMELINE_API ATimelineActor : public AActor
{
    GENERATED_BODY()

public: 
    // 이 액터 프로퍼티의 디폴트값 설정
    ATimelineActor();

protected:
    // 게임 시작 시 또는 스폰 시 호출
    virtual void BeginPlay() override;

public: 
    // 모든 프레임에서 호출
    virtual void Tick(float DeltaTime) override;

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

TimelineActor.cpp

#include "TimelineActor.h"

// 디폴트 값 설정
ATimelineActor::ATimelineActor()
{
    // 이 액터가 프레임마다 틱()을 호출하도록 설정.  필요하지 않다면 퍼포먼스 향상을 위해 이 기능을 끌 수 있습니다.
    PrimaryActorTick.bCanEverTick = true;
    ExampleTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("TimelineComponent"));
}

// 게임 시작 시 또는 스폰 시 호출
void ATimelineActor::BeginPlay()
{
    Super::BeginPlay();
}

// 모든 프레임에서 호출
void ATimelineActor::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

타임라인 변수

UProperty 지정자 를 사용하는 타임라인 컴포넌트를 C++에서 생성한 경우, 컴포넌트(Components) 탭에서 변수로 사용할 수 있습니다. 이는 블루프린트 스크립팅을 통해 타임라인 컴포넌트에 지속적인 반복작업을 수행하려는 디자이너에게 유용할 수 있습니다.

ExamplePlayRate.png

위 이미지는 블루프린트에서 타임라인의 현재 재생 속도 값을 구하기 위해 네이티브 C++ 타임라인 변수를 사용한 경우를 나타낸 것입니다.

사용 가능한 블루프린트 타임라인 노드 및 해당하는 기능의 전체 목록은 타임라인 노드 페이지를 참조하세요.

FTimeLineEvent 생성하기

타임라인 이벤트( FOnTimelineEvent )는 타임라인 컴포넌트에 이벤트를 처리하는 기능을 제공하는 다이내믹 델리게이트입니다. 아래의 단계를 따라 타임라인 컴포넌트의 Finished 함수에 바인딩된 FTimeLineEvent 를 직접 만들 수 있습니다.

  1. TimelineActor.h 파일로 이동한 뒤 클래스 정의(Class Definition) 에 다음과 같은 코드를 선언합니다.

    TimelineActor.h

    protected:
    
        //Finished 이벤트를 처리할 함수에 대한 시그니처를 델리게이션합니다.
        FOnTimelineEvent TimelineFinishedEvent;
    
        UFUNCTION()
        void TimelineFinishedFunction();
  2. TimelineActor.cpp 로 이동하여 다음과 같은 코드를 구현합니다.

    TimelineActor.cpp

     void ATimelineActor::TimelineFinishedFunction()
     {
        UE_LOG(LogTemp, Warning, TEXT("Finished Event Called."));
     }
  3. ATimelineActor::BeginPlay() 메서드로 이동하여 다음과 같은 코드를 구현합니다.

    TimelineActor.cpp

    // 게임 시작 시 또는 스폰 시 호출
    
    void ATimelineActor::BeginPlay()
    {
        Super::BeginPlay();
    
        TimelineFinishedEvent.BindUFunction(this, FName("TimelineFinishedFunction"));
        ExampleTimelineComp->SetTimelineFinishedFunc(TimelineFinishedEvent);
        ExampleTimelineComp->PlayFromStart();
    }

    TimelineFinished 이벤트가 커스텀 TimelineFinished 함수에 성공적으로 바인딩되었습니다.

  4. 코드를 컴파일합니다. 에디터 를 닫고 콘텐츠 브라우저 로 이동합니다. BP_TimelineActor 를 찾아 레벨 로 드래그합니다.

    ![image alt text](07_DragBPTimelineActor.png)

  5. 플레이(Play) 버튼을 누릅니다. 출력 로그(Output Log) 창에 다음과 같은 메시지가 나타납니다.

    ![image alt text](08_OutputMessage.png)

완료된 코드

TimelineActor.h

#pragma once
#include "Components/TimelineComponent.h"
#include "CoreMinimal.h"
#include "GameFramework/Actor.h"
#include "TimelineActor.generated.h"

UCLASS()
class CPPTIMELINE_API ATimelineActor : public AActor
{
    GENERATED_BODY()

public: 
    // 이 액터 프로퍼티의 디폴트값 설정
    ATimelineActor();

protected:
    // 게임 시작 시 또는 스폰 시 호출
    virtual void BeginPlay() override;

public: 
    // 모든 프레임에서 호출
    virtual void Tick(float DeltaTime) override;

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

protected:

    //Finished 이벤트를 처리할 함수에 대한 시그니처를 델리게이션합니다.
    FOnTimelineEvent TimelineFinishedEvent;

    UFUNCTION()
    void TimelineFinishedFunction();
};

TimelineActor.cpp

#include "TimelineActor.h"

// 디폴트 값 설정
ATimelineActor::ATimelineActor()
{
    // 이 액터가 프레임마다 틱()을 호출하도록 설정.  필요하지 않다면 퍼포먼스 향상을 위해 이 기능을 끌 수 있습니다.
    PrimaryActorTick.bCanEverTick = true;
    ExampleTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("TimelineComponent"));
}

// 게임 시작 시 또는 스폰 시 호출

void ATimelineActor::BeginPlay()
{
    Super::BeginPlay();

    TimelineFinishedEvent.BindUFunction(this, FName("TimelineFinishedFunction"));
    ExampleTimelineComp->SetTimelineFinishedFunc(TimelineFinishedEvent);
    ExampleTimelineComp->PlayFromStart();
}

// 모든 프레임에서 호출
void ATimelineActor::Tick(float DeltaTime)
{
    Super::Tick(DeltaTime);
}

void ATimelineActor::TimelineFinishedFunction()
{
    UE_LOG(LogTemp, Warning, TEXT("Finished Event Called."));
}