문 열기

C++ 타임라인 예시는 고전적인 근접성 기반 문 열기 기능을 구성하는 데 사용됩니다.

문 액터 생성하기

1. 시작용 콘텐츠(Starter Content)가 활성화된 기본 템플릿을 기반으로 새 C++ 프로젝트를 생성하고 이름을 TimelineDoorActor로 지정합니다.

   

2. 콘텐츠 브라우저로 이동하여 C++ 클래스(C++ Classes) 폴더를 클릭한 다음 + 추가(+ Add) 버튼을 클릭하고 새 C++ 클래스(New C++ Class)를 선택합니다.

   

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

   

4. 생성된 액터의 이름을 DoorActor로 지정합니다.

   

5. 새 액터가 생성되면 Visual Studio가 자동으로 DoorActor.h 및DoorActor.cpp 파일을 엽니다. DoorActor.h 파일로 이동한 뒤다음을 선언합니다.

   DoorActor.h

   C++

   #include "Components/TimelineComponent.h"

   Copy full snippet(1 line long)

6. DoorActor 클래스 정의에 다음 코드를 추가합니다.

   DoorActor.h

   C++

   protected:
   
            //MeshComponents to represent Door assets
            UPROPERTY(VisibleAnywhere, BlueprintReadWrite)
            UStaticMeshComponent* DoorFrame;
            UPROPERTY(VisibleAnywhere, BlueprintReadWrite)
            UStaticMeshComponent* Door;
   
            //TimelineComponent to animate Door meshes
            UPROPERTY(VisibleAnywhere, BlueprintReadWrite)
   
   Expand code Copy full snippet(15 lines long)

7. DoorActor.cpp로 이동합니다. 박스 컴포넌트를 사용하려면 아래 클래스 라이브러리를 포함해야 합니다.

   DoorActor.cpp

   C++

   #include "Components/BoxComponent.h"

   Copy full snippet(1 line long)

8. ADoorActor::ADoorActor의 생성자에서 다음을 선언합니다.

   DoorActor.cpp

   C++

   // Sets default values
        ADoorActor::ADoorActor()
        {
            // Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
            PrimaryActorTick.bCanEverTick = true;
   
            //Create our Default Components
            DoorFrame = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("DoorFrameMesh"));
            Door = CreateDefaultSubobject<UStaticMeshComponent>(TEXT("DoorMesh"));
            DoorTimelineComp = CreateDefaultSubobject<UTimelineComponent>(TEXT("DoorTimelineComp"));
   
   Expand code Copy full snippet(17 lines long)

   참고: 이후에 Door 액터의 커스텀 메서드로 조정할 수 있도록 문의 상대적 트랜스폼은 어태치먼트 규칙으로 유지합니다. 자세한 문서는 FAttachmentTransformRules를 참조하세요.

9. 코드를 컴파일합니다.

문 스태틱 메시 설정하기

DoorFrame과 Door 스태틱 메시 컴포넌트를 시각적으로 나타낼 스태틱 메시 에셋을 구성해야 합니다.

1. 콘텐츠 브라우저에서 C++ 클래스(C++ Classes) 폴더로 이동합니다.

   

2. DoorActor 클래스를 우클릭한 다음 DoorActor를 바탕으로 블루프린트 클래스 생성(Create Blueprint Class based on DoorActor)을 선택합니다.

   

3. 블루프린트 액터의 이름을 Bp_DoorActor로 지정하고 적절한 폴더에 배치합니다.

   

4. 컴포넌트(Components) 탭에서 DoorFrame 스태틱 메시 컴포넌트를 선택합니다.

   

5. 디테일 패널로 이동한 뒤 스태틱 메시를 SM_DoorFrame으로 변경합니다.

   

6. 컴포넌트 탭에서 DoorMesh 컴포넌트를 선택합니다.

   

7. 디테일 패널에서 스태틱 메시를 SM_Door로 변경합니다.

   

8. 그리고 트랜스폼(Transform) 카테고리에서 Y 위치(Y Location) 값을 45.0으로 설정합니다.

   

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

   

UCurveFloat와 타임라인 이벤트 트랙 생성하기

타임라인 컴포넌트에는 타임라인 커브가 필요합니다. 각 커브에서는 시간과 값을 정의하는 키가 하나 이상 있습니다.커브는 키 사이를 보간해 타임라인의 특정 시점에 대한 값을 계산합니다.

이 예시에서는 UCurveFloat를 사용합니다.

1. DoorActor.h의 ADoorActor 클래스 정의로 이동한 뒤다음 변수를 선언합니다.

   DoorActor.h

   C++

   public:
            // Variable to hold the Curve asset
            UPROPERTY(EditAnywhere)
            UCurveFloat* DoorTimelineFloatCurve;
   
        private:
            //Float Track Signature to handle our update track event
            FOnTimelineFloat UpdateFunctionFloat;
   
            //Function which updates our Door's relative location with the timeline graph
   
   Expand code Copy full snippet(12 lines long)

2. 이제 DoorActor.cpp로 이동해 UpdateTimelineComp 메서드를 구현합니다.

   DoorActor.cpp

   C++

   void ADoorActor::UpdateTimelineComp(float Output)
        {
            // Create and set our Door's new relative location based on the output from our Timeline Curve
            FRotator DoorNewRotation = FRotator(0.0f, Output, 0.f);
            Door->SetRelativeRotation(DoorNewRotation);
        }

   Copy full snippet(6 lines long)

3. BeginPlay 메서드에 다음 코드를 추가합니다.

   DoorActor.cpp

   C++

   //Binding our float track to our UpdateTimelineComp Function's output
        UpdateFunctionFloat.BindDynamic(this, &ADoorActor::UpdateTimelineComp);
   
        //If we have a float curve, bind it's graph to our update function
        if (DoorTimelineFloatCurve)
        {
           DoorTimelineComp->AddInterpFloat(DoorTimelineFloatCurve, UpdateFunctionFloat);
        }

   Copy full snippet(8 lines long)

4. 코드를 컴파일합니다.

작업 중인 코드

DoorActor.h

// Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.
	#pragma once
	#include "Components/TimelineComponent.h"
	#include "CoreMinimal.h"
	#include "GameFramework/Actor.h"
	#include "DoorActor.generated.h"

	UCLASS()
	class TIMELINEDOORACTOR_API ADoorActor : public AActor
	{

DoorActor.cpp

//Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	#include "DoorActor.h"
	#include "Components/BoxComponent.h"

	// Sets default values
	ADoorActor::ADoorActor()
	{
		// Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
		PrimaryActorTick.bCanEverTick = true;

콜리전 오버랩 이벤트 생성 및 바인딩하기

박스 컴포넌트는 액터가 콜리전 바운드를 드나들 때 반응해야 합니다.

1. DoorActor.h 파일의 클래스 정의로 이동한 뒤다음을 선언합니다.

   DoorActor.h

   C++

   // Begin and End Overlap Events for our DoorProxVolume
        UFUNCTION()
        void OnOverlapBegin(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult);
   
        UFUNCTION()
        void OnOverlapEnd(class UPrimitiveComponent* OverlappedComp, class AActor* OtherActor, class UPrimitiveComponent* OtherComp, int32 OtherBodyIndex);

   Copy full snippet(6 lines long)

2. DoorActor.cpp 파일로 이동해 OnOverlapBegin 및 OnOverlapEnd 클래스 메서드를 구현합니다.

   DoorActor.cpp

   C++

   void ADoorActor::OnOverlapBegin(UPrimitiveComponent * OverlappedComp, AActor * OtherActor, UPrimitiveComponent * OtherComp, int32 OtherBodyIndex, bool bFromSweep, const FHitResult & SweepResult)
        {
            DoorTimelineComp->Play();
        }
   
        void ADoorActor::OnOverlapEnd(UPrimitiveComponent * OverlappedComp, AActor * OtherActor, UPrimitiveComponent * OtherComp, int32 OtherBodyIndex)
        {
            DoorTimelineComp->Reverse();
        }

   Copy full snippet(9 lines long)

3. 아래와 같이 오버랩 함수를 BeginPlay 메서드에 바인딩합니다.

   DoorActor.cpp

   C++

   void ADoorActor::BeginPlay()
        {
            Super::BeginPlay();
   
            //Binding our float track to our UpdateTimelineComp Function's output
            UpdateFunctionFloat.BindDynamic(this, &ADoorActor::UpdateTimelineComp);
   
            //If we have a float curve, bind it's graph to our update function
            if (DoorTimelineFloatCurve)
            {
   
   Expand code Copy full snippet(17 lines long)

4. 코드를 컴파일합니다.

언리얼 에디터에서 커브 에셋 생성하기

언리얼 에디터에서 타임라인 액터(Timeline Actor) 블루프린트에 할당할 커브 에셋을 생성해야 합니다.

1. 콘텐츠 브라우저로 이동하여 + 추가(+ Add) > 기타(Miscellaneous) > 커브(Curve)를 선택합니다.

   

2. CurveFloat를 선택하고 에셋의 이름을. DoorCurveFloat로 지정합니다.

   

3. 생성된 DoorCurveFloat를 더블클릭해 타임라인 에디터(Timeline Editor)를 엽니다.

4. 그래프를 우클릭하여 플로트 커브(Float Curve)에 두 개의 키를 추가한 다음 키 추가(Add Key)를 선택합니다. 첫 번째 키의 시간 값을 (0, 0)으로 조정합니다. 두 번째 키의 시간 값을 (4, 90)으로 조정합니다.

   

   타임라인 커브 수정에 대한 자세한 내용은 키와 커브를 참조하시기 바랍니다.

5. Shift를 누른 상태로 두 키를 함께 선택한 다음, 그래프를 우클릭하고 자동(Auto) 보간으로 설정합니다.

   

6. 이제 커브는 아래와 같은 모습일 것입니다. DoorCuveFloat를 저장하고 타임라인 에디터를 닫습니다.

   

7. Bp_DoorActor를 열고 컴포넌트 탭에서 Bp_DoorActor를 선택합니다.

   

8. 디테일 패널로 이동하여 도어 액션(Door Action) 섹션의 도어 타임라인 플로트 커브(Door Timeline Float Curve) 드롭다운 메뉴에서 DoorCurveFloat를 선택합니다.

   

9. 콘텐츠 브라우저로 이동하여 Bp_DoorActor를 레벨에 배치합니다.

10. 컴파일하고 저장한 다음 PIE를 누릅니다.

    입력 WASD 이용해 관전자 폰을 컨트롤할 수 있습니다. DoorActor의 콜리전 바운드로 들어가면 타임라인이 재생되고, 바운드를 나가면 타임라인이 거꾸로 재생됩니다.

완성된 코드

DoorActor.h

// Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

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

	UCLASS()
	class TIMELINEDOORACTOR_API ADoorActor : public AActor

DoorActor.cpp

// Copyright 1998-2022 Epic Games, Inc. All Rights Reserved.

	#include "DoorActor.h"
	#include "Components/BoxComponent.h"

	// Sets default values
	ADoorActor::ADoorActor()
	{
		// Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it.
		PrimaryActorTick.bCanEverTick = true;