스프라이트 아틀라스 제너레이터 - 2D 게임용 온라인 아틀라스 패커

스프라이트 아틀라스 제너레이터는 웹 브라우저 상에서 다수의 스프라이트 이미지들을 하나의 아틀라스 파일로 영리하게 배치하고, 게임 엔진 등에서 이를 활용할 수 있는 좌표 데이터를 함께 추출해주는 무료 웹 도구입니다.

이 도구는 성능 저하 없이 완전한 클라이언트 사이드(Client-side) 방식으로 동작하여, 민감한 게임 소스 리소스가 외부 서버로 업로드되지 않으므로 안심하고 안전하게 개발 작업을 진행하실 수 있습니다.

🌟 핵심 주요 기능

• ⚡ 스마트 2D 팩킹 알고리즘 (Growing Packer): 각 이미지의 면적과 크기를 고려하여 빈 공간을 최소화하고 자동으로 아틀라스 캔버스 크기를 넓혀가며 배치합니다.
• ✂️ 투명 여백 트리밍 (Trim Alpha): 이미지 외곽의 쓸모없는 투명 픽셀 영역을 잘라내어 팩킹 효율을 극대화하고 게임 엔진에서 원래 좌표 정보와 오프셋을 그대로 활용할 수 있도록 복원용 spriteSourceSize 데이터를 제공합니다.
• 🔄 90도 회전 배치 지원 (Allow Rotation): 공간 효율성을 더욱 높이기 위해 스프라이트를 90도 회전하여 빈 틈에 끼워 넣는 고성능 배치를 지원합니다.
• 📐 다양한 크기 규격 대응: 자동 최소화(Auto Fit)는 물론, 게임 개발 환경에 꼭 필요한 2의 거듭제곱(Power of 2) 크기 맞춤 및 정사각형(Square) 변환 모드를 제공합니다.
• 💾 다양한 좌표 데이터 내보내기:
  • JSON Hash: Cocos2D-x, PixiJS, Phaser 등에서 널리 쓰이는 Key-Value 해시 형식
  • JSON Array: 배열 형태의 순차적 리스트 형식
  • XML: Generic XML 형식의 아키텍처 지원
  • CSS Sprite Sheet: 일반 웹 퍼블리싱 및 UI 작업을 위한 CSS background-position 코드
• 🔍 실시간 조작 및 인터랙티브 뷰어: 캔버스의 실시간 줌 인/아웃 및 마우스/터치 드래그를 이용한 화면 이동(Pan)을 지원하여 대형 아틀라스도 편안하게 모니터링할 수 있습니다.

🛠️ 사용 방법 (How to Use)

1. 이미지 파일 업로드: 변환하고자 하는 캐릭터 모션 프레임이나 아이템 아이콘 등의 이미지들을 드래그 앤 드롭하거나 파일 업로더로 선택합니다.
2. 배치 알고리즘 설정:
   • 정렬 순서: 면적 큰 순(추천), 긴 변 기준, 높이 기준 등으로 순서를 선택합니다.
   • 크기 모드: Auto, Power of 2, Square 등을 설정합니다.
   • 여백 및 간격: 스프라이트 간의 패딩(Padding)과 테두리 여백(Border Padding)을 조절합니다.
   • 트리밍 및 회전: 투명 여백 제거(Trim) 및 회전 허용 옵션을 체크하여 공간 점유 효율을 확인합니다.
3. 결과 미리보기 및 뷰어:
   • 우측 화면에서 생성된 아틀라스 이미지의 해상도와 면적 점유 효율(Efficiency)을 실시간으로 확인합니다.
   • 필요 시 줌(Zoom) 및 팬(Pan)을 통해 미세한 부분까지 확대 검토합니다.
4. 다운로드:
   • 완성된 아틀라스 이미지를 PNG 또는 WEBP 파일로 저장합니다.
   • 포맷을 선택한 후 좌표 데이터 파일(.json, .xml, .css)을 다운로드하여 프로젝트에 활용합니다.

💬 자주 묻는 질문 (FAQ)

• Q1. 이미지가 너무 많으면 느려지거나 서버가 멈추지 않나요?
  • A. 전혀 그렇지 않습니다. 이 도구는 100% 클라이언트 사이드 Javascript로 작동합니다. 브라우저의 성능을 십분 활용하며, 서버로 전송하지 않아 전송 대기 시간이 없으므로 수백 장의 스프라이트도 단 몇 밀리초(ms) 만에 패킹을 끝마칩니다.
• Q2. 2의 거듭제곱(Power of 2) 크기로 받아야 하는 이유가 무엇인가요?
  • A. WebGL이나 구형 모바일 GPU 하드웨어 환경에서는 스프라이트 시트의 가로/세로 크기가 256, 512, 1024, 2048 등 2의 거듭제곱일 때 그래픽 메모리 연산 성능이 비약적으로 최적화되고 텍스처 필터링 품질이 향상됩니다.
• Q3. 트림(Trim) 기능을 쓰면 원래 이미지 크기 정보가 손실되나요?
  • A. 이미지 픽셀은 여백이 잘린 채 아틀라스에 패킹되지만, 다운로드하는 JSON 파일 내에 원본 크기(sourceSize)와 잘려 나간 오프셋(spriteSourceSize)을 온전히 보존하여 내보냅니다. 따라서 게임 엔진에서 리소스를 로드할 때 원래 위치 그대로 복원되어 렌더링되므로 안심하고 사용하셔도 됩니다.
• Q4. 모바일 기기에서도 사용 가능한가요?
  • A. 네, 모바일 기기의 브라우저 화면 해상도에 최적화된 반응형 UI가 구현되어 있습니다. 미리보기 영역은 멀티터치 및 터치 드래그로 손쉽게 확대/축소 및 이동이 가능하여 현장에서도 편리하게 활용할 수 있습니다.