소개

안녕하세요! 내 이름은 Hira Karmachela이고 이것은 내 첫 번째 게시물입니다. 이번에는 CLIP STUDIO PAINT를 사용하여 루핑 스프라이트 애니메이션을 만든 경험을 공유합니다. 저는 게임에 필요한 그래픽 디자인 프로젝트에 참여했습니다. 종종 제가 작업하는 게임은 8비트 스타일이거나 일반적으로 픽셀 게임이라고 합니다.

 

이 게시물이 CSP를 사용하여 픽셀 아트를 만드는 방법을 찾고 있는 분들에게 흥미로운 팁이 되기를 바랍니다. 게다가, 우리는 그것을 루핑 스프라이트에 애니메이션으로 만들려고 할 것입니다.

루핑 스프라이트 애니메이션이란 무엇입니까?

실습을 시작하기 전에 스프라이트 애니메이션의 정의에 대한 약간의 통찰력을 공유하겠습니다. 그래픽 디자인 또는 멀티미디어 산업에서 스프라이트라는 용어는 정적 및 애니메이션 이미지 형태의 큰 장면의 작은 부분을 나타냅니다. 애니메이션이 필요한 경우 더 구체적으로 스프라이트 애니메이션이라고 합니다.

 

실제로 업계에서 스프라이트 애니메이션은 게임이나 응용 프로그램과 같은 대화형 미디어 요구 사항에 자주 사용됩니다. 스프라이트 애니메이션은 일반적으로 게임 캐릭터에 적용되어 다양한 제스처 또는 장면이나 사용자 인터페이스(예: 아이콘 및 버튼)를 지원하는 시각 효과로 이동할 수 있습니다.

 

기술적으로 스프라이트 애니메이션은 포즈와 포즈의 원리를 사용하여 프레임별로 만들어집니다. 따라서 최종 프레임이 초기 프레임에 연결되어 끝없는 움직임을 만드는 곳에서 루프를 사용하는 경우가 많습니다.

 

보통 게임 프로젝트에서 캐릭터의 다양한 움직임을 만들기 위해 스프라이트 애니메이션을 사용합니다. 예를 들면: 유휴 움직임, 걷기, 달리기, 공격하기, 방어하기, 다치기, 죽기. 각 움직임은 스프라이트 시트라는 형식으로 패키징되는 시퀀스입니다.

픽셀 아트용 파일 준비

확인! 새 파일을 만드는 것부터 시작합니다. 반복되는 스프라이트를 만들기 위해 필요에 따라 작업 공간이 구성되도록 "애니메이션" 사전 설정을 선택합니다. 픽셀 아트에는 큰 캔버스 크기가 필요하지 않습니다. 특히 스프라이트가 필요한 경우 캔버스는 단일 개체 또는 문자로만 채워집니다. 따라서 일반적으로 치수에 대해 32픽셀의 배수만 사용합니다.

 

이 프로젝트에서는 W = 192px 및 H = 192px 크기의 캔버스를 만들었습니다. 이 크기는 여분의 머리 공간이 있어도 캐릭터 제스처를 만들기에 충분합니다.

 

제가 만든 설정은 아래와 같이 따라하시면 됩니다.

 

캔버스가 만들어진 후 다음으로 준비해야 할 중요한 것은 "그리드"입니다. 가상의 선은 픽셀을 배열하여 이미지를 형성하는 데 실제로 도움이 됩니다.

 

View > Grid 메뉴로 진입하는 단계입니다. 체크해야만 캔버스에 체스 패턴의 가로, 세로 선 형태가 나타납니다.

 

 

그런 다음 보기 > 그리드 설정 메뉴로 돌아갑니다. 그리드 설정 창이 나타납니다. 여기서 Gap = 1px 및 Number of divisions = 0을 변경합니다. 그러면 더 작고 촘촘한 사각형이 있는 체스 패턴이 표시됩니다.

 

 

픽셀 그리기

이제 스프라이트를 만들기 위해 픽셀을 그리거나 정렬할 준비가 되었습니다. 이번 프로젝트에서는 공격적인 움직임을 가진 도깨비 캐릭터를 만들어 보겠습니다. 애니메이션을 만들기 전에 당연히 먼저 캐릭터를 만들어야 합니다.

 

애니메이션 캐릭터를 만들 때 가장 중요한 것은 레이어링 시스템에서 이미지를 구성하는 것입니다. 이것은 애니메이션 프로세스를 용이하게 하기 위한 것이므로 특정 포즈를 만들기 위해 특정 레이어만 다시 그리면 됩니다. 스프라이트 애니메이션은 포즈 대 포즈 원칙에 크게 의존한다는 것을 기억하십시오.

 

다음은 각 포즈에 대해 만든 레이어입니다.

 

나는 이것을 쉽게 만들 것이다. 처음에는 "pose_01"이라는 이름의 레이어 폴더 하나만 만들면 됩니다. 나중에 다음 포즈를 위해 이 폴더를 복사할 수 있습니다. 다음으로 첫 번째 몸체 부분에 대한 레이어를 만듭니다. 먼저 머리부터 시작하는 것이 좋습니다.

일반적인 드로잉 기법과 마찬가지로 라인 아트를 만드는 것부터 시작할 수 있습니다. 운 좋게도 CSP에는 픽셀을 정렬하는 데 사용할 수 있는 도구가 있습니다. "마커" 유형 "점 펜"을 사용하면 각 스트로크가 격자 상자를 픽셀로 쉽게 채울 수 있습니다.

그런 다음 픽셀을 배열하여 원하는 캐릭터의 머리를 형성합니다. 이 프로젝트에서는 3/4 뷰의 도깨비 캐릭터를 만들었습니다.

 

보통 저는 선화와 채색 사이에 다른 레이어를 만듭니다. 그러나 픽셀 아트 제작 경험을 바탕으로 모든 프로세스를 하나의 레이어에 결합하는 것이 더 효율적입니다. 단순히 캐릭터의 신체 부분을 기반으로 레이어를 분리하는 것은 애니메이션 요구 사항에 따라 다릅니다.

 

따라서 채색을 위해 레이어의 필요에 따라 색조를 음영에서 색조로 정렬하기만 하면 됩니다.

 

애니메이션용 레이어 시스템

다음으로 별도의 레이어가 있는 다른 신체 부위를 만듭니다. 나는 이 도깨비 캐릭터의 몸을 머리, 왼손, 몸, 무기, 오른손, 왼쪽 다리, 오른쪽 다리로 위에서 아래로 순차적으로 레이어의 섹션으로 나눕니다.

 

레이어 시스템은 애니메이션 프로세스를 용이하게 하기 위한 것입니다. 현재 하나의 포즈를 나타내는 하나의 레이어 폴더만 있음을 기억하십시오. 다음으로, 일련의 움직임을 만들기 위해 다른 포즈가 필요합니다. 다른 포즈의 캐릭터를 다시 그리는 대신 레이어 시스템을 통해 필요한 레이어만 다시 그리고 포즈를 변경하지 않고 다른 레이어를 복사하기만 하면 됩니다.

 

 

타임라인 준비 중

모든 신체 부위가 완성되면 각 부위가 제대로 연결되어 비례하는 신체 일체감을 형성할 수 있도록 각 부위를 점검해 보십시오. 다음으로 생성된 레이어 시스템과 함께 "pose_01"을 사용하여 다른 포즈를 만듭니다.

 

그 전에 애니메이션 프로세스를 위한 타임라인을 미리 준비합니다. 단계는 메뉴 창 > 타임라인으로 들어가는 것입니다. 그러면 하단 화면에 타임라인 패널이 나타납니다.

 

다음으로 레이어 > 레이어 복제 메뉴로 이동하여 레이어 폴더 "pose_01"을 복사합니다.

 

그런 다음 메뉴 레이어 > 레이어 변환으로 이동하여 레이어 폴더의 복사본을 레이어(일반)로 변환합니다. 레이어 이름을 변경하는 대화 상자가 나타납니다. "animating_pose_01"로 변경합니다. 이제 애니메이션할 셀이 1개 있습니다.

"animating_pose_01" 레이어를 Animation 폴더(애니메이션 사전 설정으로 새 파일을 만들 때 자동으로 생성되는 레이어 폴더 - 이 폴더에 지정된 각 레이어는 애니메이션 셀로 간주됨)로 이동합니다.

 

Animation 폴더 안에 이미 존재하는 빈 레이어가 있습니다. 레이어를 선택한 다음 삭제합니다.

 

이제 "animating_pose_01" 레이어를 애니메이션 셀로 지정해야 합니다. 간단히 말해서 타임라인 패널에서 지원 아이콘을 사용할 수 있습니다. 타임라인에서 프레임 1을 선택한 다음 아래와 같이 "셀 지정" 아이콘을 클릭합니다. 확인 대화 상자가 나타나면 "animation_pose_01"을 선택한 다음 확인을 클릭합니다.

포즈를 취하다

이제 애니메이션에 초기 키프레임이 있습니다. 다음으로 두 번째 포즈 등을 만들어야 합니다. 단계는 레이어 폴더 "pose_01"을 다시 복사한 다음 레이어 이름을 두 번 클릭하여 "pose_02"로 이름을 바꾸는 것입니다.

레이어 폴더 "pose_01"을 선택한 다음 불투명도를 50%로 변경하여 투명하게 만듭니다. 따라서 레이어 폴더 "pose_02"에서 포즈를 변경할 수 있습니다.

 

간단히 말해서, 내가 하는 일은 의도한 움직임에 따라 특정 레이어의 몇 픽셀을 이동하여 이전 포즈와 지속 가능한 새로운 포즈를 만드는 것입니다. 한편 "머리" 레이어와 같은 다른 레이어의 픽셀 구조는 변경하지 않고 위치만 변경하여 새로운 포즈를 취했습니다.

 

두 번째 포즈가 완료되면 다음 단계는 레이어 폴더 "pose_02"를 레이어(Normal: animating_pose_02)로 변환하는 것입니다. 그런 다음 Animation 폴더에 저장하고 애니메이션 셀로 지정했습니다. 셀 지정 프로세스를 위해 프레임 4에 animating_pose_02를 저장합니다. 즉, 첫 번째 키프레임(animating_pose_01)에 대해 약 0.1초 또는 3개의 프레임과 같은 지속 시간을 제공합니다.

 

위의 단계를 수행하여 마지막 포즈까지 포즈를 취합니다. 이번 프로젝트에서는 도깨비 캐릭터가 공격적으로 움직일 수 있도록 7가지 포즈를 만들어 봤습니다. 주의할 점은 마지막 포즈입니다. 즉, pose_07은 초기 포즈, 즉 pose_01로 계속되어야 합니다. 그래서 그것은 끝없는 움직임이나 반복되는 애니메이션을 만들 것입니다.

 

애니메이션

실제로 이 프로세스는 일련의 모션이 되는 데 필요한 키프레임을 나타내는 포즈가 이미 있기 때문에 매우 간단합니다. 애니메이션이 타임라인에서 제대로 실행되는지 확인하기 전에. 숨겨진 상태의 모든 레이어 폴더를 조건화합니다.

 

그런 다음 모든 셀이 타임라인의 해당 프레임에 있는지 확인합니다. CSP 타임라인의 흥미로운 기능은 "어니언 스킨"입니다. 이 기능을 사용하면 검토 중인 포즈 전후의 포즈를 볼 수 있습니다.

 

타임라인에서 재생 아이콘을 눌러 애니메이션을 테스트할 수 있습니다. 애니메이션이 멈추지 않고 타임라인 바늘이 계속 움직이면 23번째 프레임까지만 셀을 채우더라도 걱정하지 마십시오. 이것은 파일 생성 초기에 재생 시간을 올바르게 설정하지 않았기 때문에 발생합니다. 이것은 쉽게 오른쪽으로 스크롤하여 오른쪽에서 파란색 타임라인 바늘을 찾은 다음 끌어서 필요한 프레임에 저장할 수 있습니다.

 

출판

애니메이션의 움직임을 확신하고 나면 기분이 좋습니다. 그런 다음 게시할 시간입니다. 일반적으로 클라이언트의 요구에 따라 스프라이트 애니메이션을 스프라이트 시트에 패키징합니다. 스프라이트 시트는 게임 개발자가 쉽게 작성할 수 있도록 투명한 배경 PNG로 생성됩니다. 그런 다음 스프라이트는 코딩으로 애니메이션됩니다.

 

그러나 클라이언트 제출 또는 승인 과정에서 저는 일반적으로 스프라이트 애니메이션을 반복되는 애니메이션 GIF로 내보냅니다. 단계는 메뉴 파일 > 애니메이션 내보내기 > 애니메이션 GIF로 이동하는 것입니다. 그런 다음 몇 개의 상자가 나타나고 필요에 따라 확인하기만 하면 됩니다.

 

확인! 그게 내가 공유할 수 있는 전부야. 유용하기를 바라며 다음을 통해 더 많은 팁을 얻을 수 있도록 지원해 주십시오.

 

내 인스타그램 팔로우:

 

내 YouTube 채널 구독:

내 다른 게시물 읽기:

감사 :)