GDevelop 스프라이트 시트 · 프레임 이미지로 먼저 자르기

GDevelop의 스프라이트 오브젝트는 애니메이션을 프레임마다 따로 된 이미지로 만듭니다. 그래서 스프라이트 시트 한 장은 먼저 잘라야 쓸 수 있습니다. 기존 스프라이트 랩이 프레임을 찾고, 어긋난 상자를 고치게 한 뒤, 프레임마다 PNG 한 장씩 순서대로 번호를 붙인 ZIP을 내려받게 합니다.

GDevelop 스프라이트 오브젝트는 애니메이션을 프레임마다 따로 된 이미지로 만들기 때문에 스프라이트 시트는 먼저 잘라야 합니다. Nerulio에는 GDevelop 전용 내보내기가 없고, 제공하는 것은 일반 PNG 프레임입니다. 스프라이트 랩이 격자를 재고 프레임마다 같은 크기의 PNG를 읽는 순서대로 번호 붙여(hero_001.png …) ZIP으로 내려받게 합니다. GDevelop에서는 애니메이션마다 한 행의 이미지를 넣고, 프레임 간 시간을 초 단위(1 ÷ FPS, 기본 0.08초)로 정하고 반복을 켭니다. 여기서 GDevelop으로 불러온 것은 없으며, GDevelop 단계는 GDevelop 위키를 따릅니다.

스프라이트 시트(PNG)를 끌어다 놓으세요

스프라이트 랩(기존) 열기

브라우저에서 처리하며 파일은 업로드되지 않습니다.

CC0 에셋(OpenGameArt)을 연 실제 스프라이트 랩(기존) 화면입니다.

출력

Frame PNGs측정 확인· Pillow

GDevelop이 시트에서 기대하는 것

GDevelop의 스프라이트 오브젝트에는 애니메이션이 있고, 애니메이션은 보이는 순서대로 재생되는 이미지 목록입니다. 애니메이션마다 두 프레임 사이 시간이 초 단위로 하나(기본 0.08초)이고 반복 토글이 있으며, 반복을 켜지 않으면 한 번 재생된 뒤 마지막 프레임에서 멈춥니다. 애니메이션에 붙인 이름은 이벤트의 "Change the animation (by name)"에서 씁니다.

편집기 자체는 PNG를 프레임으로 자르지 않습니다. GDevelop에는 두 가지 우회로가 있습니다. 내장 Piskel 편집기는 프레임 간격이 고른 애니메이션 하나짜리 시트를 가져올 수 있고, Sprite Sheet Animations 확장은 Tiled Sprite를 행·열이나 TexturePacker pixi.js 형식 JSON으로 움직입니다. 그 밖에는 프레임 이미지를 가져와야 합니다.

모든 스프라이트는 이미지 왼쪽 위의 Origin 점(오브젝트 위치를 정함)과 이미지 크기의 절반 위치인 Center 점(회전·뒤집기의 중심)으로 시작합니다. 한 애니메이션의 프레임 크기가 제각각이면 이 점들이 그림의 다른 곳에 놓여 캐릭터가 흔들립니다. 프레임 크기를 같게 하면 이를 막을 수 있고, GDevelop은 애니메이션의 모든 이미지에 같은 점을 공유하게 할 수 있습니다.

Nerulio가 맡는 것은 자르기입니다. 격자 모드에서 스프라이트 랩이 칸 크기·여백·간격을 재므로 모든 PNG가 칸 크기가 됩니다. 자동 모드는 크기가 제각각인 시트에서 투명으로 떨어진 스프라이트를 찾고, 정렬(Normalize) 단계가 이를 공통 캔버스에 올립니다. 픽셀은 다시 그리지 않고 복사하며, 불투명 배경은 먼저 키 색으로 지울 수 있습니다. ZIP에는 시간, 이름, 히트박스가 들어 있지 않습니다.

프레임 간 시간: GDevelop 애니메이션마다 하나인 프레임 시간(초). 1 ÷ FPS.
반복(Loop): 기본은 꺼짐: 한 번 재생. 켜면 반복.
Origin / Center: 스프라이트 기본 점: 왼쪽 위 모서리, 이미지 크기의 절반.
Scale mode (Sampling): 프로젝트 설정. "nearest"면 픽셀아트가 선명하게 유지됨.

예시: 세 행짜리 시트

hero.png 512 × 192 px: 64 × 64 칸이 3행(idle, run, attack) × 8열
  스프라이트 랩, 격자: 칸 64 × 64 → 64 × 64 PNG 24장이 든 hero-frames.zip
  hero_001 … hero_008 = idle   hero_009 … hero_016 = run   hero_017 … hero_024 = attack

GDevelop 스프라이트 오브젝트 "Hero": 이미지 8장짜리 애니메이션 3개
  run 12 FPS    → 프레임 간 시간 = 1 / 12 = 0.083초
  idle 100 ms   → 0.1초             GDevelop 기본값 0.08초 = 12.5 FPS
  Origin (0, 0) 왼쪽 위      Center (32, 32) = 64 × 64의 절반

그러면 run 한 바퀴는 8 × 0.083 ≈ 0.67초입니다. 애니메이션마다 프레임 시간이 하나뿐이므로, 두 배로 오래 머물러야 할 프레임은 두 번 넣으면 됩니다.

이렇게 작동합니다

격자 모드는 칸 크기·여백·간격을 재므로 모든 PNG가 같은 크기로 나오고, GDevelop에서 재생해도 프레임이 흔들리지 않습니다.
자동 모드는 크기가 제각각인 시트에서 투명한 틈으로 나뉜 스프라이트를 찾고, 모자나 칼처럼 떨어진 작은 조각도 몸통과 함께 묶습니다.
파일 이름은 시트 이름에 0을 채운 번호(hero_001.png, hero_002.png …)라서 파일 선택 창에서도 프레임 순서대로 정렬됩니다.
픽셀은 다시 그리지 않고 그대로 복사합니다. 각 PNG가 시트에 표시한 상자와 같음을 측정했고, 확대나 보간은 없습니다.
고급 설정의 키 색으로 마젠타 같은 불투명 배경을 자르기 전에 투명하게 만들 수 있습니다.
솔직히 말하면 이 파일을 GDevelop에서 직접 열어 보지는 않았습니다. 표의 단계는 GDevelop의 일반적인 순서입니다.

사용 방법

스프라이트 시트를 스프라이트 랩에 넣습니다.
고른 시트는 격자, 제각각인 시트는 자동을 고르고 상자를 훑어봅니다.
어긋난 상자는 끌거나 숫자로 고치고, 프레임을 읽는 순서대로 둡니다.
프레임 PNG를 ZIP으로 받아 압축을 풉니다.
GDevelop에서 한 애니메이션의 이미지를 순서대로 스프라이트 오브젝트에 넣고, 프레임 간 시간과 반복을 정합니다.

받게 되는 파일

기존 스프라이트 랩의 프레임 내려받기(GDevelop 전용 내보내기가 아님)입니다.

파일	용도
`hero-frames.zip`	프레임마다 PNG 한 장, 이름은 시트를 따름.
`hero_001.png …`	읽는 순서대로 된 프레임. 파일 선택 창에서도 순서가 유지되도록 최소 세 자리로 0을 채우며, 격자 모드에서는 각 PNG가 칸 크기입니다.

GDevelop에서 애니메이션 만들기(GDevelop 위키 기준, 여기서 실행하지 않음)

프레임 압축을 풉니다. GDevelop에서 새 오브젝트를 추가하고 Sprite를 고른 뒤 이름을 붙입니다.
Add an animation을 누르고 이름(idle)을 정합니다. 이미지 추가에서 hero_001부터 hero_008까지 한꺼번에 고릅니다. GDevelop은 보이는 순서대로 재생합니다.
시계 아이콘 옆에 프레임 간 시간을 넣습니다. 초 단위 1 ÷ FPS이며, 10 FPS면 0.1입니다.
idle과 run은 반복을 켜고, 한 번 나가는 attack은 끈 채로 둡니다.
행마다 반복한 뒤, 이벤트의 "Change the animation (by name)"으로 애니메이션을 바꿉니다.
픽셀아트라면 게임 속성에서 프로젝트 Scale mode(Sampling)를 nearest로 합니다.
오브젝트가 발을 기준으로 서야 한다면 Edit points에서 Origin 점을 옮기고, 애니메이션의 모든 이미지가 점을 공유하게 둡니다.

결과 확인

애니메이션마다 이미지가 파일 순서대로 있어야 합니다: idle 001–008, run 009–016, attack 017–024.
미리보기에서 run 한 바퀴가 프레임당 0.083초로 약 0.67초 걸려야 합니다.
모든 이미지가 64 × 64라서 프레임 사이에 캐릭터가 밀리지 않아야 합니다.
Scale mode가 nearest면 확대해도 픽셀 경계가 선명해야 합니다.

ZIP에서 GDevelop 애니메이션까지

GDevelop에서 할 일	ZIP에서 쓰는 것	팁
프레임 이미지를 순서대로 추가	한 행의 PNG, 예: hero_001 ~ hero_008	0을 채운 번호라 파일 선택 창에서도 순서 유지
동작마다 애니메이션 하나	시트의 행마다 파일 묶음 하나	이벤트에서 부를 이름으로 짓기
프레임 간 시간 설정	프레임 시간(초), 예: 10 fps면 0.1	ZIP에는 시간이 없고 값 하나가 애니메이션 전체에 적용
반복	대기·걷기는 켬, 한 번 나가는 공격은 끔	애니메이션마다 정하기
프레임 크기	격자로 자르면 모든 PNG가 같은 크기	크기가 섞이면 캐릭터가 흔들림

여기의 어떤 것도 GDevelop에서 실행해 보지 않았고, 표는 오브젝트 편집기의 일반적인 단계입니다. PNG 자체는 시트의 상자와 같음을 측정했습니다.

문제 해결

증상	유력한 원인	확인 방법	해결
애니메이션이 한 번 재생되고 멈춤	반복이 기본적으로 꺼져 있음	해당 애니메이션의 반복 토글	반복 켜기
프레임 순서가 틀림	파일을 다른 순서로 골랐거나, 0을 채우지 않은 이름이 1, 10, 2 순으로 정렬됨	애니메이션 안의 이미지 순서	ZIP의 0 채운 이름을 쓰고 필요하면 이미지 순서 조정
캐릭터가 흔들림	프레임 크기가 제각각(자동 모드로 자름)이라 Origin과 Center가 그림의 다른 곳에 놓임	이미지 크기 비교	격자로 자르거나 내려받기 전에 정렬(Normalize) 실행. 애니메이션 전체에 점 공유
스프라이트가 흐림	Scale mode가 linear	게임 속성 › Scale mode	nearest로 설정
GIF의 들쭉날쭉한 시간이 일정하게 재생됨	애니메이션 하나에 프레임 간 시간이 하나뿐	원본 딜레이와 비교	오래 머물 프레임을 두 번 넣거나 동작을 애니메이션 두 개로 나누기
Piskel 가져오기가 시트를 잘못 자름	프레임 크기가 맞지 않거나 시트에 애니메이션이 여러 개 있음	Piskel Import and Merge 창의 프레임 상자	애니메이션 하나 기준으로 실제 프레임 크기를 넣거나 스프라이트 랩으로 자르기. 프레임 크기 참고

다른 방법

방법	이럴 때 더 낫습니다
GDevelop 내장 Piskel: Import as Sprite sheet	프레임 간격이 고른 애니메이션 하나라면 다른 도구 없이 프레임이 바로 애니메이션에 들어갑니다.
Sprite Sheet Animations 확장	Tiled Sprite에 이미지 한 장을 두고 행·열이나 TexturePacker pixi.js JSON으로 프레임을 움직이고 싶을 때. Nerulio의 PixiJS 내보내기도 비슷한 `frames` + `animations` 구조를 쓰지만 이 확장으로 시험한 적은 없습니다.
어떤 도구에나 쓰는 낱장 프레임	같은 자르기를 엔진 전반에 맞춰 설명한 페이지: 스프라이트 시트를 PNG 프레임으로.

출력 파일과 검증 방법

"측정 확인"은 내려받은 파일을 페이지 밖에서(Pillow·numpy·별도 파서) 다시 열어 그 속성을 측정했다는 뜻입니다. 게임 엔진에서 불러오는 것은 시험하지 않았습니다.

대상	파일	검증
Frame PNGs	`<sheet>-frames.zip (one PNG per frame)`	측정 확인 Pillow모든 프레임 PNG가 시트에 표시된 상자와 같습니다(Chromium·Firefox). ZIP에 위치 정보는 없습니다.

검증 근거

ZIP에서 다시 읽은 프레임이 원본 시트의 해당 영역과 픽셀 단위로 같습니다.

한계

Nerulio에는 GDevelop 전용 내보내기가 없습니다. 시간·이름·히트박스 없이 PNG 프레임만 줍니다.
GDevelop으로 불러온 것은 없으며, GDevelop 단계는 위키를 따릅니다.
GDevelop 애니메이션마다 프레임 간 시간이 하나라서 들쭉날쭉한 시간은 프레임을 반복해 넣어야 합니다.
기존 랩에는 타임라인과 태그가 없습니다. 애니메이션은 Studio를 쓰세요.
프레임은 알파 섬이나 확인한 격자로 자릅니다.
아주 큰 시트는 띠 단위로 자르며 진행 상황을 보여 줍니다.

버전과 출처

Nerulio가 맡은 부분: 스프라이트 랩이 시트를 자르며, ZIP 안의 모든 PNG가 시트의 상자와 같고 확대나 보간이 없음을 측정했습니다. GDevelop은 실행하지 않았습니다. 오브젝트, 애니메이션, 반복, 프레임 시간, 점, Piskel, Scale mode에 관한 내용은 GDevelop 5 위키를 따릅니다.

참고한 공식 문서

자주 묻는 질문

왜 GDevelop 밖에서 시트를 자르나요?

GDevelop 스프라이트 애니메이션은 낱장 프레임 이미지로 이루어집니다. 여기서 자르면 픽셀이 정확하고 순서가 예측 가능한 이미지를 얻고, 파일을 쓰기 전에 상자를 하나하나 확인할 수 있습니다.

시트 한 장에 애니메이션이 여러 개 있어요.

ZIP은 한 번만 받으면 됩니다. 파일이 시트를 읽는 순서(행 단위)를 따르므로, GDevelop에서 행마다 애니메이션(idle, walk, attack …)을 만들고 그 행의 파일을 넣으세요.

가져온 뒤 애니메이션이 흔들려요.

크기가 다른 프레임은 재생할 때 서로 어긋날 수 있습니다. 격자로 잘라 같은 크기 상자를 만들거나, 내려받기 전에 정렬(Normalize) 단계로 모든 프레임을 같은 캔버스에 올리세요.

ZIP에 시간이나 히트박스도 들어가나요?

아니요, PNG만 들어 있습니다. 시간과 충돌 마스크는 GDevelop에서 정합니다. Godot·Unity·Phaser용으로 프레임별 시간이 든 아틀라스도 필요하면 같은 시트를 Studio에서 여세요.

무료인가요? 계정이 필요한가요?

이 페이지의 기능은 모두 무료이며 계정 없이 쓸 수 있습니다. 워터마크나 막혀 있는 내보내기가 없습니다.

스프라이트가 업로드되나요?

아니요. Studio는 이 브라우저 탭 안에서 디코딩·패킹·내보내기를 합니다. 프로젝트는 브라우저(IndexedDB)에 자동 저장되며 .nerulio 파일로 저장할 수 있습니다.

Aseprite나 엔진 플러그인을 설치해야 하나요?

아니요. .aseprite 파일은 브라우저에서 읽고 씁니다. 엔진별 번들에는 그 엔진에 필요한 것이 들어 있습니다(Godot는 가져오기 설정과 씬, Unity와 Godot 타일셋은 작은 편집기 스크립트).