[Cocos Creator Animation] 1. Animation에 대하여

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 화려한 이펙트, 걷는 움직임, 배경의 변화 등 게임 개발에 애니메이션은 필수불가결합니다. Cocos Creator에서는 어떻게 Animation Clip을 만들고 Animation을 동작시키는지 배워보겠습니다.

1. Animation에 대하여

2. Animation Clips

3. Animation Curve

4. Sprite Animation

5. Time Curves

6. Animation Events

7. Scripting Animations

Animation에 대하여

- Animation Component

Cocos Creator의 Animation도 예외없이 Node안에 들어가는 컴포넌트 입니다.

- Animation Clip 

이건 그냥 animation data를 저장하기 위한 문서라고 보시면 됩니다. Animation 컴포넌트에 마운트 시킬 겁니다.

- Index of node data

animation 컴포넌트의 경로는 상대경로입니다. 그래서, 하나의 데이터는 같은 이름의 노드의 복사본입니다.

- clip params 

sample : 1초당 몇개의 프레임을 보여줄지를 정하는 프로퍼티 (default 60)

speed : 애니메이션 스피드 (default 1)

duration : 애니메이션 duration (speed = 1)

real time : real time으로 플레이 (사용해본 적 없어 추후에 업데이트) 

wrap mode : 플레이 모드 (사용해본 적 없어 추후에 업데이트) 

- Animate Editing Mode 키는 법

Animation clip 수정은 기본 모드에서는 불가하고 movie editing mode에서만 가능합니다. edit 모드에서 노드의 추가, 이름 재지정, 삭제는 불가합니다. 다음의 순서로 Editing Mode를 켜봅시다.

1) 우선 Empty Node를 생성한 후 Animation Component를 추가해줍니다.

2) TimeLine 탭의 좌측 상단에 연필 모양 버튼을 눌러서 Edit Mode로 바꿔줍니다.

- animation editor의 이해

1 . 기본적인 기능들을 담고 있는 버튼 필드입니다. (mode 스위치, 첫 프레임 이동, 이전 프레임, 재생 등)

2. 타임라인 그리고 이벤트를 보여줍니다. 유저가 정의한 이벤트도 여기에 노출되죠.

3. 노드 트리 관리 창입니다. 현재 노드에 영향을 끼치는 노드데이터도 포함합니다.

4. preview 필드입니다. 모든 미리보기 프레임들이 보여집니다.

5. 현재 선택한 노드에 들어있는 Animation clip의 dispaly 프로퍼티들의 리스트 입니다.

6. 클립의 기본 프로퍼티들입니다. 클립을 선택 후 기본 데이터는 이곳에 보여지고 수정되어집니다.

- Shortcut Key

• left：previous frame

• right：next frame

• up：Jump to the front key frame

• down：Jump to the behind key frame

• delete：Delete the selected keys

• k：Forward the animation

• j：Backward animation

• ctrl / cmd + left：Jump to the first frame

• ctrl / cmd + right：Jump to the last frame