3BearLabs3Bear Tools
이미지

스프라이트 정규화: 스프라이트 시트 재배치

고르지 않은 스프라이트 시트를 균일한 격자로 바꾸고, 각 프레임을 설명하는 JSON 파일을 받으세요.

브라우저 안에서 처리합니다 — 파일은 이 기기를 떠나지 않습니다.

사용 방법

  1. 배경이 투명한 스프라이트 시트를 불러옵니다.
  2. 스프라이트 감지가 끝날 때까지 기다린 뒤, 미리보기 위에 표시되는 스프라이트 수, 격자 크기, 셀 크기를 확인합니다.
  3. 원본과 재배치된 시트를 비교한 뒤 PNG와 JSON 파일을 다운로드합니다.

손으로 그리거나 내보낸 스프라이트 시트는 프레임 크기가 제각각이고 간격도 고르지 않아 자르기 불편한 경우가 많습니다. 이 도구는 알파 채널로 각 스프라이트를 찾으므로 작동하려면 투명한 배경이 필요합니다. 알파 값이 작은 임계값보다 크면 해당 픽셀을 스프라이트의 일부로 봅니다. 시트에서 먼저 스프라이트 행을 찾고, 각 행 안에서 스프라이트를 찾으며, 면적이 일반적인 스프라이트보다 훨씬 작은 조각은 걸러냅니다.

그다음 스프라이트를 같은 크기의 셀로 이루어진 격자에 복사합니다. 격자는 대략 정사각형에 가까운 배치이고, 셀의 너비와 높이는 찾아낸 가장 큰 스프라이트에 맞춥니다. 각 스프라이트는 셀의 왼쪽에 놓이고 세로로는 가운데에 맞춰집니다. 도구는 원본 및 재배치된 이미지와 함께 찾아낸 스프라이트 수, 열×행으로 나타낸 격자, 픽셀 단위 셀 크기를 보여 줍니다.

다운로드는 두 가지입니다. PNG는 재배치된 시트입니다. JSON 파일에는 모든 프레임이 이름별로 나열되며, 새 시트에서의 위치와 크기, 원본 크기, 셀 안에서의 스프라이트 오프셋, 0과 0.5의 피벗이 들어 있습니다. 이름은 파일 이름에 세 자리 인덱스를 붙여 만듭니다.

아무것도 감지되지 않으면 페이지에서 투명한 배경의 이미지를 사용하라고 안내합니다. 감지와 재배치는 브라우저에서 이루어지며 이미지는 업로드되지 않습니다.

자주 묻는 질문

스프라이트가 감지되지 않는 이유는 무엇인가요?

감지는 투명도에 의존합니다. 시트에 단색 배경이 있다면 배경 제거기 등으로 먼저 제거하세요.

스프라이트는 어떤 순서로 배치되나요?

읽는 순서대로입니다. 위쪽 행부터 한 행씩, 각 행 안에서는 왼쪽에서 오른쪽으로 배치됩니다.

JSON 파일에는 무엇이 들어 있나요?

각 프레임의 사각형, 원본 크기, 스프라이트 오프셋, 피벗이 담긴 frames 객체와 작은 meta 섹션이 들어 있습니다.

스프라이트 크기가 바뀌나요?

아니요. 각 스프라이트는 픽셀 크기를 그대로 유지합니다. 간격과 위치만 바뀝니다.

시트가 어딘가에 업로드되나요?

아니요. 모든 처리는 브라우저에서 이루어집니다.

관련 도구