도트 애니메이션 만들기 · 프레임·어니언 스킨·태그
브라우저에서 한 프레임씩 그려 애니메이션을 만듭니다. 프레임·태그·시간은 자르기와 패킹에 쓰는 Studio 타임라인에 그대로 있고, 픽셀 작업 공간은 앞뒤 프레임을 어니언 스킨으로 보여 주며 칠하게 해 줍니다. 걷기 동작을 한곳에서 그리고, 재생하고, 내보낼 수 있습니다.
- .aseprite검증됨· Aseprite 1.3.18
- Engine bundles검증됨· Godot 4.7.2 · Unity 6000.5
- Palette files측정 확인· read back
- Frame PNG · .nerulio일반 파일
이렇게 작동합니다
- 현재 프레임을 복사한 새 프레임(Alt+N)이나 빈 프레임(Alt+Shift+N), 프레임 삭제(Alt+C), 쉼표·마침표로 이동, Enter로 재생·정지. 태그에는 방향(정방향·역방향·핑퐁)과 반복 횟수가 있습니다.
- 어니언 스킨(F3)은 칠하는 프레임 아래에 이전·다음 프레임을 보여 주고(빨강·파랑으로 물들이기 선택 가능), 보여 줄 개수와 불투명도는 타임라인에서 정합니다. 미리보기 창(F7)은 칠하는 동안에도 정수 배율로 태그를 계속 재생합니다.
- 프레임마다 밀리초 단위 시간을 따로 가지므로 멈춘 자세와 빠른 휘두르기를 한 애니메이션에 담을 수 있습니다. 512×512, 100프레임 스프라이트에서 100ms 프레임이 제시간에 재생됐습니다(2초에 20프레임).
- 가져온 시트의 한 프레임을 칠하면 그 프레임만 자기 픽셀을 갖게 되고, 다른 프레임과 원본 시트는 그대로이며 변경은 되돌리기 한 번입니다.
- 프레임은 스프라이트 작업 공간이 읽는 모든 곳에서 옵니다. 픽셀을 보고 자르는 시트, 번호 붙은 PNG, 지연 시간이 있는 GIF·APNG, 레이어·태그·시간이 있는 .aseprite.
사용 방법
- GIF, 번호 붙은 프레임, .aseprite 파일을 이 페이지에 끌어다 놓으면 프레임으로 들어와 픽셀 작업 공간이 열립니다. 시트 한 장은 먼저 스프라이트 작업 공간에서 자를 위치를 확인하고 적용합니다.
- 타임라인에서 프레임을 고르고 F3으로 어니언 스킨을 켠 뒤, 앞뒤 프레임을 보며 자세를 다시 그립니다.
- Alt+N으로 중간 프레임을 넣고 프레임마다 시간을 입력한 뒤, 타임라인의 태그 줄을 끌어 애니메이션 이름을 붙입니다.
- Enter를 누르거나 F7로 미리보기 창을 열어 반복을 확인하고, .aseprite로 저장하거나 패킹·내보내기에서 애니메이션마다 GIF·APNG로 내보냅니다.
애니메이션할 때 쓰는 타임라인 조작
스프라이트 작업 공간과 같은 타임라인을 픽셀 작업 공간에서 씁니다.
| 동작 | 키 | 결과 |
|---|---|---|
| 새 프레임(복사) | Alt+N | 현재 프레임을 바로 뒤에 복제해 다시 그릴 수 있게 함 |
| 빈 프레임 | Alt+Shift+N | 새 자세를 위한 빈 프레임 추가 |
| 프레임 삭제 | Alt+C | 선택한 프레임을 되돌리기 한 번으로 삭제 |
| 어니언 스킨 | F3 | 현재 프레임 아래에 앞뒤 프레임 표시. 개수·불투명도·색 조절 |
| 재생 / 미리보기 창 | Enter / F7 | 프레임별 시간대로 재생, 미리보기는 정수 배율로 선명하게 |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 CC0 에셋으로 내보낸 파일을 해당 엔진·도구가 직접 불러와 원본과 비교했다는 뜻입니다. 불러오지 않은 형식은 그렇게 표시합니다.
| 대상 | 파일 | 검증 |
|---|---|---|
| .aseprite | layers · blend · opacity · locked · indexed palette · frames · tags | 검증됨 Aseprite 1.3.18실제 Aseprite 명령줄이 파일을 인덱스 모드, 레이어 2개, 불투명도 160의 곱하기, 편집 불가로 잠긴 레이어 그대로 다시 열었고 프레임 픽셀이 같았습니다. |
| Palette files | .gpl · .pal · .hex · .ase · .act · .json | 측정 확인 read back형식마다 쓰고 다시 읽어 같음을 확인했고, Aseprite가 만든 .gpl·.pal·.hex·.act와 실제 Adobe .ase(16색)를 읽었습니다. |
| Engine bundles | Godot 4 · Unity 6 · Phaser 3/4 · PixiJS 8 … through Pack & Export | 검증됨 Godot 4.7.2 · Unity 6000.5그린 스프라이트는 패킹·내보내기에서 묶습니다. 그 엔진 파일은 실제 CC0 에셋으로 각 엔진에서 불러와 확인했습니다(49회 중 47회 통과, 실패 2회는 Phaser 3 프리셋이 피하는 Phaser 3.90 버그). |
| Frame PNG · .nerulio | PNG-8 with the palette when an indexed frame fits it · project file | 일반 파일어떤 도구에서도 쓰는 일반 파일이며, 엔진 실행 검증은 주장하지 않습니다. |
검증 근거
정리 벤치마크(원래 1배 그림을 아는 CC0 사례 69개): 크기를 정확히 찾은 비율 81 %(±1px 90 %), 배경 유지 시 픽셀 74.0 % 정확. 가장 나은 경쟁 도구는 크기 30 %(perfectPixel), 정확한 픽셀 44.6 %(unfake.js). Aseprite로 만든 ×4 최근접 확대는 100 %, ×3.78 쌍선형 확대는 99.7 % 정확하게 돌아왔고 두 경우 모두 크기를 자동으로 찾았습니다. 1px 외곽선과 드롭 섀도는 Aseprite 결과와 픽셀까지 같았습니다(1846px, 705px). 여기서 쓴 .aseprite는 Aseprite 1.3.18에서 인덱스 모드와 레이어·블렌드·잠금이 그대로 열립니다.
한계
- 픽셀 작업 공간에 없는 것(Aseprite에는 있음): 레이어 그룹, 링크된 셀, 타일맵 레이어, 참조 레이어, RotSprite와 선택 영역 자유 회전·크기 조절(뒤집기와 90°만), 그라디언트·스프레이·윤곽·텍스트 도구, 사용자 브러시(사각·원 1~16px), 타일 반복 그리기, Lua 스크립트와 명령줄.
- 대칭 축은 숫자로 입력하며 캔버스에서 끌 수 없습니다. 터치에서는 오른쪽 버튼이 없어 배경색은 전환 버튼이나 X로 씁니다.
- 정리: JPEG는 가깝게 돌아오지만(배경 유지 시 84 %가 ΔE 0.02 이내) 정확히 같은 경우는 드뭅니다(12 %). 모의 생성 그림은 크기를 정확히 맞힌 비율이 20 %(±1px 80 %)이고, 실제 생성 그림 7장은 하나도 자동으로 맞추지 않았습니다. 패널이 제안한 픽셀 크기를 직접 입력해야 합니다.
- 인덱스 변환은 Aseprite의 RGB 거리가 아니라 Oklab에서 가장 가까운 색을 고릅니다. 시험 스프라이트의 68 % 픽셀이 다른(눈으로 더 가까운) 색이 됐습니다. Lospec 검색이 유일한 네트워크 요청이며 먼저 묻습니다.
자주 묻는 질문
프레임 수에 제한이 있나요?
정해진 제한은 없고 메모리가 한계입니다. 브라우저 테스트는 512×512에 100프레임인 스프라이트를 칠하며, 프레임 전환 16ms, 되돌리기 90~140ms가 걸렸습니다.
쉼표·마침표 키가 끝에서 처음으로 돌아가나요?
이번 버전에서는 돌아가지 않고 첫 프레임과 마지막 프레임에서 멈춥니다. 스프라이트 작업 공간도 같습니다. 계속 돌려 보려면 Enter로 재생하거나 태그 안 반복을 켜세요.
애니메이션을 GIF로 내보낼 수 있나요?
네. 패킹·내보내기에서 애니메이션마다 GIF 하나 또는 원본과 같은 APNG로, 프레임별 지연 시간 그대로 내보냅니다. 내보낸 파일은 프레임마다 다시 디코딩해 확인했습니다. GIF는 투명이 켜짐·꺼짐뿐이니 부드러운 가장자리는 APNG로 두세요.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).