스프라이트 시트 생성기

스프라이트 시트란

스프라이트 시트는 여러 개의 작은 이미지(프레임)를 격자 형태로 배열해 하나의 이미지 파일로 합친 것으로, 여러 개의 개별 파일을 따로 불러오는 것보다 결합된 이미지 하나를 불러오는 게 더 효율적이고 프레임 단위 애니메이션 처리도 쉬워지기 때문에 게임 개발과 애니메이션에서 흔히 쓰입니다. 이 도구는 크기가 같은 여러 이미지를 업로드받아 하나의 스프라이트 시트로 합치고, 열 개수와 간격을 지정할 수 있게 해주며, 완성된 이미지와 각 프레임의 좌표를 담은 JSON 파일을 함께 다운로드할 수 있게 해줍니다.

시트와 프레임 데이터는 어떻게 생성되나요

이미지는 왼쪽에서 오른쪽으로 배치되고 지정한 열 개수에 맞춰 다음 줄로 넘어가며, 각각 지정한 프레임 간격만큼 떨어진 위치에 계산되어 공유 캔버스에 그려집니다. 업로드한 이미지 크기가 서로 다르면, 겹치지 않도록 가장 큰 이미지에 맞춘 칸 안에 각 이미지를 정렬합니다. 다운로드되는 JSON 파일에는 최종 시트 안에서 각 프레임의 x·y 위치와 너비·높이가 기록되는데, 게임 엔진과 애니메이션 도구들이 재생 중 각 프레임을 어디서 '잘라내야' 하는지 알 때 흔히 이 정보를 사용합니다.

자주 묻는 질문

이미지만 있으면 되지 왜 JSON 좌표 파일이 필요한가요?

합쳐진 PNG 하나만으로는 게임 엔진이나 애니메이션 라이브러리가 어디서 한 프레임이 끝나고 다음 프레임이 시작되는지 알 수 없습니다. JSON 파일이 정확한 픽셀 좌표를 제공해줘야, 소프트웨어가 재생 중 시트를 정확히 개별 애니메이션 프레임으로 다시 잘라낼 수 있습니다.

업로드한 이미지 크기가 서로 다르면 어떻게 되나요?

이 도구는 그래도 정상적으로 동작하지만, 각 격자 칸은 업로드한 이미지 중 가장 큰 것에 맞춰 크기가 정해집니다. 그래서 더 작은 이미지는 늘어나거나 잘리지 않고, 대신 칸 안에 여백이 남게 됩니다.

업로드한 뒤에 프레임 순서를 바꿀 수 있나요?

네. 최종 스프라이트 시트를 만들기 전에 순서 변경 컨트롤로 썸네일을 앞뒤로 옮기거나 개별 이미지를 제거할 수 있습니다. 애니메이션 재생 방식에서는 프레임 순서가 보통 중요하기 때문입니다.