스프라이트 시트 메이커: 무료 온라인 시트 및 아틀라스 빌더

스프라이트 시트 메이커의 역할은 하나입니다: 개별 프레임 세트를 가져와 알려진 좌표에 단일 이미지로 패킹합니다. PNG, JPG, WebP 파일을 넣고 열, 패딩, 배율을 선택하면 각 프레임 이름을 x, y, width, height 사각형에 매핑하는 PNG와 JSON 아틀라스를 반환합니다. 렌더러가 올바른 셀을 그리는 데 필요한 것은 그 사각형뿐입니다.

이 용어는 서로 다른 두 가지 도구를 가리킵니다. 하나는 패커입니다: 프레임이 이미 있고 그것을 하나의 시트에 담고 싶은 경우입니다. 다른 하나는 생성기입니다: 프롬프트를 작성하면 일관된 스타일의 완전한 애니메이션 캐릭터 시트를 얻습니다. Neta Studio의 브라우저 기반 3D 월드 빌더는 두 가지를 모두 처리하며, 결과물은 변환 단계 없이 곧바로 Three.js 씬에 투입됩니다.

내 프레임으로 스프라이트 시트 만들기

이것은 패킹 경로입니다. 프레임을 넣으면 시트가 결정적으로 만들어집니다: 왼쪽에서 오른쪽으로, 위에서 아래로, 제공한 순서대로. 첫 번째 프레임은 (0,0) 셀을 차지하고, 두 번째는 한 셀 오른쪽에 놓이며, 행이 다 차면 다음 행으로 넘어갑니다.

여기서는 순서가 무엇보다 중요합니다. 패커는 파일 이름으로 정렬하지 않으며, 이름에서 애니메이션 그룹을 추론하지도 않습니다. 프레임이 frame_1.png부터 frame_8.png까지 번호가 매겨져 있는데 순서를 뒤섞어 넣으면 내보낸 시트는 잘못되고, JSON 아틀라스는 잘못된 순서를 충실히 기록합니다. 넣기 전에 정렬하거나, 내보내기 전에 썸네일 스트립을 확인하세요.

출력은 두 개의 파일입니다. PNG는 패킹된 이미지입니다. JSON은 프레임 이름을 키로 하는 작은 객체이며, 각 값이 사각형과 원본 크기를 담고 있습니다. 대부분의 엔진은 이 JSON을 직접 사용할 수 있습니다. 사용하는 엔진이 그렇지 못하더라도 숫자가 단순해서 수동으로 다시 매핑할 수 있습니다.

프롬프트로 스프라이트 시트 생성하기

스프라이트 메이커의 두 번째 의미는 그리드 패킹과 아무 관련이 없습니다. 캐릭터를 설명하면 완전한 시트를 돌려받습니다 — 일관된 하나의 스타일로 렌더링되어 이미 그리드에 배치된 포즈 세트 전체입니다. 넣을 원본 아트가 없습니다. 아트가 곧 출력이기 때문입니다.

유용한 부분은 일관성입니다. 걷기 사이클의 8방향을 한 번에 생성하면 실루엣, 팔레트, 비율이 셀 전체에 걸쳐 정렬됩니다. 각 프레임을 별도 요청으로 생성하면 그렇지 않으며, 그 어긋남은 프레임마다 캐릭터의 질량이 달라 보이는 형태로 드러납니다.

Neta Studio는 8방향 걷기 사이클, 대기, 공격, 캐스트 세트를 생성합니다. Agent Sprite Forge는 스튜디오에서 이 시트를 만들어내는 에셋이며, 생성된 시트를 3D 게임 빌더의 월드에 넣고 패커가 생성했을 것과 동일한 아틀라스 JSON으로 구동할 수 있습니다.

열, 패딩, 배율 및 JSON 아틀라스

네 가지 설정이 시트의 사용 가능 여부를 결정합니다. 내보내기 시점에 제대로 맞추세요. 나중에 고치려면 다시 패킹하고 이전 좌표를 참조하던 모든 애니메이션을 다시 테스트해야 합니다.

JSON 아틀라스는 시트와 코드 사이의 계약입니다. 프레임마다 셀의 위치와 크기를 저장합니다. 시트를 변경하고 아틀라스를 다시 생성하지 않으면 스프라이트가 잘못된 영역을 샘플링하여 이웃 프레임의 띠가 셀에 번져 보입니다.

텍스처 아틀라스란

아틀라스는 여러 개의 작은 이미지를 담은 하나의 텍스처이며, 각 이미지가 어디에 있는지 설명하는 표가 함께 있습니다. 스프라이트 시트는 그 작은 이미지들이 같은 대상의 애니메이션 프레임인 흔한 경우입니다.

아틀라스가 존재하는 이유는 드로우 콜입니다. 프레임마다 별도의 텍스처를 바인딩하면 렌더러가 각각 사이에 상태를 전환해야 하며, 화면에 스프라이트가 많아지면 상태 변경이 프레임 시간을 지배합니다. 모든 것을 하나의 텍스처에 패킹하면 그룹 전체에 바인딩이 한 번만 필요합니다. 지오메트리는 여전히 스프라이트마다 그려지지만 텍스처는 바뀌지 않습니다.

대가는 편집이 거칠다는 점입니다. 프레임 하나를 바꾸려면 시트를 다시 패킹하고 아틀라스를 갱신해야 하며, 이전 사각형을 들고 있는 코드는 이제 모두 잘못된 것입니다. 그래서 아틀라스를 좌표를 하드코딩하는 대신 데이터로 내보냅니다. 스프라이트 시트 가이드에서 패킹 결정을 더 깊이 다룹니다.

RPG, 플랫포머, 아이소메트릭용 스프라이트 시트 생성기

원하는 레이아웃은 대부분 장르에 의해 결정됩니다. RPG는 방향과 애니메이션 단계로 인덱싱하므로 그리드가 자연스럽게 읽힙니다. 플랫포머는 보통 한 번에 하나의 액션만 실행하므로 넓은 스트립이 더 단순합니다. 아이소메트릭 월드는 셀 크기가 다이아몬드 투영과 일치해야 하며, 그렇지 않으면 스프라이트가 겹칩니다.

열을 설정하기 전에 레이아웃을 정하고, 그 레이아웃에 맞춰 조회 코드를 작성하세요. 스트립 기반 인덱싱에 그리드를 나중에 끼워 넣는 것은 기계적이지만 번거로운 변경이며, 모든 애니메이션 호출 지점을 건드립니다.

캐릭터 스프라이트 시트

캐릭터가 둘 이상이 되면 캐스트를 일관되게 유지하는 것이 어려운 부분입니다. 개별적으로는 그럴듯한 시트들도 팔레트가 어긋나거나, 비율이 달라지거나, 같은 씬에 선 캐릭터들 사이에서 광원 방향이 뒤집히면 함께 실패합니다.

캐릭터의 전체 액션 세트를 한 번에 생성하고 액션을 하나씩 생성하지 마세요. 팔레트와 비율은 한 번의 생성 안에서 포즈 전체에 걸쳐 이어지지만, 생성 간에는 그렇지 않으며, 두 캐릭터가 한 프레임을 공유하는 순간 그 차이가 드러납니다.

아트가 셀을 채우지 않더라도 캐스트의 모든 캐릭터에 걸쳐 셀 크기를 동일하게 유지하세요. 셀이 균일하면 캐릭터별 오프셋 표 없이 씬이 어떤 캐릭터든 어떤 슬롯에든 배치할 수 있습니다. 캐릭터 스프라이트 메이커 사용 사례에서 전체 캐스트에 대해 이 과정을 다룹니다.

기존 시트를 잘라내기

이미 시트가 있고 프레임을 다시 꺼내야 한다면 그것은 패킹이 아니라 슬라이싱이며, 역방향 작업입니다. GIF 변환기와 애니메이터가 이 경로를 처리합니다 — 시트를 제공하고 셀 그리드나 프레임 경계를 정의하면 개별 프레임을 얻습니다.

슬라이싱이 실패하는 이유는 두 가지입니다. 패딩이 고르지 않은 시트는 추측한 셀 크기로 나누어떨어지지 않으므로, 이미지 너비를 예상 열 개수로 나누지 말고 알려진 셀 하나를 측정하세요. 손실 압축 형식에서 내보낸 시트는 셀 경계를 따라 압축 아티팩트를 지니며, 그 아티팩트는 셀을 분리해 확대하면 눈에 띄게 됩니다.

그 게임이 속한 월드로 걸어 들어가기

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

FAQ