스프라이트 시트 생성기

스프라이트 시트 만드는 법

1. 배치할 순서대로 스프라이트를 추가하세요. 끌어다 놓거나, 클릭해 선택하거나, 붙여넣으면 아래 목록이 그 배치 순서를 그대로 보여줍니다.
2. “시트 옵션”에서 열 개수와 칸 사이 간격(px)을 정하고 시트 이름을 지정하세요.
3. 시트를 생성하면 스프라이트가 왼쪽에서 오른쪽, 위에서 아래로 채워지며, 각 칸은 가장 큰 스프라이트 크기에 맞춰집니다.
4. PNG, JSON 아틀라스, 또는 둘 다 ZIP으로 내려받으세요.

이럴 때 씁니다

게임이나 애니메이션 엔진은 낱장 이미지 수십 개를 따로 요청하는 것보다 스프라이트 시트 하나를 훨씬 빠르게 불러옵니다. Phaser, PixiJS, Unity 같은 대부분의 2D 프레임워크는 텍스처 아틀라스, 즉 PNG 한 장과 각 프레임 위치를 담은 JSON 맵을 읽습니다. 이 도구는 낱장 스프라이트 파일에서 그 둘을 데스크톱 도구 없이 만들어 줍니다.

추가할 때 스프라이트를 원하는 프레임 순서대로 넣으세요. JSON에 각 프레임이 원래 파일 이름과 실제 위치, 크기로 기록되기 때문입니다. 열 개수를 늘리면 넓고 낮은 시트가, 줄이면 좁고 긴 시트가 됩니다. 그릴 때 이웃한 프레임이 서로 번져 보이면 간격을 주세요.