스프라이트 시트 슬라이서

손으로 자르려면 셀 크기를 추측하고, 여백을 세고, 1픽셀씩 어긋난 컷을 고쳐야 합니다. 슬라이서는 먼저 시트를 읽습니다. 자르는 선이 스프라이트 픽셀을 지나지 않는 균일한 그리드를 찾거나, 그리드가 없는 시트라면 연결된 픽셀로 개별 스프라이트를 모두 감지합니다. 시트 위에 자르는 선이 표시되고, 조절하는 동안 애니메이션이 재생되며, 아무 셀이나 클릭해 뺄 수 있습니다.

스프라이트 시트 슬라이서 사용 방법

1. 투명 배경이나 단색 배경의 시트를 넣으세요. 그리드가 즉시 감지되어 시트 위에 그려집니다.
2. 추측이 틀렸다면 행과 열을 설정하거나, 셀 크기로 바꿔 프레임 크기를 입력하세요. 테두리나 프레임 사이 간격이 있는 시트에는 오프셋과 간격을 쓰세요.
3. 그리드 없이 빽빽하게 채운 시트(아이템 세트, 소품 타일셋)라면 스프라이트 찾기를 고르세요. 병합 거리는 칼끝처럼 떨어진 조각을 해당 스프라이트에 합칩니다.
4. 시트에서 셀을 클릭해 제외하세요. 빈 셀은 자동으로 건너뜁니다.
5. 미리보기를 보면서 FPS를 정하고, 프레임을 ZIP이나 GIF로, 또는 Godot, Unity, Phaser, Aseprite 데이터가 포함된 새 시트로 내려받으세요.

결과물

• 프레임 ZIP: 모든 프레임을 개별 PNG로(그리드 모드에서는 셀, 스프라이트 찾기 모드에서는 딱 맞는 박스), 원본 시트에서의 위치를 담은 JSON과 함께.
• 균일 프레임: 모든 프레임을 같은 크기의 셀에 아래 가운데 정렬해 바로 애니메이션할 수 있습니다.
• 깔끔한 간격으로 다시 만든 새 시트와 Aseprite, Phaser/TexturePacker, Godot 4, CSS 데이터, GIF.

지원 엔진

• 아래 가운데 정렬은 모든 프레임에서 발이 같은 선에 오게 합니다. 플랫포머와 탑다운 캐릭터에 꼭 필요한 부분입니다.
• 새 시트의 데이터 파일은 Godot 4(SpriteFrames), Phaser 3(아틀라스), Unity와 Godot의 Aseprite 기반 임포터에서 바로 불러올 수 있습니다.

게임을 만들며 얻은 팁

• 에셋 스토어의 시트는 프레임 사이에 1px 간격이 있는 경우가 많습니다. 자르는 선이 1픽셀씩 어긋나면 간격 X/Y를 1로 설정하세요.
• 스프라이트 찾기가 캐릭터를 여러 조각으로 나누면, 캐릭터마다 박스 하나가 될 때까지 병합 거리를 올리세요.
• 이웃한 두 스프라이트가 합쳐지면 병합 거리를 0으로 낮추세요.
• 불투명 배경이 있는 시트: 배경 색 제거를 켜면 프레임이 투명하게 나옵니다.

활용 사례

• 에셋 스토어 시트에서 프레임 하나를 꺼내 포즈 하나만 편집하기.
• 아이콘이나 아이템 시트를 UI나 인벤토리용 개별 PNG로 나누기.
• 엔진의 그리드 슬라이서와 맞도록 시트 간격을 다시 맞추기.
• 진행 상황을 공유하려고 시트를 GIF로 만들기.

자주 묻는 질문