Clip Studio Paint를 사용하는 게임용 애니메이션 그래픽

CLIP STUDIO PAINT를 사용한 게임용 애니메이션 그래픽 | 2/3

23,434

Dadotronic

우리가 지금까지 배운 것

이 시리즈의 첫 번째 부분에서는 Clip Studio Paint에서 스프라이트를 만들고 편집하고 내보내는 방법을 배웠습니다.

이제 소프트웨어를 사용하여 애니메이션 스프라이트를 만들 차례입니다.

현재 업계에서 2D 게임용 애니메이션은 일반적으로 2D 뼈 및 메쉬 변형 시스템으로 만들어집니다. 스프라이트 조각은 특정 프로그램에서 가져와 그 주위에 다각형 메쉬를 만듭니다. 본은이 메시의 다른 영역과 관련되어있어 스프라이트를 3D 오브젝트처럼 '변형'하는 방법을 제공합니다. 그 결과 스프라이트의 전체 애니메이션에 대해 단일 이미지 만 있으면되는 매우 부드러운 애니메이션이 만들어집니다.

2D 본 애니메이션 시스템이 현재 추세이지만 컷 아웃 애니메이션 시스템을 사용하여 게임용 스프라이트를 만들 수 있습니다. 첫 게임, 프로토 타입 또는 호환 가능한 아트 스타일이있는 풀 게임에서 사용할 수있는 시간 절약 기술입니다.

이 방법은 비디오 용 애니메이션, 소셜 미디어 용 GIF 또는 스트림 채널 용 그래픽을 만드는 매우 접근하기 쉬운 방법입니다.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Clip Studio Paint의 컷 아웃 애니메이션

버전 1.84부터 보간을 사용하여 레이어의 내용에 애니메이션을 적용 할 수 있습니다. 이것은 애니메이션 툴셋에 대한 거대한 추가입니다.

재미있는 튀는 공 애니메이션을 수행하여이 새로운 기능을 배우겠습니다.

1. 새 파일을 만들고 튀기 위해 공을 그립니다.

2. 타임 라인 패널이 보이는지 확인하고이 새로운 타임 라인 버튼을 클릭하십시오. 확인 대화 상자에서 확인을 누르십시오.

3.이 작은 '실행 용지'버튼을 클릭하여이 레이어에서 키 프레임을 활성화하십시오. 현재 레이어에 추가 된 작은 아이콘에 유의하십시오.

4. 보조 도구를 OPERATION-OBJECT로 변경하면 보간이 활성화되어있는 동안 애니메이션을 적용 할 수있는 속성을 확인할 수 있습니다.

5. 타임 라인으로 돌아가서이 첫 번째 포즈의 키 프레임을 설정하겠습니다.

Ball 그래픽을 조금 움직여 프로그램이 키 프레임으로 등록 할 수 있습니다. 블루 다이아몬드 아이콘이 이제 타임 라인과 객체의 속성에 있음을 알 수 있습니다.

6. 타임 라인을 시간의 절반 부분 (예제에서는 프레임 10)으로 옮기고 볼을지면에서 위로 움직입니다. 먼저 타임 라인을 프레임 10으로 이동 한 다음 객체를 기억하십시오. SHIFT 키를 누르면 Y 축에서 볼의 움직임이 제한됩니다.

7. 이제 타임 라인을 프레임 20으로 옮기고 공을 다시 땅에 놓습니다.

Play를 누르면 작은 빨간 공이 살아 있습니다.

8. 공의 바운스를보다 재미있게하기 위해 타이밍 (각 키 프레임의 지속 시간 / 노출)을 조정하여 물체에 "무게"느낌을 추가 할 수 있습니다.

타임 라인으로 돌아가서 중간 키 프레임을 끝 키 프레임에 더 가깝게 클릭하고 드래그하십시오. 공은 상향 이동에 더 많은 시간을 소비하고 더 빨리 떨어집니다.

9. 이제이 애니메이션에 Squash and Stretch를 추가하여 좀 더 만화처럼 만들어 봅시다.

타임 라인으로 돌아가서 볼의 위쪽 이동 (예 : 프레임 7) 중간에 SCALE을 사용하여 모양을 조정하십시오. 볼을 Y 축으로 만 늘리십시오.

비 균일 스케일링을 활성화하려면 고정 화면비를 끄십시오. 모양의 볼륨을 유지하십시오. X로 늘리면 Y로 압축하거나 그 반대로 압축합니다.

10.이 예제를 마치기 위해 마지막 프레임 앞에 스쿼시 및 스트레치 프레임을 두 개 더 추가했습니다. 프레임 18에서는 볼을 Y (스트레치)로 길게 만들었고 프레임 19에서는 X (스쿼시)로 넓게 만들었습니다. 이렇게하면 공이 중력과지면에 미치는 영향에 반응하게됩니다.

각 프레임의 변형을 볼 수 있도록 보간이없는 균일 한 포즈가 있습니다.

다음은 보간법과 타이밍을 조정 한 최종 애니메이션입니다 (타임 라인을 단축하고 추가 프레임을 추가하고 가을이되기 전에 공을 하늘에 고정 시키면 전체 움직임이 더 빨라집니다).

캐릭터를 애니메이션하기 전에 FILE OBJECTS에 관한 것

튀는 공에 애니메이션을 적용하는 동안 TRANSFORM 도구 (회전, 크기 조정 및 이동)를 사용할 때 객체의 모양뿐만 아니라 변형을 위해 전체 캔버스 영역을 사용합니다.

좀 더 복잡한 객체에 애니메이션을 적용하려는 경우 문제가 될 수 있습니다. 이러한 상황에서는 공통 레이어 대신 FILE OBJECTS에 애니메이션을 적용하는 것이 좋습니다.

//이 이미지 정보 : 왼쪽 : 빨간 공이 레이어에 있고 변형 도구가 전체 문서 영역을 참조로 사용하여 객체를 변형합니다.

오른쪽 : 초록색 공은 파일 객체이며 이제 변형은 객체의 크기를 기준으로합니다.

FILE OBJECT는 외부 .CLIP 파일의 내용이 포함 된 컨테이너입니다. 이 파일 개체는 모든 문서에 배치 할 수 있습니다. 소스 파일의 모든 변경 사항은 파일 객체가 사용되는 문서에 반영됩니다.

예를 들어, FILE OBJECTS를 사용하여 메인 캐릭터를 만들어 봅시다.이 프로세스는 3D 소프트웨어 및 / 또는 Skeletal Animation 툴에서 캐릭터를 리깅하는 것과 같습니다.

파일 오브젝트를 사용하여 게임 스프라이트 리깅

새로운 문서를 생성하고 스프라이트의 완전한 이미지를 붙여 넣는 것으로 시작하여 리그를 만들기위한 템플릿으로 사용할 수 있습니다. 캔버스 크기를 조정하여 제작하려는 애니메이션을위한 공간을 확보하십시오.

스프라이트 조각을 가져 오려면 FILE-IMPORT-CREATE FILE OBJECT 옵션을 사용하십시오. 이 자습서의 첫 부분에서 만든 투명 PNG 또는 .CLIP 파일을 가져옵니다.

폴더에서 ITEM BANK 팔레트로 파일을 클릭하고 드래그 할 수도 있습니다.

모든 스프라이트를 캔버스에 놓고 OPERATION-OBJECT 하위 도구를 사용하여 부품을 정렬합니다.

부품의 Z 순서를 조정해야하는 경우 (오브젝트가 다른 오브젝트의 앞 / 뒤에 있음) 레이어 스택에서 해당 레이어를 위 또는 아래로 이동하십시오. 레이어를 빠르게 선택하려면 Ctrl + Shift를 누른 상태에서 캔버스를 클릭하십시오.

//이 이미지 정보 : 왼쪽 : 잘못된 레이어 순서, 오른쪽 : 부품의 올바른 겹침.

이제 애니메이션 워크 플로우를 준비하겠습니다. 타임 라인 팔레트를 캔버스의 한쪽으로 옮기는 것이 좋습니다. 애니메이션되는 내용을 이해하는 것이 더 쉽습니다.

NEW TIMELINE (새 타임 라인)을 클릭하고 애니메이션의 일부 속성을 설정하십시오. 예 : 애니메이션 시퀀스 이름 (유휴, 실행, 걷기); 애니메이션의 프레임 속도 (이 컷 아웃 스타일에는 12 또는 15fps가 적합 함) 및 사용할 프레임 수 (20부터 시작)입니다.

THUMBNAIL SIZE 옵션을 NONE으로 변경하여 타임 라인을보다 쉽게 관리 할 수 있습니다. 이 옵션은 다른 애니메이션 패키지 (Flash, Animate, Blender 등)와 유사하게 각 부분의 이름 만 표시합니다.

Clip Studio Paint에서 Interpolation으로 애니메이션을 만들려면 타임 라인에서이를 활성화해야합니다. 모든 레이어를 선택하고이 레이어에서 키 프레임 활성화를 클릭하십시오. 레이어 아이콘이 변경되었음을 알 수 있습니다.

이제 애니메이션의 첫 번째 프레임에서 스프라이트의 모든 레이어에서해야 할 일이 있습니다.

OPERATION-OBJECT 하위 도구를 사용하여 피스의 변형 피벗 (회전 중심)을 올바른 위치로 옮깁니다 (이 예에서는이 피벗을 중앙에서 헤드 하단으로 이동했습니다).

캐릭터의 팔도 어깨가있는 피벗이 필요합니다. 다음 단계로 이동하기 전에 각 부품의 피벗을 조정하십시오.

피벗 포인트를 설정하는 동안 리그에서 몇 가지 테스트를 수행하십시오. 애니메이션을 적용하는 가장 좋은 방법을 찾을 때까지 캐릭터의 관절을 회전하십시오.

예에서, 피봇이 잘못 배치되어 손이 작동하지 않습니다 ...

피벗 위치를 조정하면서 손의 관절을 회전시켜 팔 전체가 하나의 이미지로 만들어지는 환상을 만들 수 있습니다.

언제든지 ROTATION ANGLE 옵션을 0으로 설정하여 레이어의 회전을 재설정 할 수 있습니다. SCALE도 마찬가지입니다. 여기서 100으로 재설정 할 수 있습니다.

다음은 각 조인트의 피벗 포인트를 조정하는 방법에 대한 다이어그램입니다.

타임 라인에서 각 부분에 이미 키 프레임 세트가 어떻게 설정되어 있는지 확인하십시오.

일부 레이어에 키 프레임이없는 경우 캔버스에서 조각을 조금 이동하거나 키 프레임 추가 버튼을 사용하여 수동으로 키 프레임을 만듭니다.

끝난. 캐릭터 권한을 애니메이션 할 준비가되었습니다.

'유휴'유형의 애니메이션 애니메이션

캐릭터 리그가 설정되고 (피벗 조인트가 제자리에 있고 모든 부품이 키 프레임 됨) 이제 첫 번째 포즈를 애니메이션의 마지막 프레임에 복제 할 차례입니다.

여러 프레임을 복제하는 가장 쉬운 방법은 타임 라인에서 모든 키 프레임을 선택하고 ALT 키를 누른 상태에서 원하는 위치로 CLICK 및 DRAG하는 것입니다.

이제 타임 라인 선택을 애니메이션의 중간 부분으로 이동하고 캐릭터의 모든 부분 (다리 제외)을 선택한 다음 조금 아래로 움직입니다 (호흡의 위 / 아래를 만듭니다).

Ctrl + 왼쪽 마우스 클릭을 사용하여 레이어를 빠르게 전환하고 선택할 수 있습니다. 키보드 화살표를 사용하여 부품을 이동할 수도 있습니다.

이것이 결과입니다. 매우 간단하지만 시작입니다.

애니메이션의 강성을 깨는 "간단한"방법은 움직이는 부분의 타이밍을 변경하는 것입니다. 아래 예에서 나는 몸의 키 프레임 (소녀 + 신체 레이어)을 지연 시켰습니다 (왼쪽으로 이동). 다른 부분보다 시간이 더 빠릅니다. 나는 또한 그녀의 팔과 손을 비례 적으로 지연시켰다.

마지막으로, 나는 머리와 머리카락의 키 프레임을 지연 시켰습니다.

전체 아이디어는 가슴에서 시작하여 철도 차량처럼 다른 부분을 순서대로 드래그하는 움직임을 시뮬레이션하는 것입니다.

타이밍에 관해서, 당신은 그 미묘한 변화를 알기 위해 눈을 훈련해야합니다. 어떤 부분이 다른 부분보다 먼저 움직이기 시작하는지보십시오.