스프라이트 시트 생성기

여러 이미지를 가로로 배치하여 스프라이트 시트를 만듭니다.

가로 개수

스프라이트 시트란?

스프라이트 시트는 여러 이미지를 격자 형태로 배열해서 하나의 이미지로 만든 것이에요. 게임 개발에서 애니메이션 프레임을 관리할 때 많이 사용하고, 웹 개발에서 아이콘들을 하나의 파일로 합쳐 HTTP 요청을 줄이는 데도 활용해요.

스프라이트 시트에 포함할 이미지들을 선택하세요.

한 줄에 배치할 이미지 개수를 설정하세요.

버튼을 클릭하면 격자 형태의 이미지가 PNG로 다운로드돼요.

첫 번째 이미지의 가로·세로를 칸(셀) 크기로 삼고, 나머지 이미지는 그 칸에 맞게 자동으로 늘리거나 줄여 배치해요. 비율이 많이 다르면 늘어나 보일 수 있으니, 가능하면 같은 크기·비율의 이미지를 쓰는 걸 권장해요.

게임 엔진에서 스프라이트 시트를 불러온 뒤, 각 프레임의 좌표를 지정해서 애니메이션을 만들어요.

네! background-position 속성으로 원하는 아이콘만 표시할 수 있어요.

이미지 개수	권장 가로 개수	결과 격자(가로×세로)	빈 칸
4장	2	2×2	없음
6장	3	3×2	없음
8장	4	4×2	없음
9장	3	3×3	없음
10장(애니 프레임)	5	5×2	없음
12장	4	4×3	없음
16장(아이콘 모음)	4	4×4	없음

※ 세로(행) 수는 입력하지 않아도 가로 개수와 이미지 수에 맞춰 자동 계산돼요. 가로 개수를 이미지 총 개수의 약수로 맞추면 마지막 줄에 빈 칸이 생기지 않아요.