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

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

21,922

133

Dadotronic

이 기사에서는 Clip Studio Paint를 사용하여 게임용 그래픽 (스프라이트)을 만드는 방법을 설명합니다.

이 시리즈는 세 부분으로 구성됩니다.

[Part 1] Clip Studio Paint 만 사용하여 모바일 게임 프로토 타입을위한 애니메이션 지원 스프라이트를 만드는 프로세스를 설명하겠습니다.

[Part 2] 애니메이션에 중점을 두겠습니다. 컷 아웃 스타일 방법을 사용하여 시퀀스에 애니메이션을 적용하고 소프트웨어에서 사용할 수있는 새로운 보간 기능을 소개합니다.

[Part 3]은 내보내기와 다른 자산 생성 속도를 높이기 위해 사용할 수있는 몇 가지 팁과 정보를 제공합니다.

해보자

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

단계 계획

무엇보다도 게임 개발을위한 자산을 만들 때는 최종 디스플레이 출력을 고려해야합니다.

그래픽을 만들기위한 최상의 화면 비율과 해상도에 대해 조사하거나 단순히 팀 (Lead Artist, Producer 또는 Programmer)과 대화하는 것이 좋습니다.

[경험상 :]

-벡터 아트는 항상 선호되지만 속도가 느립니다.

게임 스타일이이 생성 방법을 지원하는 경우 대부분의 그래픽을 벡터 모드로 만듭니다.

-래스터 / 비트 맵 그래픽은 더 빠르지 만 아트 작업 후에 해상도를 높여야 할 경우 스케일링 문제가 발생할 수 있습니다.

최종 해상도 크기의 최소 두 배 로 자산을 만드십시오. 항상 생성 된 스프라이트의 해상도가 더 높습니다.

이 프로젝트에서는 비트 맵 / 래스터 모드로 에셋을 만들겠습니다.

아트 워크를 만드는 데 가장 적합한 이미지 크기를 참조하기 위해 게임이 게시 될 것으로 예상되는 플랫폼의 일반적인 화면 해상도에 대해 빠르게 조사했습니다.

연구에서 두 가지 주요 정보를 얻었습니다.

에이. 최대 화면 해상도는 2224 픽셀 (파란색 영역)입니다.

비. 게임이 모바일 및 태블릿 장치에서 작동 할 수 있도록하려면 중요한 그래픽을 1080 픽셀 (빨간색 영역)에 가깝게 배치해야합니다.

대지 만들기

이전 정보를 염두에두고이 게임 모형에 대한 모든 그래픽이 포함 된 아트 보드를 만들었습니다. 이렇게하면 게임에 대해 더 잘 알 수 있으며 배치 작업을 수행 할 수 있기 때문에 제작 과정에서 일관성을 유지하는 것이 더 쉽습니다.

//이 이미지 정보 : 스케치북에서 아트 보드로 개념을 가져 와서 대략적인 그림을 바로 시작했습니다. 모든 그래픽을 같은 파일에 모으면 관계 (크기 및 색상)를 확인하는 데 도움이됩니다.

이 시리즈의 후반부에서는이 스프라이트에서 애니메이션 잘라 내기 방법을 사용합니다. CLIP STUDIO PAINT에서 일반적으로 사용되는 일반적인 프레임 별 방법은 아닙니다.

이것이 작동하려면 움직일 각 부분을 그리고 분리해야합니다.

이 단계에서 모든 객체에 대해 서로 다른 모든 레이어 (선, 색상, 음영)를 처리해야하는 경우 프로세스가 매우 번거로워집니다.

여기서 제안은 [창조 / 만들기에 집중하고 나중에 조직을 떠나는 것]입니다.

이 예에서 아래의 모든 그래픽은 단일 도면처럼 만들어졌습니다. 선 레이어, 다른 색상은 평면, 음영 등입니다.

//이 이미지 정보 : 내 아트 보드에서 모든 그래픽은 동일한 레이어 구조를 공유합니다. 동시에 만들고 구성하려고하면 창의적인 프로세스가 중단됩니다.

조각 구성 및 내보내기

CLIP STUDIO PAINT는 다음과 같은 경우 선택한 여러 레이어에서 (이동, 복사 / 잘라 내기 / 붙여 넣기 및 픽셀 지우기) 조작 할 수있는 매우 지능적인 기능을 제공합니다.

(A) 레이어 스택에서 선택됩니다.

(B) 모두 레이어 그룹을 통해 선택됩니다.

//이 이미지 정보 : CLIP STUDIO PAINT에서 선택한 여러 레이어의 픽셀을 선택하고 영향을 줄 수 있습니다. 레이어를 병합하지 않고도 그림의 일부를 수정하는 데 매우 유용한 기능입니다.

이제 스프라이트의 각 부분을 올바르게 내 보내서 Clip Studio Paint에서 컷 아웃 애니메이션을 만들거나 다른 애니메이션 도구 (Spine, Spriter, Unity)에서 사용할 수있는 Atlas Image를 만들 수 있습니다.

//이 이미지 정보 : Atlas는 여러 스프라이트를 포함하는 큰 이미지입니다.이 경우 장치는 게임이나 캐릭터에 사용할 모든 스프라이트가 포함 된 단일 이미지를로드 (호출)하면되기 때문에 메모리 소비가 줄어 듭니다.

내보내기 프로세스 속도를 높이기 위해 여러 가지 방법을 시도했습니다. 다음은이 작업을 수행하는 가장 효과적인 방법이라고 생각하는 일련의 단계입니다.

[ 1 단계.]

레이어 스택에서 그래픽을 만드는 데 사용 된 모든 레이어 (선, 색상, 음영 등)를 선택하십시오. 다음으로 올가미 도구를 사용하여 Sprite에서 변형 할 영역을 선택합니다 (이 예에서는 Girl의 머리 만 내보내겠습니다).

[ 2 단계.]

선택이 활성화 된 상태에서 편집-복사 (또는 CTRL + C)로 이동 한 다음 파일-새 콘솔에서 생성

[STEP 3.]

스프라이트 조각과 파일 구조 (나중에 편집에 유용한)로 새 파일이 만들어졌습니다. 이제 용지 레이어의 가시성을 끄고 스프라이트의 배경이 투명 해집니다.

// 중요 : 스프라이트가 사각형 안에 정확히 어떻게 포함되어 있는지 확인하십시오. 주변에 여분의 공간이 없습니다. 엔진 용 스프라이트를 내보낼 때 좋습니다.

[단계 4.]

이제 스프라이트를 새 파일로 내보낼 수 있습니다. 파일-내보내기 (단일 레이어)로 이동하여 PNG를 선택하십시오.

[5 단계.]

스프라이트 이름을 적절하게 지정하는 것이 항상 좋습니다. 이 프로젝트에서는 다음을 사용하여 캐릭터의 이름을 지정합니다. GIRL_ (BodyPart의 이름) .png

[6 단계.]

이 PNG 내보내기 대화 상자는 원본 아트를 변경하지 않고 그래픽의 크기를 조정할 수 있기 때문에 유용합니다. 프로그래머가 게임에서 캐릭터의 절반 크기 여야한다고 가정 해 봅시다. SCALE RATIO의 값을 50 %로 변경하여 이미지를 쉽게 다시 내보낼 수 있습니다 (예 :).

그리고 당신은 ...

...이 첫 번째 스프라이트 :(

기쁜 마음으로 Clip Studio Paint에서이 프로세스 속도를 높일 수있는 방법이 있습니다.

[자동 동작 (매크로)을 사용하여이 시퀀스를 자동화 할 수 있습니다.]

이 액션을 만들어서 공유하겠습니다. 다운로드 링크를 얻으려면이 기사의 각주를 참조하십시오.

이 동작을 가져 오려면 AUTO ACTION 하위 도구로 이동하여 IMPORT SET을 선택하십시오. 나중에 기본 자동 작업 세트로 복사하거나 이동할 수 있습니다.

스프라이트로 내보내려는 [이미지 영역 선택] 아트 보드로 돌아가서 작은 재생 버튼을 클릭합니다.

임시 파일이 자동으로 닫히기 전에 작업에서 이름과 크기를 묻습니다.

이미지의 모든 부분에이 과정을 반복하십시오. 이 예제에는 캐릭터를 '리깅'하고 애니메이션을 만드는 데 필요한 모든 부품이 있습니다.

그게 다야

다음 기사에서는 컷 아웃 애니메이션 방법을 사용하여 Clip Studio Paint에서이 스프라이트를 [애니메이션]하는 방법을 보여줍니다.

매우 효율적인 작업 방법이며 프로젝트에서 사용할 게임 또는 다양한 유형의 애니메이션 시퀀스 (예 : Twitch 및 Youtube 그래픽, 소셜 미디어 용 Gif)를 만드는 데 사용할 수 있습니다.