스프라이트 시트 패커 비교 · 크기·픽셀 정확도·중복 실측
스프라이트 시트를 무료로 만드는 방법 네 가지를 실제 CC0 프레임 세트 5개에 트림 켜고 여백 2로 똑같이 돌려 봤습니다. CodeAndWeb 무료 웹 패커, GAPTools 텍스처 패커, free-tex-packer의 npm 코어 0.3.9, 그리고 Studio의 Pack & Export입니다. 넷 다 프레임을 PNG와 데이터 파일로 묶어 주지만, 시트 크기, 프레임이 픽셀 그대로 돌아오는지, 중복 프레임 처리, 페이지 크기 제한을 지키는지가 다릅니다.
- Godot 4검증됨· Godot 4.7.2
- Phaser 3 / 4검증됨· Phaser 3.90 + 4.2
- PixiJS 8검증됨· PixiJS 8.21
- Unity 6검증됨· Unity 6000.5.3f1
- Aseprite JSON검증됨· Phaser load.aseprite · PixiJS 8.21
- .aseprite검증됨· Aseprite 1.3.18
- Spine / libGDX검증됨· spine-canvas 4.2
- Starling / Sparrow XML검증됨· Phaser 4.2
- LÖVE검증됨· LÖVE 11.5
- Defold빌드 확인· Defold bob.jar 1.13.1
- GameMaker미검증
- CSS sprites검증됨· Chromium
- GIF / APNG디코딩 확인· Pillow
이렇게 작동합니다
- 회전을 허용하면 5개 세트 모두, 회전 없이는 5개 중 4개에서 가장 작은 시트. 예외인 archer는 free-tex-packer가 3037×540 띠 모양으로 0.3% 더 작았습니다.
- PNG를 캔버스를 거치지 않고 자바스크립트로 해독하므로 gAMA/cHRM 색 정보가 든 PNG나 반투명 가장자리도 바뀌지 않습니다. 5개 세트의 모든 프레임이 정확히 복원됐습니다.
- 같은 프레임은 바이트까지 비교한 뒤 한 번만 저장하고(ninja 18프레임 → 6개), 최대 페이지 크기를 넘으면 최대 64페이지로 나눕니다.
- 내보내기 대상이 다른 설정을 요구하면(고도 엔진은 회전 없음, Aseprite JSON은 한 페이지) 그 대상용으로 다시 묶고 버튼 옆에 바뀐 점을 보여 줍니다.
CC0 프레임 세트 5개로 본 무료 패커 4개
각 도구가 만든 시트 한 장의 가로×세로입니다. 트림 켬, 여백 2, 최대 4096. Studio 칸은 회전 없는 결과를 먼저, 회전한 결과를 뒤에 적었습니다.
| Nerulio Studio | CodeAndWeb 무료 웹 패커 | GAPTools | free-tex-packer-core 0.3.9 | |
|---|---|---|---|---|
| ninja(6프레임) | 38×50, 회전 시 33×57 | 126×62(트림 없음) | 64×36 | 129×20 |
| archer(10프레임) | 1543×1066, 회전 시 1071×1526 | 1532×1668 | 1936×872 | 3037×540(띠 모양) |
| samurai(60프레임) | 275×248, 회전 시 313×216 | 400×400 | 292×256 | 276×300 |
| toon(45프레임) | 631×591, 회전 시 587×592 | 784×780 | 760×496 | 3560×105(띠 모양) |
| spaceshooter(294프레임) | 966×977, 회전 시 944×996 | 1158×1051 | 1024×1024 | 1003×1003 |
| 픽셀 그대로 복원된 세트 | 5개 중 5개 | samurai만 | samurai만 | 5개 중 5개 |
| ninja ×3(18프레임, 서로 다른 것 6) | 6개 저장, 38×50 | 18개 저장, 168×155 | 18개 저장, 120×52 | 6개 저장 |
| archer ×8, 최대 2048 | 5페이지, 12,841,021px². 중복 제거 시 10개 저장, 1543×1066 한 장 | 4213×4448 한 장(제한 무시) | 5장, 13,253,792px² | — |
| 트림·회전 | 없음·트림·크롭 유지·크롭, 엔진별 회전 | 둘 다 없음(유료 Pro 기능) | 트림, 회전 | 트림, 회전 |
| 실행 형태 | 브라우저, 로컬 | 브라우저, 로컬 | 브라우저, 로컬 | npm 패키지(웹 앱 없음) |
| 엔진이 실제로 불러온 출력 | Godot·Unity·Phaser 3/4·PixiJS 8·Spine·LÖVE·Aseprite, Defold는 빌드 확인 | — | — | — |
이 수치의 출처: docs/STUDIO-PACK-H2H.md (2026-09-23)
free-tex-packer / GAPTools / CodeAndWeb 쪽이 더 나은 경우
- free-tex-packer 코어는 명령줄이 있는 npm 패키지라 빌드 스크립트 안에서 돌릴 수 있습니다. Studio에는 명령줄이 없습니다. 또 회전 없는 archer에서는 이 코어의 시트가 0.3% 더 작았습니다(띠 모양).
- GAPTools와 CodeAndWeb 무료 패커는 웹페이지 하나로 끝납니다. 프레임을 넣고 누르면 끝이라, 한 번만 쓸 시트라면 더 빠릅니다.
- CodeAndWeb의 유료 TexturePacker Pro는 여기 무료 도구 모두보다 앞섭니다. 폴리곤 패킹, GPU 텍스처 형식, 스마트 폴더가 있는 명령줄. Studio는 사각형 패킹만 합니다.
사용 방법
- 번호 붙은 PNG, 폴더, GIF, .aseprite 중 무엇이든 이 페이지에 끌어다 놓으면 Sprite를 거쳐 Pack & Export가 열립니다.
- 트림 켜기, 여백 2, 최대 크기를 맞춰 내 그림으로 같은 비교를 해 봅니다.
- 노력 수준을 best로 올리고 사용률과 페이지 탭을 지금 쓰는 패커 결과와 비교합니다.
- 엔진용으로 내보내거나, TexturePacker 방식 hash인 Generic JSON으로 받습니다.
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 검증됨 Godot 4.7.2Godot가 불러와 모든 애니메이션 프레임을 그려 원본과 비교했습니다. 씬은 Nearest 필터를 쓰고 회전은 쓰지 않습니다. |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 검증됨 Unity 6000.5.3f1배치 모드에서 스프라이트 영역·피벗·픽셀·클립 키·길이를 확인했습니다. |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 검증됨 Phaser 3.90 + 4.2두 버전 모두에서 프레임과 애니메이션을 그렸습니다. |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 검증됨 PixiJS 8.21회전·여러 페이지 아틀라스도 포함해 확인했습니다. |
| Aseprite JSON | hash / array · frameTags · slices | 검증됨 Phaser load.aseprite · PixiJS 8.21태그의 방향과 반복 횟수가 유지됩니다. |
| .aseprite | layers · tags · durations · slices | 검증됨 Aseprite 1.3.18Aseprite 명령줄로 열어 렌더링했습니다. |
| Spine / libGDX | .atlas | 검증됨 spine-canvas 4.2Spine 런타임이 회전·트림 영역을 모두 그렸습니다. libGDX 자체는 실행하지 않았습니다. |
| Starling / Sparrow XML | XML per page | 검증됨 Phaser 4.2Phaser 3.90은 트림된 XML 프레임을 잘못 그립니다(Phaser 버그). "Sparrow XML (Phaser 3)" 프리셋은 트림을 끄며 3.90·4.2 모두 통과합니다. |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 검증됨 LÖVE 11.5포함된 헬퍼로 모든 프레임을 그리고 모든 애니메이션을 재생했습니다. |
| Defold | .atlas · .tilesource | 빌드 확인 Defold bob.jar 1.13.1Defold 명령줄 빌더로 빌드하고 빌드된 텍스처의 UV를 다시 읽어 확인했습니다. |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 미검증GameMaker에서 불러오지 않았습니다(헤드리스 실행 불가). 스트립은 GameMaker 스트립 가져오기 방식대로 자릅니다. |
| CSS sprites | .css · preview .html | 검증됨 Chromium포함된 스타일시트로 모든 클래스를 그렸습니다. |
| GIF / APNG | one file per animation | 디코딩 확인 Pillow내보낸 뒤 모든 프레임과 지연 시간을 다시 디코딩했습니다. APNG는 원본과 동일합니다. |
검증 근거
내보내기: 실제 CC0 에셋으로 실제 엔진에서 49회 실행해 47회 통과. 실패 2회는 Phaser 3.90의 트림 XML 버그이며 Phaser 3 프리셋으로 피합니다. 실제 프레임 세트 5개로 패커 비교(CodeAndWeb 무료 웹 패커, GAPTools, free-tex-packer): 회전 허용 시 5개 모두 가장 작은 시트, 회전 없이는 5개 중 4개. 모든 프레임이 픽셀 단위로 복원됩니다.
한계
- 폴리곤(메시) 패킹은 제공하지 않습니다. 검증한 엔진 중 내보낸 데이터로 메시 아틀라스를 그리는 엔진이 없기 때문입니다.
- GameMaker 스트립은 GameMaker 자체에서 검증하지 않았습니다.
- 배율 변형(@0.5x~@4x)은 최근접 이웃 방식만 씁니다.
- 트림된 Starling XML은 Phaser 3.90에서 잘못 그려지므로 "Sparrow XML (Phaser 3)" 프리셋을 쓰세요.
자주 묻는 질문
웹 패커를 쓰면 프레임 색이 바뀌는 이유는?
이번에 비교한 브라우저 도구들은 <img>와 2D 캔버스로 PNG를 해독합니다. 그래서 gAMA/cHRM 정보가 있는 ninja 프레임은 색 관리 때문에 회색 (50,50,50)이 (46,46,46)으로 바뀌었고, spaceshooter 세트는 사전 곱셈 알파 때문에 반투명 가장자리가 최대 10단계 달라졌습니다.
free-tex-packer는 이제 못 쓰나요?
웹 앱 도메인에서는 더 이상 앱을 제공하지 않습니다. npm 코어(0.3.9)는 아직 동작하고, 이번에 잰 것도 그 코어입니다. 프레임은 정확했고 중복은 한 번만 저장했으며, Studio보다 작은 시트를 만든 유일한 경우(회전 없는 archer)도 이 코어였습니다.
"정확히 복원"은 어떻게 확인했나요?
아틀라스에서 데이터 파일(트림 오프셋, 회전)대로 TexturePacker JSON 규칙에 따라 각 프레임을 다시 잘라 내고, 완전히 투명한 픽셀의 색은 빼고 원본과 픽셀 단위로 비교했습니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).