콘텐츠로 이동

2D 뼈 애니메이션

이 튜토리얼에서는 PixelOver에서 2D 픽셀 아트 뼈 애니메이션을 만드는 방법을 배웁니다.
한 장의 아트워크에서 시작해, 부위로 분할하고, 뼈로 리깅하고, 애니메이션하고, 최종 스프라이트 애니메이션을 내보냅니다.

요구 사항

이 튜토리얼에는 애니메이션할 아트워크가 필요합니다.
저는 Smiley-Fakemon의 아트워크를 사용합니다.

Speck

리깅 전에, 아트워크를 별도의 부위(머리, 몸통, 날개, 다리 등)로 분할해야 합니다.
방법을 모른다면, 먼저 이 튜토리얼을 참고하세요:
그림을 개체로 분할하기

다음으로, PixelOver를 사용해 아트워크를 픽셀화하고 뼈로 애니메이션합니다.

1. 아트워크 분할 및 채우기

첫 번째 단계는 아트워크를 독립적인 부위로 분할하는 것입니다.
이 부위들은 나중에 별도로 애니메이션됩니다.

일반적인 부위에는 다음이 있습니다.

  • 머리
  • 몸통
  • 날개
  • 다리
  • 꼬리
  • 액세서리(있는 경우)

Speck split

가려진 영역 채우기(중요)

분할한 후, 각 부위 뒤의 가려진 영역을 채워야 합니다.

예를 들어:

  • 날개가 몸통의 일부를 가림
  • 몸통이 날개 뿌리의 일부를 가림
  • 다리가 발의 일부를 가릴 수 있음

보통 빠른 채우기로 충분합니다. 아트워크를 픽셀화하면 작은 불완전함은 덜 눈에 띄기 때문입니다.

각 부위 내보내기

분할한 각 부위를 별도의 이미지 파일로 내보냅니다.
이 예제의 이미지는 여기서 다운로드할 수 있습니다:
분할된 부위 다운로드(.zip)

2. 이미지를 PixelOver로 가져오기

PixelOver를 열고, 모든 부위 이미지를 프로젝트로 드래그 앤 드롭합니다.

가져올 때, 별도의 이미지로(애니메이션 이미지가 아니라) 가져오기를 선택합니다.

원본 전체 아트워크를 참조 이미지로 가져오는 것도 권장합니다.

Parts imported

팁

이 단계에서는 이미지를 완벽하게 재정렬할 필요가 없습니다. 나중에 뼈 아래에 부모-자식으로 연결할 때 올바르게 배치합니다.

3. 아트워크 크기 조절(선택이지만 권장)

필요하면 여러 이미지를 한 번에 선택(Shift + 좌클릭)하고 함께 크기를 조절할 수 있습니다.

이는 셰이더를 적용하기 전에 원하는 픽셀 아트 배율에 빠르게 맞추는 데 유용합니다.

Resize

4. 픽셀 아트 셰이더 적용

이제 픽셀 아트 모습을 얻기 위해 셰이더를 적용합니다.

다음을 할 수 있습니다.

  • 상단 바에서 프리셋 셰이더 불러오기
  • 또는 오른쪽 패널에서 셰이더 매개변수 조정

Import shader

Shader settings

팁

픽셀 스타일이 이미 적용된 후에 리깅하고 애니메이션하는 것이 더 쉽습니다. 최종 비율과 가독성을 즉시 확인할 수 있기 때문입니다.

5. 리깅: 뼈 구조 만들기

모든 이미지의 선택을 해제한 다음, 뼈 도구를 선택합니다.

Bone tool

뼈 만들기

클릭 + 드래그로 뷰에 뼈를 만듭니다.

Add bone

깔끔한 계층(부모 → 자식)을 만듭니다. 예:

  • Root
    • Bone_Torso
    • Bone_Head
      • Bone_Wing_L
      • Bone_Wing_R
      • Bone_Leg_L
      • Bone_Leg_R
      • Bone_Tail

팁

뼈를 만들면서 이름을 바꾸세요. 좋은 명명 규칙은 애니메이션 중에 큰 도움이 됩니다: Root, Bone_Torso, Bone_Head, Bone_Wing_L, Bone_Wing_R 등.

이미지를 뼈 아래에 부모-자식으로 연결하기

이 단계에서 뼈는 자동으로 이미지에 영향을 주지 않습니다.
스프라이트 부위를 뼈에 연결하려면, 장면 트리에서 이미지를 뼈 아래에 부모-자식으로 연결하기만 하면 됩니다.

예:

  • Bone_Torso
    • Torso_Image
    • Bone_Head
      • Head_Image

장면 트리에서 잘라내기/붙여넣기 또는 드래그 앤 드롭 연결을 사용할 수 있습니다.

Reorder

모든 부위가 올바르게 연결되면, 리그는 완전한 계층처럼 보일 것입니다.

All bones

정보

첫 번째 뼈(보통 Root라는 이름)는 길이를 0px로 할 수 있습니다. 안정적인 기준점 역할을 하며, 캐릭터 전체의 이동이나 배율 조정을 쉽게 만듭니다.

이 시점에서 리깅이 완료되었습니다.
이제 애니메이션을 시작할 수 있습니다.

6. 애니메이션

인터페이스 하단의 애니메이션 패널을 엽니다.

애니메이션 이름을 바꾼 다음, 다음을 구성합니다.

  • 길이
  • FPS(초당 프레임 수)

Animation panel

첫 키 만들기

모든 뼈를 선택한 다음, 키 아이콘을 클릭하여 다음의 키를 만듭니다.

  • 위치
  • 회전

Add keys

이로써 프레임 0의 기본 포즈가 만들어집니다.

포즈 더 추가하기

타임라인 커서를 앞으로 이동합니다.
뼈를 포즈하여 다음 프레임을 만듭니다.

REC 버튼이 활성화되어 있으면, 뼈를 수정할 때 키가 자동으로 만들어집니다.

Add new key

키를 복제하여 작업 속도 높이기

시간을 절약하려면, 키를 선택하여 현재 커서 위치에 복제할 수 있습니다.

Duplicate key

뼈를 정지 포즈로 초기화하기

언제든지 뼈를 정지 위치로 되돌리도록 강제할 수 있습니다.

Reset rest

애니메이션 예제(점프)

이 예제에서는 캐릭터가 점프를 합니다.

Animation step1

Animation step2

Animation step3

팁

좋은 애니메이션에는 보통 카운터밸런스가 필요합니다. 예를 들어 점프 후, 캐릭터는 즉시 대기 포즈로 돌아가는 대신 착지를 흡수(압축)해야 합니다.

전환 개선하기

애니메이션을 더 매끄럽게 하려면, 다음을 할 수 있습니다.

  • 키 타이밍 조정
  • 키에 이징 적용
  • 전환을 수동으로 다듬기

Key transitions

7. 내보내기

내보내기 전에:

  • 애니메이션의 FPS가 올바른지 확인
  • 필요하면 오른쪽 위 토글로 뼈를 숨기기(미리보기가 더 좋아짐)

Hide bones

그런 다음 내보내기 대화 상자를 엽니다.

프로젝트 > 내보내기...

Export

다음으로 내보낼 수 있습니다.

  • PNG 시퀀스
  • GIF
  • 스프라이트 시트

또한 다음을 할 수 있습니다.

  • 픽셀 크기 다시 조정
  • 애니메이션을 폴더로 분리
  • 생성될 프레임 수 미리보기

Export menu

최종 결과:

Speck animated result

이 프로젝트와 다른 예제는 PixelOver 다운로드 파일(demo 포함)에 있습니다:
https://deakcor.itch.io/pixelover#purchase