본문으로 건너뛰기
AI Sprite Maker

스프라이트 피벗 에디터

'발이 미끄러지는' 문제를 엔진에 들어가기 전에 해결하세요. 각 프레임의 원점을 정하고, 그 기준으로 재생되는 애니메이션을 확인한 뒤 데이터를 JSON으로 내보냅니다.

  • 무료
  • 로컬 실행
  • 가입 불필요
시작하려면 이미지를 불러오세요.

모든 처리가 브라우저에서 실행됩니다. 파일은 업로드되지 않으며, 페이지가 로드된 뒤에는 오프라인에서도 작동합니다.

스프라이트 피벗 에디터 사용 방법

  1. 스프라이트 시트를 끌어다 놓고 감지된 그리드를 확인합니다.
  2. 큰 프레임 화면을 클릭해 피벗을 놓거나 프리셋을 사용합니다: 중앙, 하단 중앙, 좌상단 또는 발(가장 아래 픽셀에서 자동 감지).
  3. 화살표 버튼이나 , 와 . 키로 프레임을 넘기고, 방향키로 피벗을 미세 조정합니다(Shift = 4 px).
  4. 미리보기를 확인합니다. 프레임이 지면선 위에 피벗 기준으로 정렬되어 그려지므로 떨림이 바로 보입니다.
  5. FPS, 프레임별 지속 시간, 반복 모드를 설정한 다음 일반, Aseprite 스타일 또는 Godot 스타일 JSON으로 내보냅니다.

결과물

  • 일반 JSON: 프레임 영역, px 및 0–1 단위 피벗, 지속 시간, fps, 반복
  • Aseprite 스타일 JSON(frameTags가 포함된 json-array)
  • Godot에 맞춘 JSON(영역, 오프셋, 상대 지속 시간)

게임을 만들며 얻은 팁

  • '발'은 각 프레임에서 보이는 픽셀의 하단 중앙을 찾아 줍니다. 대부분의 횡스크롤 캐릭터에 맞는 피벗입니다.
  • 어니언 스킨은 이전 프레임을 피벗 기준으로 정렬해 그려 주므로, 프레임 사이에서 발이나 머리 위치를 정확히 맞출 수 있습니다.
  • 핵심 프레임은 별도 지속 시간을 줘서 더 오래 보여 주세요. 예비 동작과 타격 프레임은 기본 시간의 2–3배가 잘 맞는 경우가 많습니다.
  • 내보낸 JSON을 다시 가져오면 피벗과 FPS가 복원되므로 나중에 돌아와서 조정할 수 있습니다.

활용 사례

  • AI로 생성했거나 따라 그린 애니메이션의 떨림 제거
  • 프레임마다 다른 공격·점프 원점 설정
  • 프레임별 원점을 읽는 엔진용 시트 준비
  • 프로그래머에게 타이밍 데이터 전달

자주 묻는 질문

피벗이 무엇인가요?
게임에서 스프라이트의 위치에 놓이는 프레임 안의 점입니다. 캐릭터라면 보통 두 발 사이로, 프레임을 어떻게 그렸든 땅을 딛고 서 있게 됩니다.
애니메이션이 왜 미끄러지거나 떨리나요?
캐릭터가 프레임마다 같은 위치에 있지 않기 때문입니다. 프레임별 피벗이 있으면 엔진이 이를 보정할 수 있고, 여기 미리보기에서 내보내기 전에 결과를 확인할 수 있습니다.
어떤 형식으로 내보낼 수 있나요?
모든 정보가 담긴 일반 JSON, 프레임 태그와 정규화된 피벗이 포함된 Aseprite 스타일 json-array, 프레임 중심 기준의 영역과 오프셋이 담긴 Godot 스타일 JSON입니다.
피벗을 다시 가져올 수 있나요?
네. 세 가지 내보내기 형식 중 어느 것이든 다시 불러와 피벗, 지속 시간, FPS를 복원할 수 있습니다.
이미지가 바뀌나요?
아니요. 시트는 그대로 두고 JSON 데이터만 내보냅니다.
시트가 업로드되나요?
아니요. 모든 작업이 브라우저 안에서 로컬로 처리됩니다.
모든 무료 도구 →