스프라이트 시트는 여러 프레임을 이미지 한 장에 모아 게임이 텍스처 수십 장 대신 한 장만 읽게 합니다. 촘촘하게 패킹한 아틀라스는 여기에 프레임마다 이름과 사각 영역을 적은 데이터 파일이 붙습니다. 번호 붙은 PNG, GIF, .aseprite 파일을 넣고 엔진 프리셋을 고르면 Nerulio가 브라우저 안에서 패킹하고(기본값: MaxRects, 트림 켬, 간격 2px) 그 엔진이 읽는 데이터 파일과 함께 PNG를 내보냅니다. 칸 크기가 모두 같은 단순 격자 시트는 아래에 연결된 기존 만들기 도구를 쓰세요.
이미지을(를) 여기에 놓으세요여러 개를 한 번에 처리할 수 있습니다업로드 없음 · 이 기기에서 처리
격자 시트와 패킹 아틀라스
격자 시트는 모든 프레임에 같은 크기의 칸을 줍니다. 그래서 엔진은 계산만으로 n번째 프레임을 찾습니다. 열 = n mod 열 수, 행 = n ÷ 열 수(내림). 데이터 파일이 필요 없지만, 칸마다 가장 큰 프레임만큼 자리를 차지하고 투명한 테두리까지 그대로 저장됩니다.
패킹 아틀라스는 프레임마다 보이는 픽셀만 남기고 잘라 빈자리에 끼워 넣습니다. 위치를 계산으로 알 수 없으니 패커가 데이터 파일을 씁니다. 프레임 이름, 페이지 위 저장 위치(frame), 원래 캔버스에서의 위치(spriteSourceSize), 원래 캔버스 크기(sourceSize), 90도 돌려 저장했는지(rotated)입니다. 엔진은 이 숫자로 프레임을 원래 크기 상자 안에 그리므로 트림한 프레임도 제자리에 있습니다.
가장자리를 지키는 설정이 두 가지 있습니다. 모양 간격은 프레임 사이에 투명 픽셀을 두고, 확장(extrude)은 프레임 바깥쪽 픽셀을 한 겹 더 복사해 둡니다. 텍스처 필터가 가장자리 바로 바깥을 읽어도 이웃 프레임 대신 같은 색을 읽게 됩니다. 회전은 면적을 조금 줄이지만 회전된 프레임을 되돌려 그리는 엔진은 일부뿐이라, Nerulio 프리셋은 엔진 검증에서 올바르게 그려진 PixiJS와 Spine에서만 회전을 허용합니다.
페이지
아틀라스 이미지 한 장. 최대 크기에 다 들어가지 않으면 다음 페이지로 넘어갑니다(최대 64장).
트림
프레임의 투명 테두리를 잘라 내고 오프셋을 기록하는 것. 그래서 원래 자리에 그려집니다.
모양 간격(shape padding)
프레임 사이의 투명 픽셀. 기본 2px.
확장(extrude)
프레임 가장자리 픽셀을 바깥에 복사한 띠. 기본 0, LÖVE 프리셋은 1.
별칭(alias)
보이는 픽셀이 똑같은 프레임은 저장 영역 하나를 함께 씁니다.
예시: 40 × 29 달리기 프레임 6장
CC0 닌자 달리기 동작 6프레임(각 40 × 29px, 대부분 투명)을 Nerulio의 Phaser 프리셋(트림 켬, 간격 2, 회전 없음)으로 패킹한 결과를 다른 배치와 비교했습니다.
배치 페이지 면적 가로 띠 대비
가로 띠, 6 × 40px 240 × 29 6,960 px² 100 %
패킹, 트림 끔, 간격 2 82 × 91 7,462 px² 107 %
패킹, 트림 켬, 간격 2 38 × 50 1,900 px² 27 %
패킹, 트림 켬, 회전 허용 33 × 57 1,881 px² 27 %
보이는 픽셀(바운딩 박스 6개 합) 1,591 px²
트림 페이지의 사용 비율 1,591 / 1,900 = 0.84
"run_0": { "frame": {"x":0,"y":34,"w":18,"h":15},
"spriteSourceSize": {"x":10,"y":10,"w":18,"h":15},
"sourceSize": {"w":40,"h":29}, "rotated": false, "trimmed": true }
run_0은 18 × 15픽셀만 저장됩니다. 엔진은 이 조각을 40 × 29 상자 안에서 오른쪽으로 10px, 아래로 10px 옮겨 원래 자리에 그립니다. 절약은 트림 덕분입니다. 트림 없이 패킹하면 프레임 사이 간격 때문에 오히려 가로 띠보다 조금 커집니다.
엔진마다 받는 파일과 시트를 불러오는 법
PNG는 늘 데이터 파일 옆에 두세요. 데이터 파일이 이미지 이름을 적고 있습니다(JSON의 meta.image, XML의 imagePath, Spine .atlas의 페이지 줄).
파일
용도
run.png + run.json (Phaser 3 / 4)
this.load.atlas("run", "run.png", "run.json") 후 this.add.sprite(x, y, "run", "run_0"). 자세한 내용은 Phaser 아틀라스 페이지.
run.png + run.json (PixiJS 8)
const sheet = await Assets.load("run.json") 후 sheet.textures["run_0"]이나 sheet.animations["run"]. PixiJS 스프라이트시트 JSON 참고.
최대 크기를 올리거나(최대 16384px), 엔진이 읽을 수 있으면 회전 허용, 또는 그 프레임을 축소
다른 방법
방법
이럴 때 더 낫습니다
단순 격자 시트(아래의 기존 만들기 도구)
모든 프레임 크기가 같고 엔진이 칸 단위로 자를 때. 예: GameMaker 스트립, Godot의 Add Frames from Sprite Sheet. 맞춰 둘 데이터 파일이 없습니다.
Aseprite 자체 시트 내보내기(명령줄의 --sheet-pack, --trim, --merge-duplicates)
그림을 Aseprite에서 관리하고 태그와 길이가 담긴 JSON만 있으면 될 때. Godot SpriteFrames 같은 엔진 번들은 만들지 않습니다.
TexturePacker Pro
폴리곤 패킹, GPU 텍스처 형식, 빌드 파이프라인용 명령줄이 필요할 때. Nerulio와의 측정 비교는 TexturePacker 대안 페이지.
엔진 자체 패커(Defold 아틀라스, Spine 텍스처 패커)
엔진이 빌드·내보내기 때 개별 이미지를 어차피 패킹할 때. 프레임 이미지만 있으면 됩니다. 시트를 PNG 프레임으로 나누기 참고.
버전과 출처
위 크기는 저장소 테스트 코퍼스의 닌자 프레임 6장에 Nerulio 패커를 돌린 실제 결과이며, 2026-09-23 비교 측정의 수치와 같습니다. 내보낸 파일은 Godot 4.7.2, Unity 6000.5.3f1, Phaser 3.90·4.2, PixiJS 8.21, spine-canvas 4.2, LÖVE 11.5에서 불러왔고, Defold 파일은 bob.jar 1.13.1로 빌드했습니다. 다른 도구의 옵션 이름은 각 공식 문서를 따릅니다.
