FNF 스프라이트시트 GIF 변환 · PNG+XML
Friday Night Funkin' 캐릭터는 PNG 한 장과 "BF idle dance0000" 같은 이름이 가득한 Sparrow XML로 되어 있습니다. 두 파일을 함께 넣으면 SubTexture가 각각 프레임이 되고, 이름 앞부분으로 애니메이션을 묶고, 트림 오프셋으로 캐릭터가 튀지 않게 맞춘 뒤, 애니메이션마다 GIF·APNG·WebM으로 내보냅니다.
- Starling / Sparrow XML검증됨· Phaser 4.2
- GIF / APNG디코딩 확인· Pillow
- Godot 4검증됨· Godot 4.7.2
- Unity 6검증됨· Unity 6000.5.3f1
- Phaser 3 / 4검증됨· Phaser 3.90 + 4.2
- PixiJS 8검증됨· PixiJS 8.21
- Aseprite JSON검증됨· Phaser load.aseprite · PixiJS 8.21
- .aseprite검증됨· Aseprite 1.3.18
- Spine / libGDX검증됨· spine-canvas 4.2
- LÖVE검증됨· LÖVE 11.5
- Defold빌드 확인· Defold bob.jar 1.13.1
- GameMaker미검증
- CSS sprites검증됨· Chromium
이렇게 작동합니다
- SubTexture 이름을 앞부분으로 묶기: "BF idle dance0000", "BF idle dance0001" …은 자연 정렬 순서로 "BF idle dance" 애니메이션이 됩니다.
- frameX·frameY·frameWidth·frameHeight를 유지해 프레임마다 원래 크기 안의 제자리에 놓입니다.
- XML에는 시간이 없어 100ms로 시작합니다. 모두 fps로 설정하면 애니메이션 전체를 한 번에 바꿉니다. FNF 모드는 24fps(약 42ms)를 많이 쓰지만 캐릭터 파일을 확인하세요.
- 애니메이션마다 GIF 하나, 프레임은 피벗 정렬, 투명은 1비트. 부드러운 가장자리는 APNG가 그대로 지킵니다.
- 같은 프레임을 Starling / Sparrow XML, Phaser, Godot 등 다른 대상으로도 내보낼 수 있습니다.
사용 방법
- 캐릭터 PNG와 .xml을 함께 넣습니다.
- 가져오기 패널에서 프레임 수, 이름이 묶인 방식, 이미지 밖에 있는 프레임을 봅니다.
- 애니메이션마다 태그를 고르고 애니메이션 패널의 모두 fps로 설정을 쓰거나 프레임별 ms를 입력합니다.
- Enter로 미리 보고, 어니언 스킨(F3)으로 오프셋이 맞는지 봅니다.
- 패킹·내보내기에서 Animated GIF(또는 APNG, WebM video)를 골라 내보내면 애니메이션마다 파일이 하나씩 나옵니다.
Sparrow XML 속성과 Studio의 처리
| XML 속성 | Studio의 처리 |
|---|---|
| TextureAtlas imagePath | XML과 PNG를 짝지음 |
| SubTexture name | 프레임 이름. 끝 숫자 앞부분이 애니메이션 이름 |
| x, y, width, height | 시트에서의 프레임 영역 |
| frameX, frameY | 그 영역이 원래 프레임 안에서 놓이는 위치(XML에는 음수로 저장) |
| frameWidth, frameHeight | 원래 프레임 크기. 모든 프레임이 제자리를 지킴 |
| rotated="true" | 돌아간 채로 가져옴, 내보내기는 미검증 |
| pivotX, pivotY | 있으면 프레임 피벗 |
| 시간 속성 없음 | 정하기 전까지 프레임당 100ms |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 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는 원본과 동일합니다. |
검증 근거
GIF 디코더: 실제 GIF 29개 408/408프레임이 Pillow와 동일, APNG 16개 132/132프레임. .aseprite: 코퍼스 231개 파일을 가져와 다시 쓰고 Aseprite 1.3.18로 열었을 때 태그·길이·픽셀 231/231 일치. 내보내기: 실제 CC0 에셋으로 실제 엔진에서 49회 실행해 47회 통과. 실패 2회는 Phaser 3.90의 트림 XML 버그이며 Phaser 3 프리셋으로 피합니다.
한계
- 격자·섬 인식은 신뢰도가 표시된 미리보기일 뿐이며 적용을 누르기 전에는 아무것도 자르지 않습니다. 모든 선택에는 한 번에 바꿀 수 있는 대안이 있습니다.
- 레이어가 정확히 합성되지 않는 .aseprite 파일(그룹 불투명도 등)은 합쳐서 가져오고, 가져오기 패널에 이유를 표시합니다.
- 가져온 아틀라스에서 회전된 프레임은 회전된 채로 남으며 그 내보내기는 미검증입니다.
- 이미지는 한 변 32,768px(2억 6,800만 픽셀)까지이며 브라우저 메모리에 따라 달라집니다.
자주 묻는 질문
GIF 속도가 이상해요.
Sparrow XML에는 시간이 없어 모든 프레임이 100ms로 시작합니다. 모드에 맞는 속도로 바꾸세요. GIF는 1/100초 단위라 24fps(프레임당 41.7ms)는 4로 기록되고 반올림 내역을 알려 줍니다. APNG는 ms로 저장합니다.
일부 프레임이 옆으로 누워 있어요.
rotated="true"인 SubTexture는 시트에 놓인 그대로 돌아간 채 가져오며, 그 프레임의 내보내기는 미검증입니다. 원본 프레임이 있다면 회전 없이 다시 패킹하세요.
FNF 스프라이트시트를 PNG로 바꿀 수 있나요?
APNG는 애니메이션마다 픽셀이 그대로인 움직이는 PNG를 하나씩 쓰고, 패킹·내보내기의 모든 대상은 데이터 파일과 함께 다시 패킹한 PNG 시트를 씁니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).