스프라이트 시트 생성기

배치가 작동하는 방식

생성기는 예측 가능한 단일 배치, 즉 균일한 그리드를 사용합니다. 열 수를 정하면 행 수는 올림(이미지 / 열)이 됩니다. 모든 셀은 같은 정사각형 크기(고른 타일 크기)이므로, 각 이미지는 가로세로 비율을 유지한 채 자기 셀에 맞게 조정되고 가운데에 놓입니다. 크기가 다른 이미지도 모두 같은 크기의 셀에 들어가며, 이는 background-position을 쓰는 CSS 스프라이트가 기대하는 바로 그 형태입니다.

생성되는 CSS의 형태

각 이미지는 파일 이름을 딴 클래스(.spr-<이름>)가 되며, 타일 크기로 지정되고 자기 셀로 오프셋됩니다. 열 4개, 타일 크기 128 px, 간격 없음일 때 시트는 다음과 같습니다.

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

오프셋은 두 방향으로 움직입니다. 스프라이트는 각 행을 왼쪽에서 오른쪽으로 채운 뒤 다음 행으로 넘어갑니다. PNG를 CSS 옆에 spritesheet.png로 저장하세요(또는 경로에 맞게 url(...)을 수정하세요).

간격과 번짐

가장자리를 맞대어 채운 스프라이트는 브라우저가 시트 크기를 조정할 때(정수가 아닌 픽셀 비율, CSS 변형) 서로 번질 수 있습니다. 이웃 픽셀이 새어 들지 않도록 셀 사이에 2~4픽셀 간격을 추가하세요.

고밀도(레티나) 디스플레이

자동 2x 내보내기는 없지만, 더 선명한 시트를 간단히 만들 수 있습니다. 각 스프라이트가 더 많은 픽셀을 갖도록 더 큰 타일 크기를 고르고(예: 128 px 대신 256 px) CSS에서는 절반 크기로 표시하세요. 그러면 별도의 과정 없이 고밀도 화면에서도 선명한 스프라이트를 얻습니다.

스프라이트 시트 vs 대안

• 스프라이트 시트: CSS의 고전적인 아이콘 세트, HTML5 게임 프레임, 많은 작은 이미지를 한 파일로 묶으면 유리한 페이지.
• SVG 스프라이트(symbol): 현대적인 UI 아이콘에 더 적합하고, 손실 없이 확대되며, CSS fill을 받아들이고, background-position으로 씨름할 필요가 없습니다.
• 아이콘 폰트: 제한적이지만 아주 작은 단색 아이콘에는 여전히 쓰입니다.
• HTTP/2 또는 HTTP/3의 개별 파일: 멀티플렉싱 덕분에 요청 수의 중요성은 예전만큼 크지 않습니다.