스프라이트 추출기

Drop files here or click (max 12 MB)

위에 이미지를 놓아 스프라이트 추출을 시작하세요.

소개 온라인 스프라이트 추출기

스프라이트 시트나 정적 이미지를 개별 스프라이트로 변환해야 하나요? 이 스프라이트 추출기는 스프라이트 영역을 자동으로 감지하고 깔끔하게 자르며(선택적 트리밍과 패딩 포함), 바로 사용 가능한 투명 PNG로 내보냅니다. 🚀 스크래치 프로젝트, 2D 게임 프로토타입, 교실 활동, 인디 게임에 이상적입니다. 픽셀 아트, UI 요소, 아이콘, 캐릭터와 함께 훌륭하게 작동합니다.

이 스프라이트 추출기를 사용하는 이유

  • 투명도와 구성 가능한 임계값을 기반으로 한 자동 스프라이트 감지
  • 각 스프라이트 주변의 투명한 테두리를 선택적으로 트리밍하는 깔끔한 크롭
  • 패딩, 정렬(중앙/하단) 및 선택적 균일 출력 크기 제어
  • PNG 내보내기를 위한 투명도(알파 채널) 보존 – 타일맵과 캐릭터에 이상적
  • 다운로드 전 빠른 검사를 위한 모든 감지된 스프라이트의 시각적 갤러리
  • JSZip를 사용한 클라이언트 측 ZIP 내보내기, 파일 이름과 스프라이트 순서 유지
  • 스크래치 친화적: 단일 스프라이트 시트를 여러 코스튬 또는 에셋으로 빠르게 변환
  • 다양한 엔진(스크래치, 고도, 유니티 2D, 페이저 등) 간 에셋 재사용에 완벽

🛠️ 스프라이트 시트에서 스프라이트 추출하는 방법 for sprite-extractor

1

1. 이미지 드롭

스프라이트 시트나 이미지를 드롭존으로 드래그 앤 드롭하거나 클릭하여 파일을 선택하세요. 최상의 결과를 위해 투명 배경이 있는 PNG 또는 스프라이트와 배경 간의 높은 대비를 사용하세요.

2

2. 자동 감지 실행

이 도구는 이미지의 경량 표현을 감지 엔드포인트로 전송하여 투명도와 최소 크기를 기반으로 각 스프라이트의 경계 상자를 계산합니다. 상자가 이미지 위에 오버레이되어 내보낼 내용을 빠르게 확인할 수 있습니다.

3

3. 추출 옵션 조정

패딩, 투명 배경 대 단색, 투명한 가장자리 트리밍, 정렬(중앙 또는 하단), 선택적 균일 출력 너비/높이를 조정하세요. 도구는 각 스프라이트 캔버스를 그에 따라 다시 구축합니다.

4

4. 스프라이트 미리보기

생성된 스프라이트의 갤러리를 스크롤하세요. 각 미리보기는 오프스크린 캔버스를 사용하여 클라이언트에서 구축되며 UI 옵션에 따라 이름을 변경하거나 삭제할 수 있습니다.

5

5. PNG 또는 ZIP 다운로드

개별 PNG 스프라이트를 내보내거나 현재 모든 미리보기가 포함된 단일 ZIP 파일을 다운로드하세요. ZIP은 JSZip를 사용하여 클라이언트 측에서 구축되며 파일 이름은 <code>sprite_0000.png</code>, <code>sprite_0001.png</code> 등과 같은 순차 패턴을 따릅니다.

기술 사양

감지 및 경계 상자

감지 단계는 전용 백엔드 엔드포인트에서 실행되며 클라이언트가 최종 스프라이트를 구축하는 데 사용하는 깔끔한 경계 상자를 반환합니다.

측면동작참고
감지 엔드포인트POST /api/sprite-extractor/inspect데이터 URL과 감지 옵션을 받아 스프라이트 박스 배열을 반환합니다.
감지 입력값허용 오차, 알파 임계값, 최소 너비, 최소 높이UI에서 이 매개변수를 조정하여 작은 노이즈를 무시하거나 의미 있는 스프라이트만 캡처하세요.
박스 형태축 정렬 사각형각 <code>SpriteBox</code>는 소스 이미지 좌표에서 <code>x</code>, <code>y</code>, <code>width</code>, <code>height</code>를 보유합니다.
투명도 처리알파 인식투명 픽셀은 자르기/트리밍 결정에 기여하지만 출력에서 보존될 수 있습니다.
오류 처리우아한 대체감지가 실패하면 도구는 읽기 쉬운 오류를 표시하고 UI를 중단하지 않습니다.

자르기, 트리밍 및 정렬

박스가 확인되면 모든 스프라이트 렌더링은 HTML 캔버스를 사용하여 브라우저에서 수행됩니다.

단계구현세부 사항
초기 자르기drawImage(img, box.x, box.y, w, h, 0, 0, w, h)각 스프라이트는 원본 이미지에서 임시 캔버스로 먼저 잘립니다.
투명 트리밍getImageData를 통한 알파 채널 스캔트리밍이 활성화되면 도구는 최소 비투명 경계 상자를 계산하기 위해 픽셀을 스캔합니다.
패딩구성 가능 0–256 px엔진에서 가장자리 아티팩트를 줄이기 위해 트리밍되거나 잘린 스프라이트 주위에 패딩이 적용됩니다.
정렬중앙 / 하단스프라이트는 중앙에 정렬되거나 하단에 정렬될 수 있습니다(기준선에 서 있는 캐릭터에 유용함).
균일 출력 크기선택적 spriteWidth / spriteHeight활성화되면 모든 스프라이트가 애니메이션을 표준화하기 위해 고정 크기 캔버스에 렌더링됩니다.
배경투명 또는 단색완전한 투명도를 유지하거나 선택한 배경 RGBA 색상으로 캔버스를 채웁니다.

성능 및 제한

브라우저에서 대화형 사용을 위해 설계되었습니다.

매개변수일반 동작참고
최대 입력 크기~10 MB 이미지더 큰 파일도 작동할 수 있지만 로드/감지 속도가 더 느려집니다.
스프라이트 개수최대 ~400개 스프라이트매우 많은 개수도 가능하지만, 미리보기 렌더링과 ZIP 생성에 더 오랜 시간이 걸립니다.
내보내기 형식ZIP 내부의 PNG (Blob)ZIP은 JSZip를 사용하여 완전히 클라이언트 측에서 생성됩니다.
캔버스 작업스프라이트별 자르기 및 그리기브라우저의 2D 캔버스 API에 의존하며, 성능은 해상도와 개수에 따라 확장됩니다.

명령줄 대안

대규모 스프라이트 시트나 자동화된 파이프라인의 경우 ImageMagick과 같은 CLI 도구를 스크립팅과 결합할 수 있습니다.

리눅스 / 🍎 macOS

ImageMagick을 사용한 균일 그리드 자르기

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

정규 64×64 그리드를 개별 PNG 파일로 자릅니다.

모든 스프라이트 압축

zip sprites.zip sprite_*.png

생성된 모든 스프라이트를 단일 아카이브로 패키징합니다.

Windows (PowerShell + ImageMagick)

그리드 기반 자르기

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

위와 동일하며, Windows에서 <code>magick</code> CLI를 사용합니다.

실용적인 사용 사례

2D 게임 개발

  • Godot, Unity 2D, Phaser 또는 Construct용 스프라이트 시트에서 캐릭터 애니메이션 프레임 추출.
  • 디자인 목업에서 UI 요소(버튼, 아이콘, 체력 바) 분리.
  • 레벨 에디터용 타일셋을 개별 타일로 분해.
// Godot 예시: 여러 프레임 로드\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

스크래치 및 교실 프로젝트

  • 단일 스프라이트 시트를 스크래치 캐릭터용 여러 의상으로 변환.
  • 프로그래밍 워크샵용 주제별 에셋 팩(동물, 행성, 아이콘) 준비.
  • 학생들이 드로잉 도구에서 스프라이트 시트를 디자인한 후 스크래치용으로 추출하도록 합니다.
// 간단한 애니메이션을 위한 스크래치 스타일 의사 코드\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

픽셀 아트 및 에셋 라이브러리

  • 오래된 픽셀 아트 시트를 검색 가능한 개별 스프라이트 라이브러리로 분할합니다.
  • 대형 상용 또는 오픈소스 팩에서 필요한 에셋만 추출합니다.
  • 다른 출처의 스프라이트 간 패딩과 정렬을 표준화합니다.

❓ Frequently Asked Questions

❓스프라이트 감지는 완전 자동인가요?

이 도구는 투명도와 구성 가능한 임계값(허용 오차, 알파 임계값, 최소 너비/높이)을 기반으로 자동 감지를 수행합니다. 많은 경우 '그냥 작동'하지만, 복잡한 시트의 경우 옵션을 조정하거나 두 번째 패스를 실행해야 할 수 있습니다.

📏추출기가 원본 이미지를 변경하나요?

아니요. 원본 이미지는 그대로 유지됩니다. 이 도구는 이미지를 메모리 내 캔버스로 읽어들인 후 영역을 잘라 새로운 캔버스로 만들고 새로운 PNG 스프라이트를 내보냅니다.

🎯패딩과 정렬을 제어할 수 있나요?

예. 패딩(픽셀 단위)을 구성하고, 투명 또는 단색 배경 중 선택하고, 투명 가장자리 자르기를 활성화하며, 출력 캔버스 내에서 스프라이트를 중앙 정렬 또는 하단 정렬할 수 있습니다.

🔒제 이미지가 서버에 저장되나요?

감지 단계에서는 스프라이트 영역을 계산하기 위해 이미지(데이터 URL 형태)를 전용 엔드포인트로 전송하지만, 스프라이트 자체는 브라우저에서 생성되고 압축됩니다. 이 서비스는 장기 저장이 아닌 일시적 처리를 위해 설계되었습니다. 항상 그렇듯이, 엄격하게 비공개로 유지해야 하는 에셋에는 타사 도구 사용을 피하세요.

🧊내보낸 스프라이트에서 투명도가 보존되나요?

예. 기본적으로 출력 캔버스는 투명하게 유지되며 스프라이트는 알파 채널을 유지합니다. 대상 엔진이 불투명 에셋을 선호하는 경우 선택적으로 단색 배경색을 선택할 수 있습니다.

Pro Tips

Best Practice

각 스프라이트 주변에 약간의 패딩(2–4px)을 사용하여 엔진에서 크기 조정이나 회전 시 가장자리 번짐을 방지하세요.

Best Practice

스프라이트 이름을 일관되게 지정하여(예: <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) 애니메이션 가져오기와 스크립팅을 단순화하세요.

Best Practice

교육 환경에서는 매우 간단한 스프라이트 시트(적은 수의 큰 스프라이트, 명확한 배경)로 시작하여 학생들이 즉각적인 결과를 볼 수 있도록 하세요.

Best Practice

내보낸 ZIP 파일을 프로젝트의 소스 파일과 함께 보관하여 나중에 애니메이션을 쉽게 재생성하거나 조정할 수 있도록 하세요.

Additional Resources

Scratch 위키 – 스프라이트
Documentation
Godot 문서 – 2D 스프라이트 애니메이션
Documentation
Unity 매뉴얼 – 2D 스프라이트
Documentation

Other Tools