키와 커브

블루프린트의 타임라인 에디터 안에서 키와 커브 작업 방식에 대한 개요서입니다.

Choose your operating system:

Windows

macOS

Linux

블루프린트의 타임라인 에디터 안에서 키와 커브 작업 방식에 대한 개요서입니다.

구현 방법 선택

블루프린트

C++

커브(Curve) 는 보간된 여러 포인트로 이루어진 트랙을 정의하며, 이러한 포인트들은 지정한 범위에 걸쳐 평가됩니다. 커브에는 벡터, 플로트, 컬러 가 있습니다. 각 트랙에는 시간과 값을 정의하는 가 몇 개든 존재할 수 있습니다. 데이터는 키 사이를 보간해 타임라인의 특정 시점에 대한 값을 계산합니다.

키 및 커브 작업

이 예시에서는 보간되는 플로트 포인트(지정한 범위에 걸쳐 평가)로 이루어진 커브를 정의하는 커브 플로트 를 생성해 보겠습니다.

  1. 액터 블루프린트 클래스를 생성하려면 콘텐츠 브라우저(Content Browser) 로 이동하여 + 추가(Add) > 블루프린트 클래스(Blueprint Class) 를 선택합니다.

    ![](01_AddBPClass.png)

  2. 액터(Actor) 를 부모 클래스로 선택하고, 생성된 블루프린트의 이름을 ExampleTimelineComponent 로 지정합니다.

    ![](02_SelectActor.png)

  3. 타임라인 컴포넌트를 더블클릭하여 타임라인 에디터 를 엽니다.

  4. 이벤트 그래프(Event Graph) 창으로 이동하여 그래프 를 우클릭하고 타임라인 추가(Add Timeline) 노드를 검색하여 선택합니다. 생성된 타임라인 노드를 더블클릭하여 타임라인 에디터 창을 엽니다.

    ![](03_TimelineNode.png)

  5. + 트랙(Track) > Float 트랙 추가(Add Float Track) 를 클릭하여 타임라인 컴포넌트에 CurveFloat를 추가합니다.

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

  6. CurveFloat가 생성된 타임라인 에디터 의 모습은 다음과 같습니다.

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

키 추가하기

Shift 키를 누른 채로 회색 바를 클릭하거나, 회색 바를 우클릭한 후 드롭다운 메뉴에서 CurveFloat에 키 추가(Add Key To CurveFloat) 액션을 선택하면 키를 추가할 수 있습니다.

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

키 편집하기

키의 시간과 값을 설정하려면 키를 클릭하고 트랙 상단 근처의 시간 및 값 필드에 값을 입력합니다.

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

키 삭제하기

키보드에서 Delete 를 누르거나, 삭제하고 싶은 키를 우클릭한 후 컨텍스트 메뉴에서 삭제(Delete) 액션을 선택하면 선택된 키를 삭제할 수 있습니다.

키 옮기기

타임라인에서 키를 옮기려면 키를 선택한 후 드래그합니다. Ctrl 키를 사용해 다수의 키를 선택할 수 있습니다. 가로 방향으로 드래그하면 키의 시간(Time) 값이 업데이트되며, 세로 방향으로 드래그하면 값(Value) 이 업데이트됩니다.

![image alt text](MovingKeysBP.gif)(w:740 h:440 convert:false)

키 보간

키를 우클릭하면 선택된 키의 보간 타입을 선택할 수 있는 컨텍스트 메뉴가 표시됩니다.

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

키 보간은 보간하고자 하는 키와 그다음 키 사이의 커브에만 영향을 미칩니다. 예를 들어, 다른 키가 모두 선형(Linear) 으로 설정되고 중앙 키가 자동(Auto) 으로 설정된 경우, 트랙은 아래 이미지와 비슷하게 보입니다.

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

가능한 보간 유형은 아래와 같습니다.

  • 자동(Auto)

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

  • 사용자(User)

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

  • 꺾임(Break)

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

  • 선형(Linear)

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

  • 상수(Constant)

    ![image alt text](14_ConstantInterpolation.png)

외부 커브

메인 키 영역 왼쪽에는 콘텐츠 브라우저(Content Browser) 에서 해당 트랙으로 외부 커브 에셋을 추가할 수 있는 칸이 있습니다.

![image alt text](15_ExternalCurve.png)

외부 커브 아이콘

설명

![image alt text](16_ExtCurveButton1.png)

콘텐츠 브라우저(Content Browser) 에서 선택된 커브를 이 트랙에 사용합니다.

![image alt text](17_ExtCurveButton2.png)

콘텐츠 브라우저(Content Browser) 를 탐색하여 이 트랙에 사용할 커브를 선택합니다.

![image alt text](18_ExtCurveButton3.png)

키 및 커브를 편집할 수 있도록 임포트된 외부 커브를 내부 커브로 변환합니다.

또한 최소 1개의 키가 선택된 상태에서 커브를 우클릭하고 외부 커브 생성(Create External Curve) 을 선택할 수도 있습니다.

![image alt text](19_CreateExtCurve.png)

이렇게 하면 커브 에셋이 저장될 경로를 편집할 수 있는 컨텍스트 창이 나타납니다. 이를 통해 나중에 이 커브를 다른 타임라인에도 다시 사용할 수 있습니다.

![image alt text](20_CreateExtCerveWindow.png)

커브(Curve) ( UCurveBase )는 보간되는 여러 포인트로 이루어진 트랙을 정의하며, 이러한 포인트들은 지정한 범위에 걸쳐 평가됩니다. 커브에는 벡터, 플로트, 컬러 가 있습니다. 각 트랙에는 시간과 값을 정의하는 가 몇 개든 존재할 수 있습니다. 데이터는 키 사이를 보간해 타임라인의 특정 시점에 대한 값을 계산합니다.

키 및 커브 작업

이 예시에서는 보간되는 플로트 포인트(지정한 범위에 걸쳐 평가)로 이루어진 커브를 정의하는 UCurveFloat 를 생성해 보겠습니다.

타임라인 컴포넌트 에 대한 UCurveFloat 를 만들고 인스턴스화하려면 다음 단계를 따르세요.

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

    ![](01_AddCppClass.png)

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

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

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

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

  4. 새 액터가 생성되면 Visual Studio 가 자동으로 ExampleTimelineComponent.hExampleTimelineComponent.cpp 파일을 엽니다. ExampleTimelineComponent.h 파일로 이동하여 #include 섹션에 다음을 추가합니다.

    ExampleTimelineComponent.h

    #include "Components/TimelineComponent.h"
  5. 다음으로, ExampleTimelineComponent 클래스 정의에 아래 코드를 추가합니다.

    ExampleTimelineComponent.h

    protected:
    
        UPROPERTY(EditAnywhere, BlueprintReadWrite)
        UTimelineComponent* ExampleTimelineComp;
    
    public:
    
        UPROPERTY(EditAnywhere)
        UCurveFloat* ExampleTimelineCurve;
  6. 코드를 컴파일합니다.

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

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

  8. CurveFloat 를 선택하고 이름을 ExampleFloatTrack 으로 지정합니다.

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

  9. 콘텐츠 브라우저(Content Browser) 에서 ExampleTimelineComponent 클래스가 있는 폴더로 이동하여 우클릭한 후 ExampleTimelineComponent를 기반으로 블루프린트 클래스 생성(Create Blueprint Class based on ExampleTimelineComponent) 을 선택합니다. 이름을 BP_ExampleTimelineComponent 로 지정합니다.

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

  10. BP_ExampleTimelineComponent 클래스 디폴트를 열어 디테일(Detail) 패널로 이동한 후 예시 타임라인 커브(Example Timeline Curve)ExampleFloatTrack 에 할당합니다.

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

  11. 콘텐츠 브라우저에서 예시 플로트 트랙(Example Float Track) 을 더블클릭하여 타임라인 에디터(Timeline Editor) 를 엽니다.

키 추가하기

Enter 키를 누르거나, 회색 바를 우클릭한 후 컨텍스트 메뉴에서 키 추가(Add Key) 액션을 선택하면 키를 추가할 수 있습니다.

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

키 편집하기

키의 시간과 값을 설정하려면 키를 클릭하고 트랙 상단 근처의 시간 및 값 필드에 값을 입력합니다.

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

키 삭제하기

키보드에서 Delete 를 누르거나, 삭제하고 싶은 키를 우클릭한 후 컨텍스트 메뉴에서 삭제(Delete) 액션을 선택하면 선택된 키를 삭제할 수 있습니다.

키 옮기기

타임라인에서 키를 옮기려면 키를 선택한 후 드래그합니다. Ctrl 키를 사용해 다수의 키를 선택할 수 있습니다. 가로 방향으로 드래그하면 키의 시간(Time) 값이 업데이트되며, 세로 방향으로 드래그하면 값(Value) 이 업데이트됩니다.

![image alt text](MovingKeysCpp.gif)(w:740 h:440 convert:false)

키 보간

키를 우클릭하면 선택된 키의 보간 타입을 선택할 수 있는 컨텍스트 메뉴가 표시됩니다.

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

키 보간은 보간하고자 하는 키와 그다음 키 사이의 커브에만 영향을 미칩니다. 예를 들어, 다른 키가 모두 선형(Linear) 으로 설정되고 중앙 키가 3차 자동(Cubic-Auto) 으로 설정된 경우, 트랙은 아래 이미지와 비슷하게 보입니다.

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

가능한 보간 유형은 아래와 같습니다.

  • 자동(Auto)

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

  • 사용자(User)

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

  • 꺾임(Break)

    ![image alt text](14_BreakInterpolation.png)

  • 선형(Linear)

    ![image alt text](15_LinearInterpolation.png)

  • 상수(Constant)

    ![image alt text](16_ConstantInterpolation.png)