타임라인🎬 06 - Custom Playables로 시간 다루기 (제작 리뷰 및 코드공유)

19 Jan 2021 in Dev.Log on Unity, Timeline, Playables

애니메이션 및 튜토리얼 제작에 유용한 유니티 타임라인에 대해 알아본다. 이번 포스팅에서는 타임라인에서 시간을 다루는 법에 대해 필자가 실제 프로젝트에 사용한 코드를 보며 리뷰한다.

Custom Playables로 시간을 다루는 방법에 대해 알아본다. 기존 유니티에서 시간을 다루려면 (기본적으로 추천하지 않는 방식이긴 하지만) TimeScale을 건드리거나, 별도의 시스템을 만들어 사용해야만 했다.

타임라인은 유니티의 TimeScale을 건드리지 않고도 아주 쉽게 별도의 시간선을 가질 수 있도록 설계되어 있다. 아래의 글에서는 실제 프로젝트에 사용했던 코드 중 ‘타임라인의 시간을 건드리는 코드들’에 대해 다룬다.

• SlowMotion Track
  • 참고 프로젝트: Terrible Kingdom Demo
  • 개조
    • 스크립트 목록
    • MixerBehaviour
  • 다운로드 및 사용법
    • 사전설정
    • 트랙 생성
    • 클립 설정
    • 조건 설정
    • 테스트
• TimelineSpeed Track
  • 참고 프로젝트: Default Playables - Time Dilation
  • 개조
  • 다운로드 및 사용법
    • 사전 설정
    • 트랙 생성
    • 클립 설정
    • 테스트
• 마무리

SlowMotion Track

처음 타임라인 작업에서 Custom Playables 제작을 해야겠다고 생각이 들었던 때는 ‘타임라인의 시간을 자유롭게 다뤄야 하는 기능’을 개발할 때였다. 프로젝트의 특성상 타임라인 서서히 느려지고, 다시 빨라지고, 시간을 뛰어넘는 기능이 필요했다. Signal로 하기엔 사용해야하는 곳이 많았고, 코드로 하자니 타임라인과의 타이밍을 맞추거나 프로그래머가 아닌 사람이 다루기가 힘들었다. 따라서 Custom Playables로 개발하기로 했다.

⛔ 만약 타임라인의 시간만 간단히 조절하고 싶다면 SlowMotion Track보다는 아래의 TimelineSpeed Track 설명을 추천한다. 하지만 타임라인의 시간에 조건을 걸어 조절하고 싶다면 SlowMotion Track을 읽는 것도 도움이 될 것이다. (👉이동하기)

참고 프로젝트: Terrible Kingdom Demo

유사한 예제 프로젝트를 찾아보니 유니티에서 제공하는 Terrible Kingdom이라는 제목의 데모 프로젝트를 찾을 수 있었다.

👉 예제 설명 링크

👉 예제 다운로드 링크

이 프로젝트에는 다양한 커스텀 플레이어블 트랙들이 있다. 몇 가지는 해당 프로젝트의 매니저와 스크립트를 함께 사용해야하는 트랙들이다. 자세한 내용은 설명 링크를 참고하거나 Demo를 다운받아 직접 살펴보는 것을 추천한다.

• AI Command Track
• Dialogue Track
• Light Track
• SimpleClip
• TMPTextSwitcher
• Time Machine Track

여기서 필자가 참고한 트랙은 Time Machine Track이다. 이름을 보면 알겠지만 타임라인에서 특정 시간으로 이동하는 기능을 가지고 있다. 여기서 ‘특정 시간으로 이동하는 기능’을 참고하여 트랙을 만들었다.

개조

참고 프로젝트에서 사용된 Time Machine Track을 그대로 사용하기엔 프로젝트에 쓰려면 커스터마이징 해야하는 부분이 있었다. 우선, 조건을 충족하기 전까지는 서서히 느려지는 슬로우모션이 들어가야만 했다. 따라서 트랙이름을 SlowMotion Track이라고 지었다.

또한 참고 프로젝트의 코드에서는 느려지는 조건을 Swich문으로 판별했기 때문에 조건이 늘어날수록 코드도 길어지는 문제가 발생했다. 이 조건을 다른 스크립트에서 관리하면서 트랙은 관리만 하는 용도로 사용하고 싶었다.

스크립트 목록

트랙과 관련된 목록

• SlowMotionTrack
• SlowMotionClip
• SlowMotionBehaviour
• SlowMotionMixerBehaviour
• SlowMotionClipInspector(Editor)

그 외

• TimelineSpeedController

  타임라인의 시간을 조절

• SlowMotionCondition

  조건을 거는 스크립트. 조건을 거는 스크립트를 따로 만들고 이 스크립트를 상속해야만 한다.

MixerBehaviour

기본적인 트랙의 틀은 그대로 가져왔고, 개조한 부분은 조건을 판별하는 MixerBehaviour 스크립트의 Switch문이다. 3가지 case를 만들었다. ContinuousSlowing은 단일로 동작하며 SlowDownAndJumpToMarker와 Marker는 서로 쌍을 이루어야 한다.

1. ContinuousSlowing

   조건이 false라면 지정한 속도까지 점차 느려지고, True가 되면 다시 1로 회복된다.

2. SlowDownAndJumpToMarker

   조건이 false라면 지정한 속도까지 점차 느려지고, True가 되면 Marker가 위치한 타임라인 시간대로 점프한다.

3. Marker

   2번과 연관된 case이다. 점차 속도가 1로 회복된다.

1번과 2번은 느려지는 조건을 받는다. 그 조건은 SlowMotionCondition을 상속받은 스크립트에게서 가져온다.

다운로드 및 사용법

👉 다운로드 링크

위의 다운로드 링크에서 *.unityPackage를 다운로드 받고 유니티에서 열면 CustomPlayables/SlowMotion 파일이 생성된다.

사전설정

먼저, 타임라인의 시간을 조절할 수 있는 스크립트를 [Add Component]해야한다.

TimelineSpeedController 스크립트를 객체에 붙이고, Director 변수에 현재 사용할 [Playable Director]를 드래그 & 드랍한다.

트랙 생성

타임라인에서 트랙을 생성한다. CustomTimeline>SlowMotion을 클릭하여 만들 수 있다. 여기서 CustomTimeline 하위에 들어가 있는 이유는 SlowMotion Track의 namespace가 CustomTimeline이기 때문이다.

사전설정에서 Add Component한 [TimelineSpeedController.cs]가 들어있는 객체를 드래그 & 드랍한다.

클립 설정

생성한 트랙에 [우클릭] 후 [Add Slow Motion Clip]로 클립을 만든다.

클립을 클릭하고 Inspector에서 클립에 대한 설정을 진행한다.

1. Action

   ContinuousSlowing/SlowDownAndJumpToMarker/Marker 중에 선택이 가능하다.
   ContinuousSlowing은 단일로 동작하며
   SlowDownAndJumpToMarker와 Marker는 서로 쌍을 이루어야 한다.
   자세한 사항은 위를 참조. (MixerBehaviour)

2. Marker Label

   이름을 쓰면 자동으로 클립의 제목으로 작성된다.
   중요! 여기서 Marker Label은 ContinuousSlowing의 경우 아무런 효과가 없지만, SlowDownAndJumpToMarker와 Marker는 서로의 짝을 Marker Label이 일치해야만 짝으로 인식하기 떄문에 꼭 작성해야만 한다.

3. Event_Method

   조건이 들어간 스크립트를 여기에 넣어준다. SlowMotionCondition을 상속받은 스크립트여야만 한다.

4. Min Timeline Speed

   타임라인의 최소 속도를 말한다. 점점 줄어들어 멈추고 싶다면 0을 넣으면 된다.

5. Lerp Speed

   위의 Min Timeline Speed까지 얼마나 빠른 속도로 줄어들 것인지 설정한다. (Time.DeltaTime * Lerp Speed)

SlowDownAndJumpToMarker와 Marker에 대한 설명이 부족한 것 같아 추가로 이미지를 가져왔다.

이런 식으로 Marker Label의 String값을 비교하여 서로의 짝을 찾아간다.

조건 설정

조건 스크립트는 SlowMotionCondition을 상속받음으로써 만들 수 있다.

중요한 것은 SlowMotionCondition의 GetEventCondition()을 무조건 override해야 한다는 점이다. 해당 스크립트를 열어보면 Exception으로 표기해 놓은 것을 볼 수 있다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Playables;

namespace CustomTimeline
{
    [ExecuteInEditMode]
    public class SlowMotionCondition : MonoBehaviour
    {
        public bool skip = false;

        public virtual bool GetEventCondition() // override 필수
        {
            throw new System.Exception("Not overwritten");
        }

        public bool CheckCheckEventCondition()
        {
            if (skip)
                return true;
            return GetEventCondition();
        }

    }
}

GetEventCondition() 함수를 override 한 뒤 조건을 충족하면 true를 return하는 구조로 작성하면 된다. 아주 간단하게 bool값을 하나 만들어 테스트해볼 수 있다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;

namespace CustomTimeline
{
    public class SlowMotionEvent_Example : SlowMotionCondition
    {
        public bool checkTemp;
        public override bool GetEventCondition()
        {
            return checkTemp;
        }
    }
}

이렇게 만든 조건 스크립트를 Clip의 Event_Method에 넣으면 된다.

테스트

TimelineSpeedController.cs에 [ExecuteInEditMode]를 넣었으니 유니티를 PlayMode로 만들 필요 없이 플레이 버튼을 누르지 않아도 타임라인의 프리뷰에서 확인이 가능하다.

TimelineSpeed Track

위에서 설명했던 SlowMotion Track은 조건에 따라서 시간을 조절하는 스크립트였다. 이번에 설명할 TimelineSpeed Track은 간단하게 시간만 조절하고 싶을 때 사용한다.

참고 프로젝트: Default Playables - Time Dilation

이전에 설명했던 Default Playables에 포함되어 있는 Time Dilation트랙을 참고하였다. 해당 트랙은 TimeScale을 조절하는 스크립트로써, 타임라인의 시간만을 조절해야하는 프로젝트의 성격과는 맞지 않아 개조하게 되었다.

개조

TimeScale을 조절하는 부분을 Timeline의 Playables 자체의 속도를 늦추는 방식으로 변경하였다.

다운로드 및 사용법

👉 다운로드 링크

위의 다운로드 링크에서 *.unityPackage를 다운로드 받고 유니티에서 열면 CustomPlayables/TimelineSpeed 파일이 생성된다.

사전 설정

SlowMotion Track과 마찬가지로 타임라인의 시간을 조절할 수 있는 스크립트를 [Add Component]해야한다.

TimelineSpeedController 스크립트를 객체에 붙이고, Director 변수에 현재 사용할 [Playable Director]를 드래그 & 드랍한다.

트랙 생성

타임라인에서 트랙을 생성한다. CustomTimeline>TimelineSpeed Track을 클릭하여 만들 수 있다. 여기서 CustomTimeline 하위에 들어가 있는 이유는 TimelineSpeed Track의 namespace가 CustomTimeline이기 때문이다.

사전설정에서 Add Component한 [TimelineSpeedController.cs]가 들어있는 객체를 드래그 & 드랍한다.

클립 설정

생성한 트랙에 [우클릭] 후 [Add Timeline Speed Clip]로 클립을 만든다.

클립을 클릭하고 Inspector에서 클립에 대한 설정을 진행한다.

중요한 것은 Ease In/Out Duration과 TimeSpeed이다.
블렌딩 구간동안 서서히 속도가 조절되며, 클립이 있는 구간은 Time Speed 변수값으로 속도가 유지되고, 클립이 없는 구간은 스피드가 1로 돌아간다.

테스트

위의 SlowMotion와 마찬가지로 TimelineSpeedController.cs에 [ExecuteInEditMode]를 넣었기 때문에, 유니티를 PlayMode로 만들 필요 없이 플레이 버튼을 누르지 않아도 타임라인의 프리뷰에서 확인이 가능하다.

마무리

지금까지 타임라인에서 시간을 다루는 법에 대해 실제 프로젝트에 사용한 코드를 가지고 알아보았다. 공유한 코드들은 모두 프로젝트용으로 제작한 것으로써 입맛에 맞춰 바꿔 사용해야 할테지만 타임라인에서 시간을 조절하려는 분들께 조금이나마 실마리가 되었으면 한다.