스프라이트 시트 동영상 변환 · 선명한 WebM
개발 일지, 트레일러, 스토어 페이지에는 GIF보다 동영상이 필요할 때가 많습니다. 시트를 애니메이션으로 나눈 뒤 "WebM video"로 내보내면 애니메이션마다 WebM이 하나씩 나오며, 최근접 이웃으로 4배 키워 도트가 네모 그대로 선명하고, 단색 배경 위에서 프레임마다 자기 길이만큼 보입니다.
- 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
- Starling / Sparrow XML검증됨· Phaser 4.2
- LÖVE검증됨· LÖVE 11.5
- Defold빌드 확인· Defold bob.jar 1.13.1
- GameMaker미검증
- CSS sprites검증됨· Chromium
이렇게 작동합니다
- 동영상은 색을 절반 해상도(4:2:0)로 저장해 한 픽셀짜리 점이 번지므로, 인코딩 전에 최근접 이웃으로 4배 키웁니다.
- 대부분의 플레이어가 WebM의 VP9 알파를 무시하기 때문에 투명 대신 단색 배경을 씁니다.
- 브라우저의 WebCodecs VideoEncoder로 VP9(안 되면 VP8) 인코딩, Studio 자체 WebM 먹서로 파일 작성. 업로드는 없습니다.
- 프레임별 길이를 그대로 써서 멈춤 동작이나 들쭉날쭉한 타이밍도 살아납니다. 프레임은 피벗에 맞춰 재생 순서대로 들어갑니다.
- 2026-09-24에 Chromium과 Firefox 양쪽에서 확인: 둘 다 모든 프레임이 4배인 VP9 WebM을 만들었고 ffprobe로 프레임 수를 셌습니다.
사용 방법
- 스프라이트 시트를 넣고 적용을 누릅니다. 처음에는 행마다 애니메이션이 하나씩 생깁니다.
- 프레임별로, 또는 태그 전체를 모두 fps로 설정해 시간을 맞추고 Enter로 확인합니다.
- 패킹·내보내기에서 WebM video를 고릅니다.
- 내보내면 애니메이션마다 .webm이 하나씩 나옵니다. MP4가 필요하면 ffmpeg 같은 도구로 변환하세요.
스프라이트 애니메이션 공유: WebM·GIF·APNG
| WebM video | Animated GIF | APNG | |
|---|---|---|---|
| 보기 좋게 확대 | 예, 최근접 이웃 4배 | 아니요, 시트 크기 그대로 | 아니요, 시트 크기 그대로 |
| 스프라이트 뒤 | 단색 배경 | 투명(켜짐·꺼짐만) | 투명, 부드러운 가장자리 유지 |
| 색 정확도 | 비슷하지만 압축됨 | 255색 이하면 정확 | 정확 |
| 손실? | 있음 | 255색을 넘을 때만(미디언 컷) | 없음 |
| 필요한 것 | WebCodecs VideoEncoder(Chromium, Firefox) | Studio만 있으면 됨 | Studio만 있으면 됨 |
| 어울리는 곳 | 영상 게시물, 트레일러, 스토어 페이지 | GIF가 재생되는 채팅·커뮤니티 | 팀에 보여 줄 정확한 미리보기 |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 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만 픽셀)까지이며 브라우저 메모리에 따라 달라집니다.
자주 묻는 질문
MP4로 바로 받을 수 있나요?
아니요. WebM(VP9, 안 되면 VP8)만 씁니다. ffmpeg 같은 변환기로 MP4로 바꾸면 되고, 최근접 이웃 4배 확대가 이미 들어가 있어 도트는 네모 그대로입니다.
WebM 버튼이 눌리지 않아요.
동영상은 브라우저의 WebCodecs VideoEncoder로 만듭니다. Chromium과 Firefox에는 있고 둘 다 확인했습니다. 없는 브라우저에서는 버튼이 꺼져 있고, GIF와 APNG는 그대로 내보낼 수 있습니다.
동영상은 무손실인가요?
아니요. 동영상 압축은 손실이 있어 WebM은 보여 주기용이지 엔진에 넣는 용도가 아닙니다. 정확한 프레임은 시트 내보내기나 APNG로 받으세요.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).