스프라이트 애니메이터: 스프라이트 시트 애니메이션 미리보기 및 내보내기

스프라이트 애니메이터는 스프라이트 시트 — 한 이미지에 담긴 애니메이션 프레임 그리드 — 를 받아 재생하여, 아트가 게임에 들어가기 전에 타이밍, 간격, 실루엣을 판단할 수 있게 하는 도구입니다. Neta Studio의 스프라이트 애니메이터는 시트를 읽고 이미지 크기에서 프레임 크기, 열 수, 재생 순서를 추측한 뒤 브라우저의 캔버스에서 재생을 시작합니다. 업로드되는 것은 없습니다.

정지 프레임만으로는 걷기 사이클에 대해 알 수 없습니다. 프레임 3과 프레임 4를 비교하고, 컨택트 포즈와 패싱 포즈를 비교하며, 한 셀이 1픽셀 어긋나서 전체가 밀리는지 확인해야 합니다. 애니메이터는 로드 시 이를 수행하고, 추측이 틀렸을 때 프레임 크기, 순서, FPS를 직접 수정할 수 있게 합니다.

스프라이트 시트 애니메이션 미리보기

PNG 또는 WebP를 캔버스에 놓으세요. 애니메이터는 고유 너비와 높이를 읽은 다음 그럴듯한 그리드를 추론합니다. 크기를 인수분해하고, 일반적인 스프라이트 크기에서 정사각형에 가까운 셀을 만드는 작은 정수 열 수(2~16)를 찾습니다. 128px 프레임 4열로 구성된 512×512 시트, 64px 프레임 6열로 구성된 384×256 시트 — 둘 다 대부분 올바르게 추측합니다. 300×300 시트는 그렇지 않은데, 300이 16/32/64로 깔끔하게 나누어지지 않기 때문에 프레임 크기를 수동으로 설정하게 됩니다.

재생은 `imageSmoothingEnabled = false`로 설정된 HTML 캔버스에서 실행되므로 정수 배율에서 픽셀이 선명하게 유지됩니다. 4× 또는 8×로 확대할 때는 최근접 이웃 방식을 사용하며, 이는 픽셀 아트에 원하는 방식입니다. 32px 프레임을 8×로 표시하면 화면에는 256px 스프라이트가 되고, 각 원본 픽셀은 8×8 블록으로 확장됩니다. 양선형 스무딩을 사용하면 이 픽셀들이 회색 뭉개짐이 됩니다.

모든 처리가 캔버스에서 이루어지므로 파일은 컴퓨터를 떠나지 않습니다. 업로드도, 대기열도, 계정도 없습니다. 클라이언트의 미공개 시트를 넣어도 탭 안에 그대로 남습니다. 대신 매우 큰 시트는 브라우저 메모리에 의해 제한됩니다. 4096×4096 PNG는 RGBA로 디코딩하면 약 67MB이며, 데스크톱에서는 괜찮지만 저사양 태블릿에서는 빠듯합니다.

프레임 크기, 순서, FPS 설정

실제로 보이는 결과를 결정하는 설정은 세 가지입니다: 프레임 크기, 재생 순서, 속도. 이 중 하나라도 틀리면 아트와는 무관한 이유로 애니메이션이 엉망으로 보입니다.

프레임 크기는 한 셀의 너비와 높이를 픽셀 단위로 나타낸 값입니다. 애니메이터는 16, 32, 64, 128을 표준 선택지로 제공하며 사용자 지정 값도 지원합니다. 이 값은 시트 크기를 정확히 나누어야 합니다. 너비가 400px인 시트에 128px 프레임을 적용하면 3.125열이 되고, 렌더러는 이를 내림하여 3으로 처리하며 오른쪽에 16px의 사용되지 않는 픽셀 띠가 남습니다. 그러면 마지막 열에서 이웃 프레임의 일부가 나타납니다. 오른쪽 가장자리 프레임이 밀린 것처럼 보인다면 프레임 크기가 시트 너비를 나누지 못하는 것입니다.

순서는 row-major 또는 column-major입니다. row-major(일반적인 기본값이며 대부분의 익스포터가 생성하는 방식)는 왼쪽에서 오른쪽으로 읽은 뒤 다음 행으로 넘어갑니다. column-major는 위에서 아래로 읽은 뒤 오른쪽으로 이동합니다. 열 기준으로 내보낸 걷기 시트를 행 기준으로 읽으면 프레임 1, 프레임 5, 프레임 9 순으로 재생됩니다. 즉 매 틱마다 애니메이션의 4분의 1을 건너뛰는 스트라이드입니다. 해결책은 토글 하나지만, 증상을 알아차려야 합니다: 움직임이 건너뛰는 현상입니다.

FPS와 `image_speed`는 사람들이 혼동하는 서로 다른 설정입니다. FPS는 플레이어가 초당 몇 프레임을 진행하는지를 나타냅니다. `image_speed`(GameMaker의 용어이며 사람들이 검색해서 찾아오는 값)는 room speed에 대한 스프라이트 애니메이션 속도의 배수입니다. 1.0이면 게임 스텝당 한 프레임으로 시트가 재생되고, 0.5면 한 스텝씩 건너뛰며 재생됩니다. 브라우저 애니메이터에서는 FPS를 직접 설정하세요. GameMaker 스프라이트를 이식했는데 캐릭터가 두 배 속도로 애니메이션된다면 시트를 다시 자르기 전에 `image_speed`를 확인하세요.

걷기 사이클, 대기, 공격

세 가지 애니메이션이 캐릭터의 가독성 대부분을 좌우하며, 각각 실패하는 방식이 다릅니다. 모두 같은 방식으로 실패하지 않기 때문에, 하나의 일반적인 클립만 반복 재생하는 미리보기 도구로는 핵심을 놓칩니다. 아래에서는 실패 유형을 애니메이션 종류별로 구분했습니다.

세 가지 모두에 적용되는 규칙: 확대하지 말고 최종 게임 배율로 미리 보세요. 8×에서 잘 읽히는 걷기도 다리 들림이 2픽셀이고 들린 발과 지면의 대비가 너무 낮으면 1×에서 무너집니다. 무엇이든 승인하기 전에 미리보기를 플레이어가 실제로 보게 될 크기로 줄이세요.

4방향 걷기 시트는 보통 아래, 왼쪽, 오른쪽, 위 순서입니다. 아래는 카메라를 향하고, 위는 등을 보이며, 왼쪽과 오른쪽은 수평 쌍입니다. 일부 익스포터는 아래, 위, 왼쪽, 오른쪽을 사용합니다. 위를 눌렀을 때 캐릭터가 문워크를 한다면 행이 뒤바뀐 것이고, 위 입력에 아래 행을 재생하고 있는 것입니다. 이는 플레이어에서 두 줄만 고치면 되는 문제이며 다시 내보낼 필요가 없습니다.

8방향 이동에는 대각선이 필요합니다: 왼쪽 아래, 오른쪽 아래, 왼쪽 위, 오른쪽 위. 수평으로 미러링한 4방향이면 4개 행을 저렴하게 얻습니다(왼쪽과 오른쪽은 같은 아트를 뒤집은 것이라 많은 시트가 8행이 아니라 4행입니다). 4방향만으로 대각선 이동을 처리하면 엔진이 가장 가까운 방향을 선택해야 하며, 대각선 입력에서 눈에 띄게 스냅됩니다. 게임이 대각선 이동을 지원한다면 8개의 개별 행을 확보하거나 스냅을 감수하세요.

프레임 수: 16–32px에서는 방향당 6~8프레임이 일반적입니다. 4프레임이면 걷기가 팝하게 보이지만 작은 크기에서는 읽힙니다. 10프레임이면 컨택트 포즈와 패싱 포즈 사이 간격이 촘촘해져 프레임별 타이밍이 필요해지는데, 균일 FPS 플레이어는 이를 표현할 수 없습니다. 브라우저 애니메이터는 균일하게 재생하므로 여기서 미리 볼 계획이라면 시트를 균등한 간격으로 만드세요.

대기는 아무 일도 일어나지 않을 때 플레이어가 가장 오래 바라보는 애니메이션이므로 프레임당 비중이 가장 큽니다. 표준 구조는 호흡 루프입니다: 가슴이 올라가고, 어깨가 1픽셀 들리고, 무게가 이동한 뒤 돌아옵니다. 스쿼시와 스트레치는 정지 스프라이트를 살짝 흔드는 것처럼 보이지 않게 해줍니다. 다운 비트에서는 캐릭터를 세로로 1~2픽셀 압축하고 가로로 1픽셀 넓히며, 업 비트에서는 반대로 합니다.

흔한 실패는 스쿼시를 과하게 넣는 것입니다. 32px 캐릭터를 4px 압축하면 키의 12.5%가 되어 젤리처럼 보입니다. 32px 스프라이트에서 세로 1픽셀 스트레치는 3%이며 호흡처럼 보입니다. 대기가 캐릭터가 트램펄린 위에서 튀는 것처럼 보인다면, 셀 안의 캐릭터가 아니라 셀 전체를 스케일했을 가능성이 큽니다. 즉 프레임이 그리드에 비해 크기가 바뀐 것입니다.

출시할 FPS와 같은 값으로 대기를 미리 보세요. 6 FPS의 대기는 흐르는 듯하고, 12 FPS에서는 호흡합니다. 느린 대기는 대부분 같은 이미지에 작은 오프셋이 더해진 것이므로 실제로 확인하는 것은 루프 지점입니다. 마지막 프레임이 어깨 위치의 튐 없이 첫 프레임으로 깔끔하게 이어져야 합니다.

공격은 균일한 연타가 아니라 불균등한 타이밍을 가진 세 단계입니다. 예비동작은 뒤로 당깁니다. 팔을 준비하고 몸을 움츠리며, 흔히 2~3프레임을 유지하거나 느려집니다. 임팩트는 1~2프레임으로 가장 빠른 부분이며, 무기가 최대 확장에 도달하고 포즈가 가장 극단적인 순간입니다. 회복은 되돌아오는 단계이며, 초보자가 너무 일찍 끊는 지점입니다. 6프레임 공격이 2 예비동작, 1 임팩트, 3 회복으로 구성되면 읽히지만, 6프레임을 2-2-2로 균등하게 나누면 밀어내기처럼 보입니다.

애니메이터는 균일하게 재생하므로, 프레임별 타이밍을 바꾸는 대신 프레임을 복제하여 예비동작 포즈를 유지하는 것이 요령입니다. 동일한 예비동작 프레임 두 개가 유지 구간을 만들고, 임팩트 프레임 하나가 스냅을 만듭니다. 이는 수작업 시트에서 쓰는 것과 같은 기법이며 어떤 엔진으로 이식해도 유지됩니다.

시전 애니메이션에는 두 번째 문제가 있습니다: 이펙트가 특정 프레임에서 나타나고 사라져야 합니다. 시트에 투사체나 마법진이 프레임에 포함되어 있다면, 플레이어는 실제 오브젝트를 언제 생성할지 알아야 합니다. 보통 첫 임팩트 프레임입니다. 이펙트가 별도 오브젝트라면 시트를 깔끔하게 유지하고, 생성 시점을 실제 시간(초)이 아니라 임팩트 프레임 인덱스에 맞추세요.

하나의 프롬프트로 걷기 사이클 생성

걷기 사이클 8개 행을 직접 제작하는 데는 몇 시간이 걸리고, 그 결과물도 여전히 플레이어에서 확인해야 합니다. Agent Sprite Forge는 이를 뒤집습니다. 캐릭터에 대한 설명을 작성하면 시트를 만들어 줍니다. 하나의 설명, 8방향, 시트는 이미 그리드에 맞게 잘려 있고 투명 프레임과 발 위치의 앵커 가이드가 포함되어 있어 배치할 때 캐릭터가 위아래로 흔들리지 않습니다.

첫 단계에서는 앵커 가이드가 아트보다 더 중요합니다. 발이 같은 지면 선을 공유하지 않는 걷기 사이클은 그림이 아무리 좋아도 캐릭터가 트램펄린 위에 있는 것처럼 보입니다. 생성된 프레임은 앵커를 포함하므로 시트를 애니메이터에 넣고 재생하여 지면 선이 유지되는지 볼 수 있습니다. 이는 정지 이미지가 줄 수 없는 검증입니다.

생성된 출력은 일반 스프라이트 시트입니다: 행과 열, 투명 배경, 표준 프레임 크기. Neta Studio에 종속된 부분은 없습니다. 내보내고, 미리보기 단계를 위해 애니메이터에 넣고, 엔진이 단일 행을 원하면 다시 자른 뒤 넘어가세요. 게임이 4방향만 지원해서 필요 없는 방향(예: 왼쪽 뒤)이 생성되었다면 다시 자르는 단계에서 해당 행을 무시하세요.

스프라이트 애니메이션 소프트웨어: 무엇을 비교할까

적합한 도구는 이미 손에 무엇이 있는지에 따라 달라집니다. 완성된 시트와 타이밍에 대한 질문은 빈 캔버스와 캐릭터가 없는 상황과 다른 문제입니다. 아래 표는 시작점을 적합한 도구에 매핑하며, 엔진 자체 애니메이터가 정답이고 타사 플레이어가 불필요한 경우도 포함합니다.

경험 법칙 하나: 미리보기라면 플레이어를 사용하세요. 제작이라면 편집기를 사용하세요. 생성이라면 생성기를 사용하세요. 대부분의 혼란은 플레이어로 제작하려 할 때 생깁니다. 재생 도구에서는 잘못된 컨택트 포즈를 고칠 수 없고, 재생 기능이 없는 페인트 도구에서는 타이밍 감각을 고칠 수 없습니다.

GIF 또는 다시 자른 시트 내보내기

두 가지 내보내기로 대부분의 경우를 처리합니다. 첫째는 애니메이션 GIF입니다: 현재 루프를 현재 FPS, 현재 배율로 단일 파일로 만듭니다. GIF는 런타임이 필요 없고 어떤 채팅 창, 리뷰 도구, 이슈 트래커에서도 재생됩니다. 아무것도 설치하지 않을 협업자에게 보내는 형식입니다. 대가는 256색 팔레트이며, 대부분의 픽셀 아트에는 괜찮지만 부드러운 그라데이션에서는 밴딩이 보입니다. 스프라이트에 부드러운 광택이 있다면 포스터라이즈될 것으로 예상하세요.

둘째는 다시 자른 시트입니다. 애니메이터는 로드된 시트와 프레임 설정을 사용해 다른 패킹으로 새 이미지를 씁니다: 플립북용 단일 행, 방향 세트용 4행, 또는 다른 셀 크기의 동일한 그리드입니다. 셀 크기가 같고 순서만 바꾸는 경우 다시 자르기는 무손실입니다. 셀 크기를 변경하면 도구가 리샘플링하며, 정수 배수가 아닌 픽셀 아트 리샘플링은 가장자리를 부드럽게 만듭니다.

흔한 다시 자르기 형태는 플립북입니다: 하나의 애니메이션의 모든 프레임을 줄바꿈 없이 왼쪽에서 오른쪽으로 단일 행에 배치합니다. 일부 엔진과 CSS 스프라이트 기법은 이 형태를 원합니다. 6프레임 걷기를 6개 단일 행으로 다시 자르면 스트립은 프레임 너비의 6×, 프레임 높이의 1×가 됩니다. 대신 이 스트립을 GIF로 필요로 한다면 스프라이트 시트를 GIF로 변환하는 도구가 패킹된 시트에서 동일한 루프 내보내기를 수행합니다.

내보내기 전에 프레임 크기와 열 수를 설정하세요. 익스포터는 로드 시 추측한 그리드가 아니라 플레이어에서 구성한 그리드를 사용해 씁니다. 밀림을 수정하려고 추측값을 재정의한 뒤 프레임 수를 다시 확인하지 않았다면, 내보낸 시트는 잘못된 수를 물려받습니다.

그것이 속한 세계로 들어가 보세요

스프라이트는 설 자리가 없는 캐릭터입니다. 마지막 단계는 다른 곳에서 제공하지 않는 것입니다: 방금 만든 시트를 누군가 걸어 다닐 수 있는 세계 — 작은 섬, 행성, 비 오는 길모퉁이 — 에 넣어 보세요. 이 사이트의 모든 세계는 하나의 글로 작성된 설명으로 만들어졌고 플레이할 수 있는 페이지로 게시되었습니다.

FAQ