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

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

12,394

Dadotronic

이 3 부 시리즈를 마치기 위해 File Object 기능을 활용하여 게임에 대한 여러 자산의 애니메이션 프로세스 속도를 높이는 방법과 게임 엔진에 사용하기 위해 그래픽을 내보내는 방법을 보여 드리겠습니다.

이 프로토 타입에서 퍼즐의 모든 부분은 동일한 애니메이션을 공유합니다.

다음 단계에서는이 작업을 수행하는 효율적인 방법을 보여 드리겠습니다.

프록시 객체 애니메이션

먼저 나중에 화려한 그래픽으로 대체 될 프록시 / 템플릿 그래픽을 만들어 보겠습니다. 나는 단순히 빨간색 조각의 사본을 만들어 회색으로 변환했습니다. 이 퍼즐 조각은 고양이와 블록의 두 부분으로 구성됩니다.

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

이제 새 문서를 만들고 FILE-IMPORT-CREATE FILE OBJECT를 사용하여 내 보낸 그래픽을 File Objects로 배치하십시오.

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

인터폴레이션을 사용하려면 레이어를 선택하고이 레이어에서 키 프레임 사용을 클릭해야합니다.

앞에서 사용한 것과 같은 방법을 사용하여 플레이어에 힌트가 필요할 때 재생되는이 루프에 애니메이션을 적용했습니다. 기본적으로 부품의 스쿼시와 스트레치이지만 약간 다른 속도입니다.

또 다른 애니메이션 시퀀스를 추가하기 위해 새로운 타임 라인을 만들겠습니다. 이번에는 작품이 폭발하거나 무대를 떠날 때의 움직임입니다.

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

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

뭔가 빠진 느낌이 들기 때문에 여분의 레이어를 추가하고이 '트위스트'모양을 그려 고양이 그래픽으로 회전했습니다. 보간 모드로 애니메이션을 적용하기 전에 새 도면을 파일 객체로 변환하는 것을 잊지 마십시오.

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

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

애니메이션 그래픽 교체

승인. 이것이이 자산에 대한 애니메이션 인 경우 게임의 다른 모든 그래픽에 어떻게 전파 할 수 있습니까?

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

회색 프록시 객체를 대체 할 나머지 조각을 내보내는 것으로 시작하겠습니다. 그것들은 아래 그림과 같이이 퍼즐의 주요 단계에서 가질 수있는 다른 색 (빨강, 파랑, 녹색 및 노랑)입니다.

이제 애니메이션을 생성 할 파일로 돌아가서 교체 할 조각의 레이어를 선택하고 파일 객체-파일 객체의 파일 변경을 선택합니다.

내부 부분 (고양이)과 외부 부분 (프레임)에 대한 컬러 그래픽을 찾으십시오. 그래픽이 교체되고 애니메이션이 여전히 작동합니다.

각 색상 조각에 대해 프로세스를 반복하면됩니다.

다음은 게임을 위해 교체되고 준비된 모든 조각입니다.

그게 다야 소스 파일 (회색 그래픽 애니메이션 파일)을 저장하지 않는 한이 파일을 템플릿으로 사용하여 애니메이션을 유지하면서 필요한 다른 그래픽이나 변형으로 내용을 바꿀 수 있습니다.

이 기법은 여러 캐릭터가있는 게임에서 사용할 수 있습니다. 예를 들어 먼저 템플릿 (프록시) 도형을 만들고 게임에서 원하는 각 조각과 애니메이션을 완성한 다음 나중에이 그래픽에 '스킨'을 추가하여 동일한 애니메이션 루프.

애니메이션 익스포트

필수는 아니지만 내보낼 이미지를 최적화하는 것이 좋습니다. 매우 중요한 것은 애니메이션의 주제가 주변에 여분의 투명성 (빈 공간)없이``바운딩 박스 ''에 한정되도록하는 것입니다.

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

아래 예에서 : 왼쪽 이미지는 헤드 상단이 선택 영역을 벗어나는 방법을 보여줍니다. 오른쪽 이미지는 전체 애니메이션을 통해 스프라이트가 선택 영역 내에 어떻게 나타나는지 보여줍니다.

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

다음 대화 상자에서 이미지를 내보낼 폴더를 찾고 다음 옵션에주의하십시오.

-파일 이름 지정 : 파일 이름의 접두사를 추가하십시오.

투명도를 유지하려면 PNG 형식을 선택하십시오.

크기 설정에서 선택 영역을 선택하여 생성 한 경계 상자 내에서 이미지를 내 보냅니다. (이 옵션에 대해서는 아래 참고 사항을 참조하십시오)

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

// 참고 : 크기 설정-선택 영역 옵션은 Clip Studio Paint EX 버전에서만 사용할 수 있습니다. Pro 버전을 사용하는 경우 내보내기 전에 이미지를 적절한 크기로자를 수 있습니다. //

끝난! 이제 게임 엔진에 해당 이미지를로드 할 수 있습니다.

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

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

아틀라스 이미지 및 스프라이트 시트 생성

게임 개발 시나리오에서 Sprite Sheets 및 Atlas Images는 시스템 메모리에 이미지를로드하는 데 사용되는 처리 능력을 줄이는 데 도움이됩니다.

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

Atlas 이미지는 동일하지만 애니메이션 프레임 대신 다양한 게임 그래픽을 단일 이미지로 압축합니다.

불행히도 Clip Studio Paint를 사용하여 스프라이트 시트 또는 Atlas 이미지를 만드는 쉬운 (자동) 방법은 없습니다.

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

사용 방법은 다음과 같습니다.

[ 1 단계.]

프로그램을 열고 이미지를로드하십시오. 이 파란색 영역으로 끌어서 놓을 수도 있습니다.

[ 2 단계.]

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

가장 중요한 옵션은 다음과 같습니다.

-너비 / 높이는 스프라이트 시트 / 아틀라스의 크기입니다. 게임 엔진은 일반적으로 256,512,1024,2048의 맵에서 작동합니다. 텍스처의 크기를 동일하게 유지하려면 POWER OF TWO 옵션을 대부분 확인해야합니다.

-회전 허용, 트림 허용 및 트림 모드를 변경하여 스프라이트 시트에 더 많은 이미지를 넣을 수 있습니다. 정적 이미지 (아틀라스)에서는 트리밍 및 회전 모드를 사용하는 것이 좋습니다. 애니메이션의 경우 애니메이션을 끄면 안전하므로 스프라이트가 정렬되고 그 주위에 동일한 투명 공간이 있습니다.

아래 예제에서는 Girl idle 애니메이션을 2048x2048의 제곱 텍스처로 묶습니다.

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

프로세스를 마치려면 데이터 / 좌표 파일의 형식 (프로그래머와 사용중인 엔진에서 알려줍니다)을 선택하고 저장할 폴더를 찾은 다음 내보내기를 클릭하십시오.

최종 결과는 텍스쳐 맵 이미지와 데이터 파일 (모든 텍스트 편집기에서 열 수 있음)입니다. 결과는 동일해야합니다.

결론

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

이 시리즈가 유익하고이 기술을 사용하여 첫 게임 프로젝트를 시작할 수 있기를 바랍니다.

이 유형의 애니메이션 워크 플로는 다른 유형의 프로젝트 (스트림 또는 유튜브 채널의 애니메이션 그래픽, 소셜 미디어의 재미있는 작은 gif 및 밈 또는 컷 아웃 스타일을 사용하는 애니메이션 단편)에 대한 자산을 만드는 데 사용할 수 있습니다.

이 기사를 읽은 후 무언가를 만들면 내 피드에서 작업을 홍보 할 수 있도록 알려주십시오.

읽어 주셔서 감사합니다.

다음 팁에서 See겠습니다.

-다도