Aseprite GIF 변환 · 태그마다 움직이는 GIF
.aseprite 파일은 애니메이션을 태그로 나눠 둡니다. 여기에 넣고 "Animated GIF"로 내보내면 태그 이름이 붙은 GIF가 태그마다 하나씩 나오며, 각 프레임은 자기 길이만큼 보이고 피벗에 맞춰 정렬되며, 역방향·핑퐁은 프레임 순서로 풀어서 기록됩니다.
- 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
이렇게 작동합니다
- 태그마다 <파일>_<태그>.gif 하나. 프레임은 재생 순서대로, 피벗을 맞춘 같은 칸에 그려 흔들리지 않습니다.
- 태그의 반복 횟수를 따릅니다: 0은 무한 반복, 3은 세 번, 1은 한 번 재생.
- GIF 지연은 1/100초 단위입니다. 브라우저와 디스코드는 0~1을 10으로 보여 주므로 가장 짧게 2(20ms)로 쓰고, 반올림한 지연은 내보낸 뒤 목록으로 알려 줍니다.
- 투명은 팔레트 한 칸입니다. 알파 128 이상은 불투명, 미만은 투명이며, 모든 프레임을 "배경으로 복원" 방식의 전체 프레임으로 써서 투명한 프레임이 겹쳐 쌓이지 않습니다.
- 색이 255개 이하(도트 그림 대부분)면 팔레트가 정확하고, 넘으면 전체 또는 프레임별 미디언 컷, 가장 가까운 색, 디더링 없음.
사용 방법
- .aseprite 파일을 넣고 Enter로 타임라인에서 태그별 움직임을 봅니다.
- 필요하면 프레임 패널에서 길이를, 애니메이션 패널에서 방향이나 반복을 고칩니다.
- 패킹·내보내기에서 Animated GIF(전체·프레임별 팔레트), APNG, WebM video 중에 고릅니다.
- 내보낸 뒤 메모를 확인합니다. 반올림된 지연, 줄어든 팔레트, 딱딱해진 가장자리를 태그별로 적어 줍니다.
Aseprite 애니메이션: GIF·APNG·WebM 비교
| Animated GIF | APNG | WebM video | |
|---|---|---|---|
| 투명 | 1비트(알파 128 이상 불투명) | 알파 그대로 | 없음: 단색 배경 |
| 색 | 255색까지 정확, 넘으면 미디언 컷 | 모든 픽셀 그대로 | 손실 압축 영상(VP9, 안 되면 VP8) |
| 시간 | 1/100초 단위, 최소 20ms | 프레임별 ms | 프레임별 길이 그대로 |
| 픽셀 크기 | 1:1 | 1:1 | 최근접 이웃 4배 |
| 파일 | 태그마다 하나 | 태그마다 하나 | 애니메이션마다 하나 |
| 확인 방법 | Pillow로 모든 프레임과 지연을 디코딩 | Pillow, 프레임 일치 | Chromium 재생, ffprobe로 프레임 수 확인 |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 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에서 계단처럼 보여요.
GIF는 반투명을 저장할 수 없습니다. 알파 128 이상은 불투명, 나머지는 투명으로 쓰고 그런 일이 있으면 알려 줍니다. 부드러운 알파와 ms 단위 지연을 그대로 두려면 APNG를 고르세요.
16ms 프레임이 GIF에서 더 느린 이유는?
GIF는 1/100초 단위로 저장하고, 브라우저와 디스코드는 0이나 1을 10으로 재생합니다. 그래서 최소 2(20ms)로 기록하고 반올림한 프레임을 모두 알려 줍니다.
더 크게 올리고 싶어요.
GIF와 APNG는 파일의 픽셀 크기 그대로입니다. WebM은 최근접 이웃으로 4배 키우고 단색 배경을 깔아 동영상 플레이어에서도 픽셀이 네모나게 보입니다.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).