스프라이트 시트 생성기

스프라이트 시트는 애니메이션 프레임, 아이콘, 타일, UI 조각처럼 작은 이미지 여러 개를 텍스처 하나에 묶어, 게임이나 웹 페이지가 파일 하나만 불러와 그 일부 영역을 그리게 해 줍니다. 이 생성기는 이미지를 PNG 한 장으로 묶고 Phaser와 PixiJS가 바로 불러오는 TexturePacker JSON Hash 또는 Array 형식의 JSON 아틀라스와 웹 스프라이트용 CSS 클래스를 함께 만듭니다. 배치는 브라우저 안에서 이뤄지며 작업물은 업로드되지 않습니다.

사용 방법

1. 스프라이트 이미지를 끌어다 놓습니다. 파일 이름이 프레임 이름이 됩니다.
2. 가장 작은 시트는 압축 배치, 크기가 같은 애니메이션 프레임은 격자, 아니면 띠 배치를 고릅니다.
3. 여백, 가장자리 확장, 트리밍, 2의 거듭제곱 크기, 허용할 최대 시트 크기를 정합니다.
4. PNG, JSON 아틀라스, CSS를 내려받습니다(셋을 ZIP으로 받을 수도 있습니다).

계산식

압축 배치: best-short-side-fit을 쓰는 MaxRects. 각 스프라이트는 남는 변이 가장 짧아지는 빈 사각형에 들어가고, 빈 공간은 그 주위로 나뉘며, 여러 시트 너비를 시도해 면적을 작게 유지합니다. 격자: 칸 = 가장 큰 스프라이트, 열 수 = 지정하지 않으면 ⌈√n⌉.

상자마다 너비 + 여백, 높이 + 여백(여기에 2 × 가장자리 확장)을 차지합니다. 트리밍은 완전히 투명한 행과 열을 잘라내며, JSON에는 sourceSize와 spriteSourceSize가 남아 엔진이 원래 프레임 상자를 복원합니다. 가장자리 확장은 가장자리 픽셀을 바깥쪽으로 복사해 텍스처 필터링이 이웃 스프라이트를 끌어오지 않게 합니다. 회전은 쓰지 않으므로 모든 프레임이 rotated: false입니다.

예시

160 × 100 프레임 두 개를 2px 여백의 격자로 배치하면 322 × 100 시트가 되고, 프레임 1은 x = 0, 프레임 2는 x = 160 + 2 = 162에 놓이므로 CSS는 background-position: -162px 0입니다. 가장자리를 1px 확장하면 각 칸은 162 × 102, 시트는 326 × 102가 되고 프레임 2는 162 + 2 + 1 = 165에서 시작합니다.