Aseprite를 GameMaker로 · 태그마다 스트립
에이스프라이트 애니메이션을 GameMaker로 옮길 때는 태그 하나가 스프라이트 하나가 되어야 하고, 파일명 끝의 _stripN이 몇 칸으로 나눌지 알려 줍니다. 파일을 넣고 GameMaker 대상으로 내보내면 태그별 가로 띠 이미지와, 원점·재생 속도·밀리초를 적은 gamemaker.json이 생깁니다. 단, GameMaker 안에서는 미검증입니다. 돌려 볼 수 있는 GameMaker가 없어 띠 이미지를 디코딩해 원래 프레임과 맞춰 보는 데까지만 확인했습니다.
GameMaker는 .aseprite 파일을 열지 못하고 이미지를 가져오며, 이름이 …_stripN인 PNG는 N프레임 스프라이트가 됩니다. 파일을 Nerulio에 넣고 태그를 확인한 뒤 GameMaker로 내보내면 태그마다 띠 이미지 하나(spr_hero_attack_strip4.png)가 생깁니다. 역재생·핑퐁은 풀어 쓰고, 모든 프레임을 피벗에 맞춰 원점 하나로 충분하게 하고, 원점·속도·프레임별 밀리초를 gamemaker.json에 적습니다. GameMaker 스프라이트는 속도가 하나라서 들쭉날쭉한 시간은 데이터로만 남습니다. GameMaker에서는 미검증입니다. 띠를 디코딩해 원본과 비교했을 뿐 GameMaker로 불러온 적은 없습니다.
- GameMaker미검증
- 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
- CSS sprites검증됨· Chromium
- GIF / APNG디코딩 확인· Pillow
시간이 있는 태그에서 속도가 하나인 스프라이트로
Aseprite는 캐릭터 전체를 파일 하나에 담습니다. 길이가 제각각인 프레임, 방향과 반복 횟수가 있는 동작별 태그, 레이어, 피벗을 담을 수 있는 슬라이스입니다. GameMaker는 동작마다 따로 된 스프라이트 에셋에 프레임, 원점 하나, 재생 속도 하나를 두며, 매뉴얼의 띠 규칙 덕분에 PNG 한 장이 그 스프라이트의 모든 프레임을 담을 수 있습니다.
Nerulio는 프레임마다 보이는 레이어를 합성하고 태그를 재생 순서대로 따라갑니다. 역재생 태그는 거꾸로 쓰고, 3프레임 핑퐁 태그는 0-1-2-1이 되므로 N은 한 바퀴의 단계 수입니다. 한 태그의 모든 프레임은 피벗이 같은 픽셀에 오도록 공통 칸 하나에 그려지고, 그 픽셀이 원점입니다. 파일 이름은 소문자로 바뀌고 영문자·숫자·밑줄이 아닌 문자는 _가 됩니다.
두 형식이 가장 다른 곳은 시간입니다. 태그의 모든 프레임 길이가 같으면 속도는 정확히 초당 1000 ÷ ms프레임입니다. 다르면 띠에 태그 속도(Studio 태그는 10 FPS)를 쓰고 경고하며, 실제 밀리초는 durationsMs에 남습니다. 반복 횟수는 JSON의 loop 값이 되고, 띠 자체에는 시간이나 반복 설정이 없습니다.
- 태그
- Aseprite에서 방향과 반복 횟수가 있는, 이름 붙은 프레임 구간.
- 띠(Strip)
- 스프라이트의 모든 프레임을 담은 가로 PNG 한 장, 이름은
…_stripN. - 공통 칸
- 한 띠의 모든 프레임이 공유하는 칸. 모든 피벗이 한 점에 오도록 크기를 정함.
- durationsMs
- 프레임마다 정확한 밀리초. gamemaker.json에 남음.
예시: 32 × 32 캐릭터의 태그 세 개
idle 4 × 125 ms, ∞ → spr_hero_idle_strip4.png 속도 1000 / 125 = 8, loop true
jump 3 × 80 ms, 핑퐁 → 순서 0-1-2-1 → spr_hero_jump_strip4.png 속도 12.5
attack 100, 100, 150, 250 ms → spr_hero_attack_strip4.png 속도 10 + 경고, loop false
attack의 32 × 32 프레임 피벗: x = 16, 16, 20, 12(찌르기), y = 31
칸 너비 = 왼쪽 최대 20 + 오른쪽 최대 (32 − 12) 20 = 40
칸 높이 = 31 + (32 − 31) = 32 원점 x 20, y 31
띠 = 4 × 40 = 160 × 32 px그림 안에서 피벗이 움직이기 때문에 attack 칸은 32px 프레임보다 넓습니다. 모든 피벗을 x 20에 두어야 팔이 찌르는 동안 몸이 제자리에 있습니다.
변환 후에도 남는 것
| Aseprite | Nerulio의 GameMaker 파일 | GameMaker |
|---|---|---|
| 태그 | 태그마다 띠 하나(예: spr_hero_attack_strip4.png) | 가져올 때 N프레임으로 잘리는 스프라이트 하나 |
| 방향: 역방향·핑퐁 | 프레임 순서를 풀어 씀. N = 한 바퀴의 단계 수 | 그 순서의 N프레임 |
| 프레임 길이가 모두 같음 | playbackSpeed = 1000 ÷ ms | Frames per second 단위 속도 |
| 프레임 길이가 섞임 | 태그 속도 + 경고, 실제 ms는 durationsMs | 속도 하나. 프레임별 시간은 코드로만 |
| 피벗 슬라이스나 P 피벗 | 모든 프레임을 공통 칸에 배치, xorigin·yorigin | 직접 지정한 원점 |
| 반복 ∞ / 횟수 | JSON의 loop: true / loop: false | 가져오기로 설정되지 않음. 한 번 재생할 스프라이트는 코드로 멈춤 |
| 보이는 레이어 | 합성, 숨긴 레이어는 제외 | 합쳐진 프레임 |
| hit / hurt 슬라이스 | 쓰지 않음(범용 JSON 내보내기 사용) | 충돌 마스크는 GameMaker에서 설정 |
이렇게 작동합니다
- 태그 하나에 띠 이미지 한 장, 이름은 spr_<파일>_<태그>_stripN.png. N은 역재생·핑퐁을 풀어 쓴 재생 순서의 칸 수입니다.
- 칸 크기가 모두 같고 기준점이 칸마다 같은 자리에 있어, GameMaker 원점 하나로 모든 프레임이 제자리에 섭니다.
- 스프라이트별 gamemaker.json 항목: xorigin·yorigin, 초당 프레임 수로 적은 playbackSpeed, loop, 각 프레임의 durationsMs.
- 보이는 레이어만 합쳐서 그리고, 숨긴 레이어는 넣지 않습니다.
- README에 GameMaker 쪽 순서를 적어 둡니다: Create Sprite › Import(또는 PNG를 Asset Browser에 끌어 놓기) 다음 Origin과 Speed 입력.
사용 방법
- .aseprite를 끌어다 놓고 타임라인에서 태그를 살펴봅니다.
- P 도구로 기준점을 찍거나 파일에 있던 pivot 슬라이스를 씁니다. GameMaker 원점이 이 점입니다.
- 패킹·내보내기에서 대상을 GameMaker로 바꾸고 내보냅니다.
- GameMaker에 띠 이미지를 하나씩 들여오고, gamemaker.json이나 README에 적힌 원점과 속도를 넣습니다.
- 도트 그림이면 대상 플랫폼 Game Options의 Graphics 항목에서 Interpolate colours between pixels를 꺼 둡니다.
받게 되는 파일
| 파일 | 용도 |
|---|---|
spr_hero_attack_strip4.png | 태그마다 띠 하나. 칸 크기가 같고 피벗이 한 점에 있음. |
gamemaker.json | 스프라이트마다 파일, 프레임 수, 칸 크기, 원점, 초당 프레임 단위 속도, 반복, durationsMs, uniformTiming, verified: false. |
README-GAMEMAKER.md | 가져오기 순서와 띠마다 원점·속도. |
띠를 GameMaker로 가져오기(매뉴얼 기준, 여기서 실행하지 않음)
- 번들 압축을 풉니다. 태그마다 PNG가 하나씩 있습니다. 각각을 이름을 바꾸지 말고 Sprite Editor의 Import 버튼이나 IDE로 끌어다 놓기로 별도 스프라이트에 가져옵니다.
- 코드에서 부를 수 있게 스프라이트 에셋 이름을 접미사를 뺀 파일 이름(
spr_hero_attack)으로 짓습니다. - 원점을 README의 x·y로 직접 지정합니다. 위 attack이라면 x 20, y 31입니다.
- 속도 방식을 Frames per second로 하고 README 값을 넣습니다. idle 8, jump 12.5, attack 10입니다.
- 한 번만 재생하는 태그(
loop: false)는 마지막 프레임 뒤에 코드에서 idle 스프라이트로 돌려놓습니다. - 도트 그림이면 해당 플랫폼 Game Options › Graphics의 Interpolate colours between pixels를 끕니다.
결과 확인
spr_hero_jump는 0-1-2-1 순서의 4프레임,spr_hero_attack은 40 × 32 프레임 4개여야 합니다.- attack의 모든 프레임에서 원점 십자 표시가 발에 머물러야 합니다.
- idle 한 바퀴는 4 × 125 = 500ms로 Aseprite 미리보기와 같아야 합니다.
.aseprite에서 GameMaker 파일로
| .aseprite의 정보 | GameMaker 내보내기 |
|---|---|
| 프레임 8개짜리 태그 "run" | spr_hero_run_strip8.png |
| 모든 프레임이 같은 길이(예: 100ms) | playbackSpeed = 초당 10프레임 |
| 길이가 섞인 프레임 | playbackSpeed는 태그의 fps, 실제 ms는 durationsMs, 경고 |
| pivot 슬라이스나 P로 찍은 기준점 | xorigin / yorigin, 모든 칸에서 같은 자리 |
| 반복 0(계속 반복) | loop: true |
| 역재생·핑퐁 | 띠 이미지의 칸 순서로 풀어서 기록 |
| hit·hurt 슬라이스 | 이 파일에는 없음(범용 JSON에 있음) |
| 검증 | GameMaker 안에서는 미검증, 디코딩 후 원본 프레임과 비교 |
문제 해결
| 증상 | 유력한 원인 | 확인 방법 | 해결 |
|---|---|---|---|
| 공격이 Aseprite보다 빠르게 재생됨 | 길이가 섞여 있는데 스프라이트 속도는 하나(10)라서 150·250ms 프레임도 100ms가 됨 | uniformTiming: false와 내보내기 경고 | 코드에서 durationsMs로 프레임 시간을 맞추거나, Aseprite에서 태그 길이를 같게 |
| 핑퐁 스프라이트의 프레임이 태그보다 많음 | 왕복 순서를 띠에 풀어 썼기 때문(3프레임 → 4) | 프레임 순서 0-1-2-1 | 정상입니다. 정방향으로 재생하고 다시 뒤집지 마세요 |
| idle과 attack의 원점이 다름 | 띠마다 칸이 따로라서, 그림에서는 같은 기준점이어도 숫자가 다름 | README의 띠별 값 비교 | 스프라이트마다 제 원점을 입력. 원점 하나를 모두에 복사하지 않기 |
| 레이어가 빠지거나 숨긴 레이어가 보임 | 파일에서 보이는 레이어만 합성함 | Aseprite의 레이어 표시 상태 | Aseprite(또는 Nerulio 타임라인)에서 레이어를 켜거나 끄고 다시 내보내기 |
| 파일 이름이 태그 이름과 다름 | 이름을 소문자로 바꾸고 공백·기호는 _로 바꿈("Attack 2" → attack_2) | README에 모든 파일이 나옴 | 적힌 파일 이름을 쓰거나 Aseprite에서 태그 이름 변경 |
| GameMaker 안에서 무언가 어긋남 | 이 내보내기는 GameMaker로 불러온 적이 없음 | — | Nerulio는 GameMaker 동작을 확인할 수 없습니다. 매뉴얼과 대조하고, 고칠 수 있도록 사례를 알려 주세요 |
다른 방법
| 방법 | 이럴 때 더 낫습니다 |
|---|---|
Aseprite의 File › Export Sprite Sheet로 태그마다 가로 띠를 내보내고 _stripN으로 이름 변경 | 이미 Aseprite가 있고 태그의 피벗이 하나, 시간이 일정할 때. 원점과 속도는 직접 넣습니다. |
| 이미 가진 스프라이트 시트 | 스프라이트 시트로 GameMaker 띠 만들기. |
| 프레임별 시간이 있는 다른 엔진 | Aseprite를 Godot로는 프레임마다 길이를 지킵니다. |
엔진별 내보내기와 검증 방법
"검증됨"은 실제 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.json에만 남습니다.
- GameMaker 파일에는 히트박스나 충돌 모양이 없습니다.
- 폴리곤(메시) 패킹은 제공하지 않습니다. 검증한 엔진 중 내보낸 데이터로 메시 아틀라스를 그리는 엔진이 없기 때문입니다.
- GameMaker 스트립은 GameMaker 자체에서 검증하지 않았습니다.
- 배율 변형(@0.5x~@4x)은 최근접 이웃 방식만 씁니다.
- 트림된 Starling XML은 Phaser 3.90에서 잘못 그려지므로 "Sparrow XML (Phaser 3)" 프리셋을 쓰세요.
버전과 출처
확인한 것: GameMaker 띠가 Pillow로 디코딩되고 모든 칸이 원래 프레임과 같습니다. .aseprite 읽기는 실제 파일 231개가 Aseprite 1.3.18에서 같은 태그·길이·픽셀로 다시 열리는 것으로 확인했습니다. 확인하지 않은 것: GameMaker로 무엇이든 불러오는 일입니다. 검증 환경에는 헤드리스 GameMaker가 없습니다. 띠 이름 규칙, 가져오기 방법, 원점, 속도 방식, 보간 옵션은 GameMaker 매뉴얼을 따릅니다.
참고한 공식 문서
자주 묻는 질문
GameMaker에서 직접 열어 본 적이 있나요?
저희가 한 확인에는 없습니다. 돌릴 수 있는 헤드리스 GameMaker가 없어서 이 대상은 미검증 표시를 답니다. 확인한 범위는 띠 이미지가 Pillow로 디코딩되고 칸마다 원래 프레임과 같다는 것까지이며, 파일 이름은 GameMaker 매뉴얼의 sprite strip 규칙을 따랐습니다.
한 태그 안에서 프레임 길이가 다르면요?
GameMaker 스프라이트에는 재생 속도가 하나뿐입니다. 길이가 섞여 있으면 태그의 fps를 쓰고 경고를 보여 주며, 코드에서 프레임별로 맞출 수 있게 실제 밀리초는 durationsMs에 그대로 둡니다.
공격 판정 박스도 넘어가나요?
GameMaker용 파일에는 그림·원점·시간만 담깁니다. 박스와 충돌 폴리곤이 필요하면 범용 JSON으로 내보내세요.
무료인가요? 계정이 필요한가요?
이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.
스프라이트가 업로드되나요?
아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.
Aseprite나 엔진 플러그인을 설치해야 하나요?
아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).