[멋쟁이사자처럼 Unity 게임 부트캠프 4기] 19일차 - 코딩 없는 Timeline

 

[ 목차 ]

---

 

오늘은 코딩이 저언혀 없는 Timeline 기능으로 연출하기!

 

코딩 없이 유니티의 기능만으로 연출을 구현해보자!

 

---

 

 

1. Timeline 설치 및 Pade In Pade Out

 

 

 

우선 Timeline을 하는 방법부터 시작한다.

 

기본적으로 Timeline으로 제공하는 것은 부족하니

에셋 하나를 다운 받도록 한다.

 

Default Playables를 내 에셋에 추가하고,

유니티에서 패키지 매니저에서 다운로드한다.

 

 

 

Hierarchy에 이미지 추가한다.

(캔버스도 함께 생성한다.)

 

 

 

Window - Sequencing - Timeline

 

 

 

 

Timeline 창 왼쪽 화면에서 마우스 오른쪽 클릭하면 선택 창이 하나 뜬다.

Screen Fader Track를 선택한다.

 

 

 

 

이미지 넣을 곳이 생기는데,

아까 만들어두었던 Image를 드래그 앤 드롭으로 해 넣어준다.

 

 

 

 

이미지를 화면에 꽉 채우는 방법은 Rect Transform에서

오른쪽 아래에 있는 것을 선택하고,

모든 위치 값을 0으로 하면 된다.

 

 

 

 

이미지의 색깔을 블랙으로 한다. (원하는 색으로 해도 상관없다.)

 

 

 

 

이제 TimeLine 안에서 마우스 오른쪽 클릭하면 선택창이 뜬다.

Add Screen Fader Clip을 선택한다.

 

 

 

 

누르면 이러한 Clip이 생성되는 것을 볼 수 있다.

 

 

 

 

Clip을 복사 붙여넣기 하고 옆으로 옮겨준다.

 

 

 

 

앞에껀 Alpha 255, 뒤에껀 Alpha 0으로 변경한다.

 

 

 

 

다시 겹쳐주면 끝!

실행하면 Fade In Out이 진행된다.

 

 

 

 

 

---

 

2. Timeline Animation 추가하기

 

 

이제 플레이어가 동작을 계속 반복하는 것을 TimeLine을 이용해 해볼 것이다.

 

TimeLine을 클릭한 상태에서 캐릭터 오브젝트를 드래그 앤 드롭한다.

 

 

 

 

그 후에 선택창이 하나 뜨는데,

Animation Track을 선택한다.

 

 

 

 

플레이어의 Animator가 들어가졌다.

 

 

 

 

타임라인 안에서 마우스 우클릭 - Add From Animation Clip 선택

 

 

 

Timeline에 플레이어의 idle 상태가 추가되었다.

원하는 만큼 늘리면 그 시간만큼 반복재생을 해준다.

 

 

 

 

---

 

3. 적 생성하기

 

 

적 캐릭터가 될 Multiple sprite를 원하는 사진을 다중 선택해 Hierarchy에 애니메이션까지 생성한다.

 

 

 

 

반대 방향을 보고 싶게 한다면 Inspector - Sprite Renderer - Flip의 x값 체크

 

 

 

 

아까와 동일한 방법으로 적의 Timeline도 추가한다.

 

 

 

 

---

 

3. UI를 Wolrd 영역으로 변환

 

 

(1) UI 영역에서 world 영역으로 변경

 

보통 캔버스를 생성하면 엄청 큰 캔버스 영역에서 UI가 적용되는 것을 경험해 본 적이 있다.

한 번의 설정으로 보통 오브젝트가 생성되는 영역에서 UI가 생성되는 것을 해줄 수 있다.

 

일단 캔버스를 생성할 것이다.

 

Hierarchy - UI - Canvas (Text를 생성해도 된다.)

 

 

 

 

일단 Canvas의 render Mode를 World Space로 변경한다.

Canvas의 Inspector를 보면 Transform이 아닌 Rect Transform으로 되어 있을 것이다.

 

그치만 변경한 후에 크기가 엄청 클테니 Scale을 줄여준다.

 

 

 

 

(2) 말풍선과 텍스트 만들기

 

 

이제 텍스트를 작성하면

Wolrd 내에서 텍스트 보이기 성공한 것이다.

 

 

 

이제 말풍선을 넣어 대화하는 공간을 만들어본다.

 

플레이어의 Canvas - Image를 추가해 말풍선 이미지를 넣고,

텍스트는 image 자식으로 넣는다.

 

 

 

적도 동일하게 말풍선을 넣어준다.

 

 

 

이제 대화를 하는 상황을 Timeline을 사용해서 만들 것이다.

 

말풍선과 텍스트가 함께 없어졌다가 생성되는 것을 반복하는 작업이다.

Timeline - Text Switcher Track

 

여기에서 주의해야 할 점은

TextMeshPro는 안의 코드를 바꿔야 해서 기존 Text로 진행하는 것을 추천한다.

 

 

 

Canvas의 text를 드래그 앤 드롭한다. (적의 Text)

 

 

 

타임라인 안에서 애니메이션과 동일하게

마우스 우클릭 - Add Activation Clip을 눌러 생성한다.

 

 

 

 

생성된 TextSwitcherClip의 Inspector를 가보면 Text Switcher Clip이 보일 것이다.

여기서 사이즈랑 컬러, 입력할 텍스트를 적는다.

 

 

 

 

이제 텍스트가 생성될 때 말풍선이 보이고,

텍스트가 끝나면 다시 말풍선이 안 보여지게 하는 것을 해볼 것이다.

 

TimeLine - Activation Track 선택

 

 

 

위의 TimeLine에 있는 Text의 상위 객체 Canvas를 넣어준다.

타임라인의 길이는 Text와 동일하게 잡아준다.

 

 

 

플레이어 말풍선도 똑같이 넣어준다.

위치는 적 말풍선이 끝나고 난 뒤로 설정한다.

 

 

 

 

---

 

4. 텍스트 사운드 추가

 

 

텍스트가 나올 때 사운드가 함께 나오는 것을 할 것이다.

 

GameObject를 생성하고,

해당 Audio를 드래그 앤 드롭한다.

 

그러면 Audio Source가 자동으로 생성된다.

첫 플레이 시에 사운드가 재생되지 않도록

Play On Awake를 체크 해제한다.

 

 

 

TImeline에서 Audio Track으로 생성한다.

 

 

 

해당 Sound를 넣어주고, Add From Audio Clip을 선택한다.

 

 

 

텍스트가 나오는 타이밍에 맞춰 위치를 조절한다.

 

 

 

Ctrl을 누른 채로 선택하면 다중 선택이 가능하다.

 

이렇게 위치를 조정할 수 있다.

 

 

 

 

---

 

5. 플레이어 애니메이션 추가

 

 

이미지를 Hierarchy에 드래그 앤 드롭해 애니메이터랑 애니메이션 클립을 추가한다.

 

 

 

생성된 애니메이션 클립을 타임라인에 넣을 수 있다.

 

 

 

세로로 된 점 세개를 누르고 Add Override Track을 누르면

 

 

 

해당 애니메이션 아래에 새로운 Override가 뜰 것이다.

 

 

 

빨간색 원 버튼을 누르면 녹화를 한다는 것인데,

녹화를 통해 키프레임을 잡는 것이다.

 

 

 

시작 위치와 원하는 시간 뒤에 끝 위치를 잡아준다.

 

 

 

 

녹화를 완료하면 마름모 모양이 생긴다.

이것이 키프레임 잡은 것이다.

 

 

 

 

물결 같이 생긴 모양을 열면 그래프 모양으로 애니메이션 움직임을 조정할 수 있다.

 

 

 

 

 

---

 

6. 발 사운드 추가

 

 

 

캐릭터가 이동하는 구간에 맞춰서 쭉 발 사운드를 내고 싶은데,

발 사운드의 길이가 정해져 있다면, 이동하는 구간에 맞춰 늘리기만 하면 반복재생이 된다.

 

 

 

Loop에 체크를 해 반복이 되게 한다.

 

 

이렇게 되면 Timeline 정복!

 

 

이걸 응용해서 게임의 연출을 더욱 흥미롭게 할 수 있다.

 

 

 

---

 

 

이제 연출도 뚝딱! 할 수 있다.

 

난 연출은 영상을 따로 만들어서 넣어야 하나? 스크립트도 작성해야 하나?

이러한 생각을 가지고 있었지만..

 

역시 꿀기능은 많다!!

 

 

그리고 미리 써논 블로그이지만.. 팀프로젝트로 인해

블로그 글이 너무 미뤄졌다.

 

 

이제 다시 블로그도 열심히 해봐야지!!!

 

파이팅~~!