온라인에서 픽셀 아트 애니메이션 만들기

부드러운 픽셀 아트 애니메이션을 만들려면 지속적인 테스트가 필요합니다. 대기 또는 걷기 모션의 타이밍을 확인하기 위해 계속해서 엔진에 프레임을 임포트하는 것은 작업 흐름에 병목을 일으킬 수 있습니다. Easy2DTools 스프라이트 애니메이터는 가벼운 브라우저 내 애니메이션 미리보기를 제공하여 이 문제를 해결합니다.

이 튜토리얼에서는 프레임을 업로드하고, 속도를 조절하고, 세밀한 편집을 위해 어니언 스킨을 활용하고, 마지막으로 애니메이션을 GIF로 내보내는 방법을 보여드립니다.

프레임 불러오기

애니메이터로 프레임을 가져오는 두 가지 주요 방법이 있습니다:

스프라이트 분할기에서: 스프라이트 분할기를 방금 사용했다면 '애니메이터로 보내기' 버튼을 클릭하세요. 데스크톱에 저장할 필요 없이 선택한 모든 프레임이 애니메이터 타임라인으로 자동 전송됩니다.
수동 업로드: 애니메이터 뷰에서 '프레임 추가' 버튼을 클릭합니다. 컴퓨터에서 여러 .png 파일을 선택할 수 있으며, 알파벳/숫자 순서대로 타임라인에 추가됩니다.

타임라인 관리하기

프레임을 불러오면 도구 하단의 타임라인 스트립에 나타납니다.

순서 변경: 타임라인에서 프레임을 클릭하고 드래그하여 순서를 바꿀 수 있습니다. 파일을 수동으로 복제하지 않고 핑퐁(앞으로 재생 후 뒤로 재생) 애니메이션을 만들 때 유용합니다.
삭제: 타임라인의 프레임 위에 마우스를 올리고 작은 'x' 아이콘을 클릭하여 시퀀스에서 제거합니다.
복제: 특정 프레임이 더 오래 지속되어야 할 때가 있습니다. 글로벌 FPS를 조절할 수도 있지만, 타임라인에서 특정 프레임을 복제하여 두 배 더 오래 표시되게 할 수도 있습니다.

재생 미리보기 및 조정

메인 캔버스에서 애니메이션이 실시간으로 루핑되는 것을 볼 수 있습니다. 제어판을 사용하여 미세 조정하세요:

재생/일시정지: 재생 컨트롤을 사용하여 애니메이션을 멈추고 특정 프레임을 검사하세요.
FPS 조절: FPS 슬라이더로 애니메이션 속도를 높이거나 낮출 수 있습니다. 픽셀 아트는 보통 8~15 FPS에서 가장 잘 보이지만, 부드러운 하이 프레임 애니메이션은 24 또는 30 FPS가 필요할 수 있습니다.
배경색: 기본적으로 캔버스는 어두운 체크무늬입니다. 다양한 환경에 대비하여 스프라이트의 윤곽선이 잘 보이는지 확인하기 위해 배경색을 변경할 수 있습니다.

고급 기능: 어니언 스킨

어니언 스킨은 애니메이터가 여러 프레임을 동시에 보기 위해 사용하는 기술입니다. 현재 프레임 위에 이전 및 다음 프레임의 반투명 버전을 겹쳐서 보여줍니다.

이 기능 사용 방법:

제어판에서 "어니언 스킨" 스위치를 켭니다.
주변 프레임의 유령 같은 실루엣이 나타납니다. 이를 통해 캐릭터 움직임의 부피, 궤적, 간격을 확인할 수 있습니다.
프레임 사이에서 팔이 너무 멀리 뛴다면 어니언 스킨이 그 틈을 보여주므로 중간 프레임을 다시 그리거나 조정해야 한다는 것을 알 수 있습니다.

GIF로 내보내기

미리보기에 만족하면 애니메이션을 내보내어 온라인, 소셜 미디어 또는 포트폴리오에 공유할 수 있습니다.

"GIF 내보내기" 버튼을 클릭합니다.
설정한 정확한 FPS를 사용하여 프레임이 컴파일됩니다. 이 과정은 Web Worker를 사용하여 브라우저 내에서 전적으로 수행되므로 큰 애니메이션은 몇 초가 걸릴 수 있습니다.
작업이 완료되면 브라우저에서 .gif 파일을 컴퓨터에 저장하라는 메시지가 표시됩니다.

이것으로 완성입니다! 이제 부드럽고 공유하기 쉬운 애니메이션이 완성되었습니다. 모든 처리가 로컬에서 이루어지므로 Easy2DTools는 안전하고 사적인 게임 개발 도구입니다.