클립 스튜디오 페인트를 사용하여 게임용 애니메이션 그래픽

CLIP STUDIO PAINT를 활용한 게임 애니메이션 그래픽 | 3부 중 3부

22,480

Dadotronic

이 3부작 시리즈를 마무리하며, 게임용 여러 에셋의 애니메이션 프로세스 속도를 높이는 파일 오브젝트 기능을 활용하는 방법과 게임 엔진에서 사용할 그래픽을 내보내는 방법을 보여드리겠습니다.

이 프로토타입에서는 모든 퍼즐 조각이 동일한 애니메이션을 공유합니다.

다음 단계에서는 이 작업을 효율적으로 수행하는 방법을 시연하겠습니다.

프록시 오브젝트 애니메이션 만들기

먼저, 나중에 다채로운 그래픽으로 대체될 프록시/템플릿 그래픽을 만들어 보겠습니다. 저는 단순히 빨간색 조각을 복사하여 회색으로 변경했습니다. 이 퍼즐 조각은 고양이와 블록의 두 부분으로 구성되어 있습니다.

그래픽을 투명 PNG로 내보냅니다.

이제 새 문서를 만들고 파일 - 가져오기 - 파일 오브젝트 생성을 사용하여 내보낸 그래픽을 파일 오브젝트로 배치합니다.

타임라인 패널을 활성화하고 새 타임라인을 만듭니다. 캐릭터와 마찬가지로, 조각별로 다른 애니메이션 시퀀스를 가질 수 있습니다. 저는 IDLE 애니메이션 루프부터 시작하겠습니다.

잊지 마세요 - INTERPOLATION을 활성화하려면 레이어를 선택하고 이 레이어의 키프레임 활성화를 클릭해야 합니다.

이전에 사용했던 동일한 방법을 사용하여, 플레이어가 힌트가 필요할 때 재생되는 이 루프를 애니메이션했습니다. 기본적으로 부품의 Squash and Stretch이지만 두 가지 약간 다른 속도로 적용됩니다.

새 타임라인을 만들어 다른 애니메이션 시퀀스를 추가하겠습니다. 이번에는 조각이 '폭발'하거나 (스테이지를 떠날 때) 움직이는 동작입니다.

아래에서 이 애니메이션의 주요 진행 상황을 볼 수 있습니다:

불투명도 속성을 사용하여 내부 조각이 사라지는 것을 애니메이션할 수 있었습니다. 불투명도가 애니메이션되면 키프레임 아래에 반쪽 다이아몬드가 표시됩니다.

뭔가 빠진 것 같아서 추가 레이어를 만들고 고양이 그래픽과 함께 회전할 '비틀기' 모양을 그렸습니다. 보간 모드로 애니메이션을 시도하기 전에 새로운 그림은 모두 파일 오브젝트로 변환하는 것을 잊지 마세요.

아래에서 이 애니메이션의 진행 상황을 볼 수 있습니다. 회전하는 그래픽은 흰색으로 변경되었고, 외부 조각은 불투명도가 애니메이션되어 전체 조각이 게임 장면에서 사라집니다.

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

애니메이션 그래픽 교체

좋습니다. 이 에셋에 대한 애니메이션이라면, 어떻게 게임의 다른 모든 그래픽에 전파할 수 있을까요?

간단한 방법을 보여드리겠습니다.

먼저 회색 프록시 오브젝트를 교체할 나머지 조각들을 내보내기부터 시작하겠습니다. 아래에서 볼 수 있듯이, 이 퍼즐의 주요 스테이지에 사용할 조각들의 다양한 색상(빨간색, 파란색, 녹색, 노란색)이 될 것입니다.

이제 애니메이션을 만든 파일로 돌아가, 교체하려는 조각의 레이어를 선택하고 파일 오브젝트 - 파일 오브젝트 파일 변경을 선택합니다.

내부 부분(고양이)과 외부 부분(프레임)에 대한 색상 그래픽을 찾습니다. 그래픽이 교체되고 애니메이션은 여전히 작동합니다.

각 색상 조각에 대해 이 과정을 반복하기만 하면 됩니다.

모든 조각이 교체되어 게임에 사용할 준비가 되었습니다:

끝입니다. 원본 파일(회색 그래픽으로 애니메이션된 파일)을 저장하지 않는 한, 이것을 템플릿으로 사용하여 애니메이션을 유지하면서 필요한 다른 그래픽이나 변형으로 콘텐츠를 교체할 수 있습니다.

이 기술은 여러 캐릭터가 등장하는 게임에 사용할 수 있습니다. 예를 들어, 먼저 게임에서 원하는 각 조각과 애니메이션이 포함된 템플릿(프록시) 피규어를 만들고, 나중에 이 그래픽에 '스킨'을 추가하여 동일한 애니메이션 루프를 적용할 수 있습니다.

애니메이션 내보내기

이것은 필수는 아니지만, 내보낼 이미지를 최적화하는 것을 제안합니다. 매우 중요한 것은 애니메이션의 대상이 '바운딩 박스' 안에 국한되어 주변에 추가 투명도(빈 공간)가 없는지 확인하는 것입니다.

좋은 팁은 다음과 같습니다: 그래픽 주위에 선택 상자를 만들고 애니메이션 타임라인을 이동하여 선택 영역 밖에 픽셀이 있는지 확인하는 것입니다.

아래 예시에서: 왼쪽 이미지는 머리 상단이 선택 영역 밖에 있는 것을 보여주고; 오른쪽 이미지는 스프라이트가 전체 애니메이션 동안 선택 영역 안에 있는 것을 보여줍니다.

선택 영역이 여전히 활성화된 상태에서 파일 - 애니메이션 내보내기로 이동하여 이미지 시퀀스를 선택합니다.

다음 대화 상자에서 이미지를 내보낼 폴더를 찾아 다음 옵션에 주의하세요:

파일 이름 지정: 파일 이름에 접두사를 추가합니다.

투명도를 유지하려면 PNG 형식을 선택합니다.

크기 설정에서 선택 영역을 선택하여 생성한 바운딩 박스 내의 이미지를 내보냅니다. (이 옵션에 대한 아래 주석 참조)

필요한 경우 이 화면에서 스프라이트 크기를 조정할 수도 있습니다.

//참고: 크기 설정 - 선택 영역 옵션은 CLIP STUDIO PAINT EX 버전에서만 사용할 수 있습니다. Pro 버전 사용자의 경우 내보내기 전에 이미지를 올바른 크기로 잘라낼 수 있습니다. //

완료되었습니다! 이제 이 이미지들을 게임 엔진에 로드할 수 있습니다.

거의 모든 게임 제작 툴킷은 이미지 시퀀스를 사용하여 애니메이션 캐릭터를 화면에 표시합니다. 이것이 가장 일반적인 기술이지만, 게임 개발에 있어서 최적화(이 단어 또 나옴)는 항상 선호된다는 점을 기억하는 것이 좋습니다.

다음 단계에서는 스프라이트 시트와 아틀라스 이미지를 만드는 데 사용할 수 있는 무료 독립형 도구를 보여드리겠습니다.

아틀라스 이미지 및 스프라이트 시트 만들기

게임 개발 시나리오에서 스프라이트 시트와 아틀라스 이미지는 시스템 메모리에 이미지를 로드하는 데 사용되는 처리 능력을 줄이는 데 도움이 됩니다.

애니메이션을 표시하기 위해 여러 PNG를 로드하는 대신, 애니메이션의 모든 프레임을 포함하는 단일 이미지와 좌표 및 정보가 포함된 데이터 파일을 제공하여 엔진이 스프라이트 시트를 '읽고' 특정 시간에 특정 이미지를 찾을 수 있습니다.

아틀라스 이미지는 동일하지만, 애니메이션 프레임 대신 게임의 다양한 그래픽을 단일 이미지에 압축하는 것입니다.

안타깝게도 CLIP STUDIO PAINT를 사용하여 스프라이트 시트 또는 아틀라스 이미지를 쉽게(자동으로) 만들 수 있는 방법은 없습니다.

이 예시에서는 'Free Texture Packer'라는 도구를 사용하겠습니다. 이것은 무료 도구이며 온라인 버전도 사용할 수 있습니다(이 기사의 각주에 링크).

다음은 사용 방법에 대한 단계별 설명입니다:

[ 1단계 ]

프로그램을 열고 이미지를 로드합니다. 이 (파란색) 영역으로 드래그 앤 드롭할 수도 있습니다.

[ 2단계 ]

이미지가 로드되면 스프라이트 시트의 속성을 조정하기 시작할 수 있습니다. 에셋이 엔진으로 어떻게 임포트되는지에 대한 세부 정보를 얻으려면 프로그래머 또는 리드 아티스트와 상의해야 합니다.

여기서 가장 중요한 옵션은 다음과 같습니다:

너비/높이는 스프라이트 시트/아틀라스의 크기입니다. 게임 엔진은 일반적으로 256, 512, 1024, 2048과 같은 맵에서 작동합니다… 대부분 POWER OF TWO 옵션을 선택해야 하며, 텍스처가 동일한 크기를 갖도록 강제해야 하는 경우 FIXED SIZE도 선택합니다.

ALLOW ROTATION, ALLOW TRIM 및 TRIM MODE를 변경하여 스프라이트 시트 안에 더 많은 이미지를 맞출 수 있습니다. Trim 및 Rotation 모드는 정적 이미지(아틀라스)에 대해 활성화하는 것이 선호됩니다. 애니메이션의 경우 스프라이트가 정렬되고 주변에 동일한 투명 공간이 있도록 해당 모드를 끄는 것이 더 안전합니다.

아래 예시에서는 소녀의 대기 애니메이션을 2048x2048 정사각형 텍스처로 패킹하도록 선택했습니다.

도구 내에서 애니메이션을 미리 보려면 오른쪽 패널에서 모든 이미지를 선택하고 애니메이션 버튼을 클릭합니다. 슬라이더를 사용하여 속도를 제어합니다.

프로세스를 완료하려면 데이터/좌표 파일의 형식을 선택하고(이것은 프로그래머와 사용하는 엔진에 따라 달라집니다), 저장할 폴더를 찾은 다음 내보내기를 클릭합니다.

최종 결과물은 텍스처 맵 이미지와 데이터 파일(모든 텍스트 편집기에서 열 수 있음)이 될 것입니다. 이들은 동일한 시간을 가져야 합니다.

결론

수년 동안 저는 Flash, Animate, 그리고 최근에는 Spine을 사용하여 프로토타입 및 인디 게임을 위한 간단한 애니메이션을 만들었습니다. 하지만 Celsys가 보간을 애니메이션 기능으로 추가했을 때, 마침내 제 워크플로를 더 단순화할 기회를 보았습니다.

이 시리즈가 유익했으며, 이 기술 중 하나라도 사용하여 첫 번째 게임 프로젝트를 시작할 수 있기를 바랍니다.

이러한 종류의 애니메이션 워크플로는 다른 유형의 프로젝트를 위한 에셋을 만드는 데 사용될 수 있다는 점을 기억할 가치가 있습니다: 스트림 또는 유튜브 채널용 애니메이션 그래픽, 소셜 미디어를 위한 재미있는 작은 GIF 및 밈, 또는 컷아웃 스타일을 사용한 애니메이션 단편까지도 만들 수 있습니다.

이 기사를 읽고 무언가를 만드셨다면 저에게 알려주세요. 제 피드에 여러분의 작업을 홍보할 수 있도록 도와드리겠습니다.

읽어주셔서 감사합니다.

다음 팁에서 만나요.