Chapter 06. 애니메이션 (Animation)

1. Chapter 06. 애니메이션(Animation)

2. 애니메이션의 개요 (1) 애니메이션의 정의 • 애니메이션은 생명이 없는 사물에 영혼이나 정신을 부여하는 행위로 정의 할 수 있다. 즉, 애니메이션은 생명을 지니지 않은 것이 작자의 의도에 따라 의인화되어 필름이나 VTR등의 영상매체를 통하여 창조되는 기술이나 기법을일컫는다. • 또한 애니메이션은 낱장의 그림 또는 사물의 이동을 한 프레임(frame)식 촬영하여 마치 살아 있는 것과 같은 효과를 보여주는 영화를 말하기도 하며 더 나아가서 시간, 운동, 빛에 대한 모든 영상언어와 영상기술을 총칭한다. • 현재 우리들이 접할 수 있는 대부분의 TV만화 시리즈, 단편 만화영화, 극장판 장편 만화영화등의 애니메이션이 이 정의에 포함된다.

3. 애니메이션의 개요 (2) 애니메이션의 원리 • 애니메이션은 일련의 정지 이미지(still image)를 연속적으로 보여주어 그 이미지을 보는 사람으로 하여금 이미지들을 연속된 동작으로 착각하도록 한다. • 이러한 현상은 잔상효과(persistence of vision)에 의한 것으로 잔상효과란 이미지가 이미 사라졌음에도 불구하고 사람의 눈이나 뇌에 계속 남아 있으려는 경향을 일컫는다. • 일반적으로 초당 15장 이상의 그림이 보여지면 자연스러운 움직임을 얻을 수 있다. 텔레비젼, 영사기, 비디오 플레이어는 각각이 표시하는 초당 프레임율이 다르지만 모두 잔상효과를 이용하고 있다.

4. 원본 애니메이션(상)과 각 프레임(하)

5. 애니메이션의 종류 • 애니메이션은 컴퓨터가 등작하기 이전의 2차원을 기반으로 하는 전통적인 애니메이션과 컴퓨터에 의해서 만들어지는 애니메이션 그리고 특수효과로 나뉠 수 있다. • 2차원 기반의 전통적인 애니메이션 • 플립북 애니메이션 (Flip-book animation) • 셀 애니메이션 (Cel animation) • 키프레이밍과 인비트윈 (Keyframing and In-between)

6. 애니메이션의 종류 • 컴퓨터 애니메이션 (Computer animation) • 트위닝 (Tweening) • 스프라이트 애니메이션 (Sprite animation) • 벡터 애니메이션 (Vector animation) • 스크립트 애니메이션 (Script animation) • 3차원 컴퓨터 애니메이션 (3D computer animation) • 키프레이밍 애니메이션 (Keyframing animation) • 역운동학 (Inverse kinematics) • 특수 효과 (Special effect) • 로토스코핑 (Rotoscoping) • 모핑 (Morphing) • 절차적 방법 (Procedual method) • 미립자 시스템 (Particle system)

7. 애니메이션의 종류 셀 애니메이션 3D 애니메이션 크레이 애니메이션

8. 연도 사건 또는 애니메이션 의미 1908 프랑스 에밀 콜(Emil Cohl)의 '판타즈마고리(Fantasmagorie)' 공인된 최초의 애니메이션 1913 미국에서 존 랜돌프가 셀 애니메이션 기법 개발 셀 애니메이션 기법이 애니메이션의 표준으로 정착 1918 윈저 맥케이 애니메이션 다규멘터리 '루시타니아 호의 침몰' 최초의 애니메이션 다큐멘터리 1937 기존 애니메이션 스타일을 탈피한 서정적 내용에 캐릭터의 리얼리티를 추구한 장편 애니메이션'백설공주‘(디즈니 장편) 최초의 장편 애니메이션 1961 존 휘트니 시니어는 최초의 CG애니메이션 '카달로그(Catalog)' 최초로 CG 애니메이션 사용 1967 신동헌의 애니메이션 '홍길동' 국내 최초 장편 애니메이션 1985 스티브 한 3차원 애니메이션 '스타체이셔' 최초 3차원 애니메이션 사용 1995 디즈니의 3차원 애니메이션 '토이스토리' 최초의 온전한 3차원 애니메이션 (Full 3D animation) 1998 2001 2001 드림웍스의 3차원 애니메이션 '개미' Square 사의 '파이널 환타지' Disney / Pixar사의 '몬스터 주식회사' 실제와 흡사한 얼굴 애니메이션 사용 정교한 모션 캡쳐와 사실적인 피부 묘사 사실적인 털의 묘사 애니메이션 연보

9. 애니메이션 연보 • 1986: Luxo Jr. nominated for Oscar first CGI film to be nominated – Pixar • 1998: Geri's Game (Pixar) awarded the Academy Award for Animated Short • 2003: ICE AGE nominated for Best Animated Feature Film

13. 애니메이션 종류 6.2.1 전통적인 애니메이션 (1) 플립북 애니메이션 (Flip-book Animation) • 플립북 애니메이션은 가장 기본이 되는 애니메이션으로 프레임(Frame-based) 애니메이션이라고도 한다. • 애니메이션 내에 존재하는 모든 프레임을 한장 한장 그려나가는 것으로 어렸을 때 책의 가장 자리에 그림을 그려 빠르게 넘기면 나타나는 효과를 떠올리면 된다(오른쪽 그림 참조). • 플립북 애니메이션은 파일의 크기가 크기 때문에 인터넷과 같이 제한된 데이터 전송 환경에서는 사용하기 힘들다는 단점이 있다. 예제

14. 애니메이션 종류 (2) 셀 애니메이션 (Cel Animation) • 1913년 존 랜돌프가 개발하여 지금에 이르는 모든 전통적 애니메이션은 이 방법으로 만들어졌다. • 셀 애니메이션의 "CEL"이란 단어는 투명한 종이를 뜻하는 Celluloid의 "CEL"을 의미한다. • 애니메이션을 만들기 위해서는 하나의 배경 cel과 여러장의 전경 cel이 필요하고, 일반적으로 이러한 cel들이 여러 개의 층을 이루어 하나의 프레임을 만들어 낸다.

15. 애니메이션 종류 Example2: animated frames compile together Address: http://users.evtek.fi/~jung/B/egpicture/movieexample1.gif

16. 애니메이션 종류 6.2.2 컴퓨터 애니메이션 (1) 스프라이트 애니메이션 (Sprite-based Animation) • 스프라이트(Sprite)는 애니메이션에서 독립적으로 움직이는 개체를 말한다. • 아케이드 게임 속에 등장하는 캐릭터들의 애니메이션이 이 항목에 속한다. • 스프라이트 애니메이션은 플립북 애니메이션과는 달리 스프라이트 만을 다시 그려주면 되므로, 파일의 크기나 요구되는 데이터 전송 대여폭도 플립북 애니메이션보다 적다.

17. 애니메이션 종류 (2) 벡터 애니메이션 (Vector Animaton) • 이 방식은 스프라이트가 Bitmap이 아닌 수학적인 공식으로 이루어진 것을 제외하면 스프라이트 애니메이션과 같다. • 인터넷에서 사용되는 쇽웨이브(Shockwave) 파일 포맷이 이 방법을 사용한다. • 스프라이트를 수식으로 표현하므로 파일의 크기는 스프라이트 애니메이션 보다 작다는 장점이 있다. • 벡터 애니메이션의 또 하나의 장점은 크기에 상관 없이 깨끗하게 보여진다는 것이다. 이러한 성질을 Scalable하다고 한다. .

18. 애니메이션 종류 (3) 키 프레임과 트위닝 (Key-frame and Tweening) • 일반적인 만화영화 제작에서, 숙련된 애니메이터는 키 프레임(Key frame)이라는 중요한 장면만을 그리고 그 나머지는 값싼 애니메이터를 이용해 애니메이션을 완성해 나간다. • 트위닝은 이러한 키 프레임 사이(Between)를 채우면서 애니메이션을 만든다는 의미의 IN-BETWEENING에서 유래되었다 예제

19. 애니메이션 종류 6.2.3 특수효과 • 모핑 (Morphing) • 2개의 서로다른 이미지나 3차원 모델 사이의 변화하는 과정을 서서히 나타내는 것을 모핑이라 한다. • 3차원 모핑은 마이클 잭슨의 뮤직 비디오 "Dangerous"와 영화 "터미네이터 2", 우리나라의 영화 "구미호", "은행나무 침대"등를 통해서 세상에 알려지기 시작했다. • 모핑의 원리는 의외로 간단하다. 처음 프레임과 마지막 프레임을 지정해 주고 나머지는 컴퓨터가 생성하도록 한다. 이러한 과정을 인터폴레이션(Interpolation)이라 한다. • Dissolving + Warping

20. Feature Based Morphing Feature Matching Image Warping Image Warping Morphed Image

21. Warping Warping Morphing Feature Based Morphing Black Or White-Michael Jackson

22. 애니메이션 종류 (2) 로토스코핑 (Rotoscoping) • 로토스코핑은 Betty Boop과 뽀빠이에게 생명을 불어넣기 위해서 1915년 경 Max Fleischer이 개발 • 로토스코핑은 크게 2가지 의미로 쓰이는데 • 하나는 실제 영화의 한 장면에 애니메이션을 삽입하는 것이고, • 다른 하나는 사진속에 있는 특정 인물이나 사물을 투명종이 위에 그려 넣는 작업을 말한다. • 대개 로토스코핑은 전자보다는 후자를 일컫는다. 원본의 이미지에 다른 이미지를 추가하는 로토스코핑 "누가 로저래빗을 모함했나?"

23. 애니메이션 종류 (3) 미립자 시스템 (Particle System) • 비, 불, 연기, 폭발등의 자연 현상들을 시뮬레이션 하기에 좋은 컴퓨터 애니메이션 • Particle System에서는 분자들의 다발에 대해 그 행동과 특성을 하나하나 부여해 비디오나 영화에서 폭발등의 특수효과에 사용한다.영화 트위스터는 토네이도를 시뮬레이션 하기 위해 미립자 시스템을 사용하였다 '트위스터(Twister)'의 토네이도 (tornado) 담배연기

24. 애니메이션 기법 6.3.1 전통적인 기법 (1) 양파껍질 효과 (Onion-skinning) • Onion-skinning은 부드러운 동작을 만들어내기 위해 셀 애니메이션에서 사용되었던 방법을 빌려 온 것으로, 양파 껍질이 투명하다는 사실에서 이같은 용어가 사용된 것이다. • 셀 애니메이션에서 셀이 가지는 의미는 애니메이터들이 어느 한 프레임에 대한 작업을 진행하는 동안 그 전후 프레임을 볼 수가 있다는 것이다. • 셀과 유사한 개념인 Onion-skinning을 사용하면, 한 눈으로 프레임의 처음부터 끝까지 볼 수 있어, 프레임이 어떤 식으로 흘러 가는지 쉽게 알아 볼 수 있다.

25. 애니메이션 기법 • Macromedia Director, Fractal Design Painter, FutureWave CelAnimator등과 같은 2차원 애니메이션 프로그램들이 Onion-skinning을 지원한다. Flash에서의 양파껍질 효과

26. 애니메이션 기법 (2) 도려내기 효과 (Cut-out) • Cut-outs 역시 셀 애니메이션에서 사용되었던 방법으로, 손을 흔드는 등과 같이 캐릭터의 동작이 정해져 있을 경우에 캐릭터의 몸 전체를 다시 그리는 것보다는 손만을 다시 그리는 것이 효과적이다. 따라서 캐릭터의 몸은 한 번만 그려서 백그라운드로 사용하고, 분리되어 있는 손과 합성되어 동작을 만들어 낸다. • Macromedia FreeHand에서는 이러한 Cut-out를 쉽게 생성할 수 있도록 지원한다. 예제

27. 애니메이션 기법 (3) 가감속 (Ease-out/Ease-in) • 실세계에서 사물들은 항상 같은 속도로 움직이는 것은 아니다. 예들 들어, 차가 출발할 때 서서히 가속이 되고, 커브를 돌 때는 속도가 준다. • 애니메이션에서 출발이나 정지, 회전과 같이 하나의 동작에서 다른 동작으로의 이동은 전형적으로 키 프레임(Key frame)을 사용한다. 한 물체가 키 프레임으로 다가가거나 멀어질 때, 점차 느려지는 것을 ease-in, 점차 빨라지는 것을 ease-out이라고 한다. (4) 반복 (Cycling) • 많은 동작들은 반복적이어서 여러 개의 프레임을 하나의 cycle이나 loop로 만들 수 있다. • 가장 기본적인 cycle은 걷기 동작이다. • 한 번 cycle를 만들면 그 cycle을 반복하면서 무한정으로 움직이게 할 수 있다.

28. 애니메이션 기법 6.3.2 효과적인 애니메이션을 위한 기법 (1) 찌그러짐과 늘어남 (Squash and Stretch) • 찌그러짐과 늘어남은 물체가 유연성이나 탄성을 갖도록 하여 고무와 같이 부드럽고 물컹거리는 느낌을 갖도록 한다는 것이다. 따라서 물체가 멈추거나 방향을 바꿀 때 또는 딱딱한 물체에 부딪혔을 때 움직이는 방향으로 물체가 압축되어 눌린다.   • 찌그러지거나 늘어나는 효과는 움직이는 물체가 무게가 있다는 것을 느끼도록 하거나, 짓눌리고 잡아 당겨지는 동작을 강조하기 위해 사용되는 방법이다.

29. 애니메이션 기법 찌그러짐과 늘어남의 예

30. 애니메이션 기법 (2) 보조 액션과 중첩 액션 (Secondary Action/Overlapping Action) • 보조 액션(Secondary Action)은 주액션(Main Action)에 더해지는 간단한 동작을 말한다. • 이렇게 만들어진 보조 액션을 주 액션에 더하여 애니메이션을 완성하여 나가는 것을 중첩 액션(Overlapping Action)이라 한다. • Characters should exist in a real environment • Extra movements should not detract

31. Example: Body movement is the primary action, facial expression is the secondary action Secondary Action

32. Example: Luxo Jr. made smaller to give idea of a child. 애니메이션 기법 (3) 과장 (Exaggeration) • 과장(Exaggeration) 역시 애니메이션에 강한 인상을 심어 줄 수 있는 좋은 방법이다. • 특히, 웹에서의 애니메이션은 데이터 전송의 한계성을 가지므로 애니메이션의 크기가 작아 경우에 따라 색깔과 동작을 과장(Exaggeration)을 통하여 이용자의 눈에 띄도록 해야 한다.

33. Example: Goofy prepares to hit a baseball. 애니메이션 기법 4) 예상(Anticipation) • Don’t surprise the audience • Direct their attention to what’s important

34. Example: after throwing a ball Follow Through 애니메이션 기법 Termination part of an action. Audience likes to see resolution of action Discontinuities are unsettling

35. Spacing of inbetween frames to achieve subtlety of timing and movement. Slow in and Out 애니메이션 기법

36. What techniques used for Wally B.?

37. What do you think Wally B’s going to do?

38. The Action: Zooooooooooommmm!

39. Termination: Poof! He’s gone!

40. 3차원 컴퓨터 애니메이션 6.3.3 3차원 컴퓨터 애니메이션 (1) 키프레임 애니메이션 (Key-frame animation) • 키 프레임 애니메이션은 2차원 애니메이션 뿐만 아니라 3차원 애니메이션에서도 가장 널리 사용되는 기법으로 • 스토리보드의 작성 • 물체의 표현 • 키 프레임의 설정 • 인비틴(In-between) 프레임의 생성 과정을 거친다. • 제작자는 애니메이션 소프트웨어를 이용하여 단지 키 프레임만을 생성하고 중간에 속해있는 프레임(인비틴 프레임)들은 컴퓨터에 의해 자동으로 생성된다.

41. 3차원 컴퓨터 애니메이션 • 키 프레임을 이용한 애니메이션을 제작하는 화면

42. 3차원 컴퓨터 애니메이션 (2) 역운동학 (Inverse Kinematics) • 역운동학은 3차원 모델의 각 부분들을 하나의 모델로 연결하는 방법으로 인간이나 로보트와 같이 계층적으로 구성된 구조체를 표현하기에 적절한 방법이다. • 역운동학을 사용하면 물체의 한 부분이 움직였을 때 연결된 부분들이 자연스럽게 그 부분을 따라가도록 할 수 있다. 운동학(좌)과 역운동학(우)

43. 운동학과 동력학 (Kinematics & Dynamics) • Kinematics is that branch of physics which involves the description of motion, without examining the forces which produce the motion. • Dynamics, on the other hand, involves an examination of both a description of motion and the forces which produce it.

44. ? End Effector Base Forward vs. Inverse Kinematics • Forward Kinematics • Compute configuration (pose) given individual DOF values • Good for simulation

45. End Effector Base Forward vs. Inverse Kinematics • Inverse Kinematics • Compute individual DOF values that result in specified end effector position • Good for control

46. 3차원 컴퓨터 애니메이션 (3) 모션 캡쳐 (Motion Capture) • 모션 캡쳐는 인간의 움직임을 만들어내는 가장 자연스러운 방법으로 3차원 컴퓨터 애니메이션의 생성을 위해 가장 많이 사용되는 기술이다. • 인간의 움직임을 손으로 그리는 것이 아니라 직접 캡쳐(Capture)하여 움직임의 정보를 3차원으로 저장하며, 움직임을 추적하기 위해 마커(Marker) 또는 트랙커(Tracker)라 불리는 센서를 사용한다. Vicon사의 카메라 마커 모션 캡쳐에 쓰이는 장비

47. 3차원 컴퓨터 애니메이션 모션 캡쳐를 사용한 게임제작 장면

49. 3차원 컴퓨터 애니메이션 (4) 절차적 애니메이션 (Procedural Animation) • 특정 물체에 대한 알고리즘을 만들어 움직임을 생성하는 기술을 '절차적 방식에 의한 애니메이션'이라고 한다. • 절차적 방식은 미립자 시스템(Particle system)이나 유동 표면(Flexible surface)과 같은 자연 현상이나 사람이 직접 제어하기에는 복잡한 시스템에 적용될 수 있다. • Physics-based modeling/animation • Particle systems • Flexible dynamics • Rigid body dynamics • Fluid dynamics • Fur & hair dynamics • Alife (artificial life) • Behavioral animation • Artificial evolution • Branching object generation

50. 웹 애니메이션 웹은 네트웍을 사용하는 특성 때문에 웹페이지에 용랑이 큰 애니메이션 파일을 삽입하는 것은 그 웹페이지를 사용하는 사람들에게 부담으로 작용할 수 있다. 스트리밍(streaming)과 플러그인(plug-in)은 적은 용량으로도 효과적인 애니메이션을 지원하는 기술이다. 6.4.1 기본적인 웹 애니메이션 (1) 애니메이션 GIF (Animation GIF) • 앞서 설명한 바와 같이, GIF 파일에 기반한 애니메이션으로 HTML문서에 삽입된 이미지 정보로 사용된다. • GIF 애니메이션은 일반적으로 광고에 많이 쓰이며, 그 외에 강조할 부분 앞에 위치시켜 이용자의 관심을 끈다. • 파일의 크기가 작은 것에도 불구하고 좋은 질을 제공하기 때문에 현재 인터넷에서 가장 많이 사용되는 애니메이션이다.