영상에서 스프라이트 시트까지: 게임용 2D 애니메이션 에셋 만들기

짧은 효과 영상이나 테스트 애니메이션을 게임에서 쓰기 좋은 2D 에셋으로 바꾸려면, 단순히 모든 프레임을 저장하는 것만으로는 부족합니다. 필요한 구간을 고르고, 어색한 프레임을 정리하고, 같은 크기와 피벗을 가진 시트로 배치해야 합니다.

이 가이드에서는 UneGames의 Video Frame Extractor와 Sprite Sheet Maker를 이어 사용합니다. 예제에는 실제 게임에서 사용하지 않는 12프레임 에너지 효과 영상을 사용합니다.

완성 결과

• 1초 길이의 짧은 효과 영상에서 필요한 구간만 12 FPS로 추출
• 프레임 순서와 선택 범위를 확인하고 필요 없는 프레임 제거
• 256×256 셀, 4열×3행 스프라이트 시트 생성
• PNG 이미지와 엔진에 종속되지 않는 JSON 메타데이터 다운로드

영상은 보통 투명도를 담지 않습니다. 투명한 스프라이트가 필요하다면, 배경이 없는 원본 프레임을 준비하거나 별도의 키잉·배경 제거 작업을 먼저 하세요.

1. 짧고 명확한 원본 영상 준비하기

스프라이트 시트용 원본은 길수록 좋은 것이 아닙니다. 한 동작 또는 한 효과만 담긴 짧은 클립이 편합니다. 시작과 끝에 정지 시간이 길면 나중에 제거할 프레임만 늘어납니다.

이 예제는 256×256 해상도의 1초 에너지 효과 영상입니다. 12 FPS로 추출하면 12장의 프레임이 만들어지므로, 4열×3행 시트에 정확히 들어갑니다.

다음 요소를 미리 정해 두세요.

• 재생 속도: 원본의 움직임을 충분히 읽을 수 있는 FPS
• 프레임 크기: 게임에서 실제로 사용할 셀 크기
• 배경: 영상 배경은 결과 이미지에도 포함됨
• 루프 여부: 첫 프레임과 마지막 프레임이 자연스럽게 이어지는지

2. Video Frame Extractor에서 범위와 출력 크기 설정하기

/tools/video-frame-extractor/에서 영상을 선택합니다. 원본 미리보기 아래의 시작·끝 입력과 타임라인 핸들은 같은 범위를 가리킵니다. 핸들을 움직이면 미리보기 영상도 해당 위치로 이동하므로, 효과가 시작되는 순간과 끝나는 순간을 쉽게 찾을 수 있습니다.

이 예제의 설정은 다음과 같습니다.

원본이 더 크더라도 게임에서 256px 셀만 쓴다면 이 단계에서 줄이는 편이 좋습니다. 나중에 다시 줄이면 프레임마다 보이는 선명도가 달라질 수 있습니다.

범위와 예상 프레임 수를 확인한 다음 프레임 추출을 누르세요. 긴 영상은 범위, FPS 또는 출력 해상도를 낮춰 메모리 사용량을 줄일 수 있습니다.

3. 결과 프레임 정리하기

추출이 끝나면 번호가 붙은 프레임 그리드와 애니메이션 미리보기가 표시됩니다. 먼저 미리보기 재생으로 움직임이 자연스러운지 확인합니다.

선택 범위는 결과 프레임 안에서 다시 조절할 수 있습니다. 시작 전의 준비 프레임이나 끝의 잔상처럼 시트에 넣지 않을 프레임은 선택 범위 밖으로 두고 선택 범위 밖 프레임 삭제를 사용하세요. 특정 프레임만 어색하면 카드의 삭제 버튼으로 개별 제거합니다.

삭제 뒤에는 남은 프레임이 0001부터 연속된 이름으로 다시 정리됩니다. 이 규칙은 파일명을 기준으로 프레임을 정렬하는 도구와 엔진에서 특히 유용합니다.

다음 단계로 넘기기 전에 선택 프레임만 ZIP 다운로드를 사용해 정리한 PNG 묶음을 저장하세요. 전체 프레임 ZIP은 원본 추출 결과를 보관하고 싶을 때만 사용하면 됩니다.

4. Sprite Sheet Maker에서 시트 만들기

/tools/sprite-sheet-maker/를 열고 방금 받은 PNG들을 모두 추가합니다. 파일명 순서로 정렬되지만, 목록에서 썸네일을 드래그해 순서를 바꿀 수 있습니다.

이 예제에서는 각 프레임이 이미 256×256이므로 공통 크기를 그대로 사용합니다. 열 수는 4로 설정하면 12프레임이 4열×3행으로 배치됩니다.

피벗은 게임에서 Sprite를 배치하거나 회전할 때 기준이 됩니다. 캐릭터·바닥 효과에는 보통 중앙 하단이 편하지만, 공중 폭발·투사체처럼 중심에서 확장되는 효과에는 중앙 피벗이 더 자연스러울 수 있습니다.

캔버스 미리보기에서는 셀 경계와 번호를 켜서 프레임이 잘리지 않았는지 확인하세요. 애니메이션 미리보기는 시트의 실제 셀을 재생하므로, 순서와 피벗이 어색한 문제를 다운로드 전에 찾을 수 있습니다.

5. PNG와 JSON 내보내기

검수가 끝났다면 다음 중 필요한 방식으로 받습니다.

• PNG 다운로드: 스프라이트 시트 이미지 한 장만 필요할 때
• JSON 다운로드: 셀 크기, 프레임 순서, 피벗, FPS 같은 메타데이터가 필요할 때
• ZIP 다운로드: PNG와 JSON을 함께 전달하거나 보관할 때

JSON은 특정 엔진 전용 파일이 아닙니다. 엔진이나 자체 렌더러에서 읽어 프레임 사각형과 재생 순서를 만들 때 기준 데이터로 사용하세요.

가져가기 전 체크리스트

• 첫 프레임과 마지막 프레임이 루프에서 자연스럽게 이어지는가?
• 모든 셀이 같은 크기이고, 잘린 효과가 없는가?
• 프레임 순서가 실제 재생 순서와 일치하는가?
• 피벗이 게임 안에서 원하는 위치에 놓이는가?
• 대상 엔진의 임포트 설정과 실제 재생 FPS가 JSON 값과 일치하는가?

두 도구의 모든 처리는 브라우저 안에서 이루어집니다. 원본 영상과 결과 이미지는 UneGames 서버에 업로드되지 않습니다.