언제 사용하나요?
게임, CSS 아이콘, 애니메이션 프레임처럼 많은 작은 이미지를 한 번에 불러오고 좌표로 잘라 써야 할 때 유용합니다.
BROWSER UTILITY
Sprite Sheet 생성
여러 이미지를 규격 셀에 배치하고 PNG와 좌표 JSON을 함께 만들어요
✓내 기기에서 처리입력·파일 자동 업로드 없음◇영구 저장 없음민감한 원문을 기록하지 않음↯PWA 확인 중방문·준비한 도구 자원 재사용
도구를 준비하고 있습니다…
✓브라우저 안에서 안전하게 입력한 데이터와 파일은 서버로 전송하거나 저장하지 않고 현재 브라우저에서만 처리합니다.
FRIENDLY GUIDE
Sprite Sheet 생성, 이렇게 사용해 보세요
여러 이미지를 규격 셀에 배치하고 PNG와 좌표 JSON을 함께 만들어요 처음 사용하는 분도 아래 순서대로 진행하면 쉽게 결과를 만들 수 있어요.어떻게 사용하나요?
- 1이미지를 선택한 뒤 크기, 품질, 배치 같은 옵션을 조정하세요.
- 2결과가 바뀌는 것을 확인하며 열 수, 셀 너비·높이, 패딩, 맞춤 방식, 배경을 지정해 여러 이미지를 하나의 PNG 격자에 배치합니다. 각 이미지의 좌표와 크기는 같은 순서의 JSON으로 제공합니다.
- 3미리보기를 확인하고 원하는 형식으로 다운로드하세요.
주요 기능과 옵션
- 여러 이미지를 규격 셀에 배치하고 PNG와 좌표 JSON을 함께 만들어요
- 열 수, 셀 너비·높이, 패딩, 맞춤 방식, 배경을 지정해 여러 이미지를 하나의 PNG 격자에 배치합니다. 각 이미지의 좌표와 크기는 같은 순서의 JSON으로 제공합니다.
- 이미지는 서버에 업로드되지 않고 기기 안에서만 처리됩니다.
GLOSSARY
알아두면 좋은 용어
- Sprite Sheet
- 여러 작은 이미지를 하나의 큰 이미지에 모은 파일
- Cell
- 각 스프라이트가 배치되는 고정 사각 영역
- Atlas
- 스프라이트 이름과 좌표를 기록한 데이터
- Padding
- 셀과 이미지 사이 또는 셀 사이의 빈 공간
TIP렌더링 코드에서 JSON의 X·Y·너비·높이를 그대로 사용하세요. 원본 파일명이 중복되지 않는지 확인하면 매핑 관리가 쉽습니다.